diff --git a/css/portfolio.css b/css/portfolio.css
index 8088754..bb8c0de 100644
--- a/css/portfolio.css
+++ b/css/portfolio.css
@@ -269,9 +269,17 @@
     display: block;
 }
 
-.browser-dots span:first-child  { background: #ff5f57; }
-.browser-dots span:nth-child(2) { background: #febc2e; }
-.browser-dots span:nth-child(3) { background: #28c840; }
+.browser-dots span:first-child {
+    background: #ff5f57;
+}
+
+.browser-dots span:nth-child(2) {
+    background: #febc2e;
+}
+
+.browser-dots span:nth-child(3) {
+    background: #28c840;
+}
 
 .browser-url {
     font-family: var(--mono);
diff --git a/index.php b/index.php
index 1145fea..a24de97 100644
--- a/index.php
+++ b/index.php
@@ -1,72 +1,74 @@
 <?php
-$title       = 'Ovidiu Ungureanu — Web Developer';
-$description = 'PHP & MySQL developer based in the UK. Custom web applications, ERP systems, and freelance web development.';
-require __DIR__ . '/includes/header.php';
+
+$title = 'Ovidiu Ungureanu — Web Developer';
+$description = 'PHP/MySQL developer based in Peterborough. I build custom web apps, ERP systems, and backends for businesses that need something specific.';
+require __DIR__.'/includes/header.php';
 ?>
 
-    <header class="hero">
-        <div class="hero-label">Web Developer — UK</div>
-        <h1>Ovidiu<br>Ungureanu</h1>
-        <p class="hero-sub">I build web applications that work.<br>PHP, MySQL, clean code, no nonsense.</p>
-        <div class="hero-cta">
-            <a href="/portfolio" class="btn">View Work →</a>
-            <a href="#contact" class="btn btn-ghost">Get in Touch</a>
-        </div>
-    </header>
+<header class="hero">
+	<div class="hero-label">Web Developer — UK</div>
+	<h1>Ovidiu<br>Ungureanu</h1>
+	<p class="hero-sub">I build web applications that work.<br>PHP, MySQL, clean code, no nonsense.</p>
+	<div class="hero-cta">
+		<a href="/portfolio" class="btn">View Work →</a>
+		<a href="#contact" class="btn btn-ghost">Get in Touch</a>
+	</div>
+</header>
 
-    <section id="about" class="section">
-        <div class="section-label">001 — About</div>
-        <div class="section-content">
-            <p class="large-text">I'm a PHP/MySQL developer based in the UK, building custom web applications and backend systems. I run a small web agency focused on delivering practical, well-built solutions.</p>
-            <p>My work ranges from custom ERP platforms to freelance web projects. I care about performance, maintainability, and getting things done right the first time. No frameworks for the sake of frameworks. No unnecessary complexity.</p>
-        </div>
-    </section>
+<section id="about" class="section">
+	<div class="section-label">001 — About</div>
+	<div class="section-content">
+		<p class="large-text">I'm a PHP/MySQL developer based in Peterborough. I build custom web apps, backend systems, and the kind of tools businesses actually need but can't find off the shelf.</p>
+		<p>Most of my work is ERP systems, booking tools, and bespoke admin backends. I use PHP and MySQL because they're the right tools for what I build — not because I haven't heard of anything else. Performance matters. So does code you can actually read six months later.</p>
+	</div>
+</section>
 
-    <section id="services" class="section">
-        <div class="section-label">002 — Services</div>
-        <div class="services-grid">
-            <div class="service-item">
-                <span class="service-num">01</span>
-                <h3>Custom Web Applications</h3>
-                <p>Bespoke PHP applications built to your exact requirements. Backend systems, admin panels, data management tools.</p>
-            </div>
-            <div class="service-item">
-                <span class="service-num">02</span>
-                <h3>Database Design & Optimisation</h3>
-                <p>MySQL schema design, query optimisation, and performance tuning. Making slow systems fast.</p>
-            </div>
-            <div class="service-item">
-                <span class="service-num">03</span>
-                <h3>Website Development</h3>
-                <p>Clean, responsive websites. HTML, CSS, JavaScript, Vue.js. Built to load fast and work everywhere.</p>
-            </div>
-            <div class="service-item">
-                <span class="service-num">04</span>
-                <h3>Legacy System Modernisation</h3>
-                <p>Upgrading and refactoring existing PHP codebases. Improving what you already have without starting over.</p>
-            </div>
-        </div>
-    </section>
+<section id="services" class="section">
+	<div class="section-label">002 — Services</div>
+	<div class="services-grid">
+		<div class="service-item">
+			<span class="service-num">01</span>
+			<h3>Custom Web Applications</h3>
+			<p>Built to your spec, not adapted from a template. Admin panels, internal tools, whatever the business actually needs.</p>
+		</div>
+		<div class="service-item">
+			<span class="service-num">02</span>
+			<h3>Database Design & Optimisation</h3>
+			<p>Schema design, query optimisation, performance tuning. If your database is the bottleneck, I'll find it.</p>
+		</div>
+		<div class="service-item">
+			<span class="service-num">03</span>
+			<h3>Website Development</h3>
+			<p>HTML, CSS, JavaScript, Vue.js. Loads fast, works on every device — no unnecessary weight.</p>
+		</div>
+		<div class="service-item">
+			<span class="service-num">04</span>
+			<h3>Legacy System Modernisation</h3>
+			<p>Old PHP codebase that's become painful to work with? I refactor and modernise without burning everything down.</p>
+		</div>
+	</div>
+</section>
 
-    <section class="section section-cta">
-        <div class="section-label">003 — Work</div>
-        <div class="section-content">
-            <p class="large-text">Selected projects and client work.</p>
-            <a href="/portfolio" class="btn">View Portfolio →</a>
-        </div>
-    </section>
+<section class="section section-cta">
+	<div class="section-label">003 — Work</div>
+	<div class="section-content">
+		<p class="large-text">A few recent builds.</p>
+		<a href="/portfolio" class="btn">View Portfolio →</a>
+	</div>
+</section>
 
-    <section id="contact" class="section">
-        <div class="section-label">004 — Contact</div>
-        <div class="section-content">
-            <p class="large-text">Got a project in mind?</p>
-            <a href="mailto:hello@uovidiu.com" class="contact-email">hello@uovidiu.com</a>
-            <div class="contact-details">
-                <span>Peterborough, UK</span>
-                <span>·</span>
-                <span>Available for freelance</span>
-            </div>
-        </div>
-    </section>
+<section id="contact" class="section">
+	<div class="section-label">004 — Contact</div>
+	<div class="section-content">
+		<p class="large-text">Got a project in mind?</p>
+		<a href="mailto:hello@uovidiu.com" class="contact-email">hello@uovidiu.com</a>
+		<div class="contact-details">
+			<span>Peterborough, UK</span>
+			<span>·</span>
+			<span>Available for freelance</span>
+		</div>
+	</div>
+</section>
 
-<?php require __DIR__ . '/includes/footer.php'; ?>
+<?php
+require __DIR__.'/includes/footer.php'; ?>
diff --git a/portfolio/_template/index.php b/portfolio/_template/index.php
new file mode 100644
index 0000000..296c90d
--- /dev/null
+++ b/portfolio/_template/index.php
@@ -0,0 +1,152 @@
+<?php
+
+/*
+ * ═══════════════════════════════════════════════════════════════════
+ * CASE STUDY TEMPLATE
+ * ═══════════════════════════════════════════════════════════════════
+ *
+ * HOW TO USE
+ * ──────────
+ * 1. Copy this folder to portfolio/{slug}/
+ * 2. Fill in every TODO below — nothing should say TODO when live
+ * 3. Add the project to the $projects array in portfolio/index.php
+ * 4. Drop screenshots into /img/{slug}/
+ *
+ * IMAGES
+ * ──────
+ * hero.jpg          — full-page screenshot (used as grid thumbnail too)
+ * feature-1.jpg     — first feature / flow screenshot
+ * feature-2.jpg     — second feature / flow screenshot
+ * Add more as needed — duplicate the 2-col screenshot section below.
+ *
+ * SECTIONS (delete what you don't need)
+ * ──────────────────────────────────────
+ * · Project Overview   — always include
+ * · Hero screenshot    — always include
+ * · Feature section    — include if there's a flow / feature worth showing
+ * · Craft & Execution  — include if the build has something worth saying
+ * · CTA                — always include, do not change
+ * ═══════════════════════════════════════════════════════════════════
+ */
+
+// ── Page config ───────────────────────────────────────────────────
+$title       = 'TODO Client Name — Case Study';   // e.g. 'Northgate Motors — Case Study'
+$description = 'TODO One sentence about what you built and for whom.';
+$extra_css   = '/css/portfolio.css';
+require __DIR__ . '/../../includes/header.php';
+
+// ── Project config (matches portfolio/index.php entry) ────────────
+$cs_num    = 'TODO';   // e.g. '02'
+$cs_code   = 'TODO';   // e.g. 'WEB_DEV' / 'E_COMMERCE' / 'BOOKING' / 'LANDING' / 'FULL_BUILD'
+$cs_domain = 'TODO';   // e.g. 'example.co.uk' (no https://)
+?>
+
+<div class="cs-breadcrumb">
+	<a href="/portfolio/" class="cs-back">← All Work</a>
+	<span class="cs-breadcrumb-label">[<?= htmlspecialchars($cs_num) ?> / <?= htmlspecialchars($cs_code) ?>]</span>
+</div>
+
+<header class="hero">
+	<div class="hero-label">Case Study — <?= htmlspecialchars($cs_num) ?></div>
+	<h1>TODO<br>Client Name</h1>                    <!-- break the name naturally across 2 lines -->
+	<p class="hero-sub">TODO Type · TODO Year</p>  <!-- e.g. Website Redesign · 2025 -->
+	<ul class="cs-meta-bar">
+		<li>TODO Stack</li>                         <!-- e.g. PHP · MySQL · Tailwind CSS -->
+		<li>TODO Client, Location</li>              <!-- e.g. Northgate Motors, Peterborough -->
+		<li>TODO Year</li>                          <!-- e.g. 2025 -->
+	</ul>
+</header>
+
+
+<!-- ── PROJECT OVERVIEW ──────────────────────────────────────────── -->
+<section class="section">
+	<div class="section-label">Project Overview</div>
+	<div class="section-content">
+		<p>TODO What problem did the client have and what did you build to fix it? Keep it to 2–3 sentences. Be specific — name the feature, the constraint, the outcome.</p>
+	</div>
+</section>
+
+
+<!-- ── HERO SCREENSHOT ───────────────────────────────────────────── -->
+<section class="section">
+	<div class="section-label">TODO Section label</div><!-- e.g. Homepage / Dashboard / Listings -->
+	<div class="screenshot-hero-wrap">
+		<div class="browser-chrome">
+			<div class="browser-dots">
+				<span></span><span></span><span></span>
+			</div>
+			<span class="browser-url"><?= htmlspecialchars($cs_domain) ?></span>
+		</div>
+		<img
+			src="/img/TODO-slug/hero.jpg"
+			alt="TODO Client Name — TODO description"
+			class="screenshot-hero"
+			loading="lazy"
+		>
+	</div>
+</section>
+
+
+<!-- ── FEATURE / FLOW SCREENSHOTS (2-col) ────────────────────────── -->
+<!-- Delete this section if you don't have feature screenshots -->
+<section class="section">
+	<div class="section-label">TODO Section label</div><!-- e.g. Booking Flow / Admin Panel / Listings -->
+	<div class="services-grid">
+
+		<div class="service-item screenshot-card">
+			<span class="service-num">TODO Feature label</span><!-- e.g. Step 1 / Vehicle Lookup -->
+			<div class="browser-chrome browser-chrome--sm">
+				<div class="browser-dots">
+					<span></span><span></span><span></span>
+				</div>
+				<span class="browser-url"><?= htmlspecialchars($cs_domain) ?>/TODO-path</span>
+			</div>
+			<img
+				src="/img/TODO-slug/feature-1.jpg"
+				alt="TODO description"
+				class="screenshot-screen"
+				loading="lazy"
+			>
+		</div>
+
+		<div class="service-item screenshot-card">
+			<span class="service-num">TODO Feature label</span>
+			<div class="browser-chrome browser-chrome--sm">
+				<div class="browser-dots">
+					<span></span><span></span><span></span>
+				</div>
+				<span class="browser-url"><?= htmlspecialchars($cs_domain) ?>/TODO-path</span>
+			</div>
+			<img
+				src="/img/TODO-slug/feature-2.jpg"
+				alt="TODO description"
+				class="screenshot-screen"
+				loading="lazy"
+			>
+		</div>
+
+	</div>
+</section>
+
+
+<!-- ── CRAFT & EXECUTION ─────────────────────────────────────────── -->
+<!-- Delete this section if there's nothing distinctive about the build -->
+<section class="section">
+	<div class="section-label">Craft & Execution</div>
+	<div class="section-content">
+		<p>TODO Anything worth saying about how it was built — a technical decision, a performance win, something that made the difference. If you can't think of anything specific, delete this section.</p>
+	</div>
+</section>
+
+
+<!-- ── CTA — DO NOT CHANGE ───────────────────────────────────────── -->
+<section class="section section-cta">
+	<div class="section-label">— Next</div>
+	<div class="section-content">
+		<a href="/portfolio/" class="cs-back cs-back--lg">← Back to All Work</a>
+		<p class="large-text">Got a project in mind?</p>
+		<a href="mailto:hello@uovidiu.com" class="btn">Get in Touch →</a>
+	</div>
+</section>
+
+<?php require __DIR__ . '/../../includes/footer.php'; ?>
diff --git a/portfolio/index.full.php b/portfolio/index.full.php
new file mode 100644
index 0000000..4567c2d
--- /dev/null
+++ b/portfolio/index.full.php
@@ -0,0 +1,222 @@
+<?php
+
+$title = 'Portfolio — Ovidiu Ungureanu';
+$description = 'Selected web development projects by Ovidiu Ungureanu.';
+$extra_css = '/css/portfolio.css';
+require __DIR__.'/../includes/header.php';
+
+$projects = [
+		[
+				'slug' => 'thompson',
+				'num' => '01',
+				'code' => 'WEB_DEV',
+				'title' => 'Thompson Service Centre',
+				'desc' => 'Trust-first redesign for a 25-year Peterborough garage. Bold credibility signals, booking flow, zero clichés.',
+				'year' => '2025',
+				'thumb' => '/img/thompson/hero.jpg',
+				'live' => true,
+		],
+		[
+				'slug' => 'northgate-motors',
+				'num' => '02',
+				'code' => 'E_COMMERCE',
+				'title' => 'Northgate Motors',
+				'desc' => 'Parts and accessories e-commerce with Stripe checkout and stock management backend.',
+				'year' => '2025',
+				'thumb' => null,
+				'live' => false,
+		],
+		[
+				'slug' => 'fenland-tyres',
+				'num' => '03',
+				'code' => 'BOOKING',
+				'title' => 'Fenland Tyres',
+				'desc' => 'Online booking system with real-time slot availability and automated confirmation emails.',
+				'year' => '2025',
+				'thumb' => null,
+				'live' => false,
+		],
+		[
+				'slug' => 'stamford-autocare',
+				'num' => '04',
+				'code' => 'LANDING',
+				'title' => 'Stamford Autocare',
+				'desc' => 'Local SEO-focused landing page with one job: turn a Google search into a phone call.',
+				'year' => '2024',
+				'thumb' => null,
+				'live' => false,
+		],
+		[
+				'slug' => 'heron-storage',
+				'num' => '05',
+				'code' => 'WEB_DEV',
+				'title' => 'Heron Self Storage',
+				'desc' => 'Full site rebuild with unit availability checker and online reservation management.',
+				'year' => '2024',
+				'thumb' => null,
+				'live' => false,
+		],
+		[
+				'slug' => 'ely-clutch',
+				'num' => '06',
+				'code' => 'LANDING',
+				'title' => 'Ely Clutch & Brake',
+				'desc' => 'Landing page built around their specialist credentials and emergency call-out. Loads in under a second.',
+				'year' => '2024',
+				'thumb' => null,
+				'live' => false,
+		],
+		[
+				'slug' => 'wisbech-auto',
+				'num' => '07',
+				'code' => 'FULL_BUILD',
+				'title' => 'Wisbech Auto Centre',
+				'desc' => 'Full-stack build: service menu, booking, customer portal, and GSAP scroll animations.',
+				'year' => '2024',
+				'thumb' => null,
+				'live' => false,
+		],
+		[
+				'slug' => 'march-mot',
+				'num' => '08',
+				'code' => 'BOOKING',
+				'title' => 'March MOT Station',
+				'desc' => 'Streamlined MOT booking with DVLA vehicle lookup and reminder SMS integration.',
+				'year' => '2024',
+				'thumb' => null,
+				'live' => false,
+		],
+		[
+				'slug' => 'peterborough-panels',
+				'num' => '09',
+				'code' => 'PORTFOLIO',
+				'title' => 'Peterborough Panels',
+				'desc' => 'Before/after portfolio site for a bodywork specialist. Gallery-first layout, zero clutter.',
+				'year' => '2023',
+				'thumb' => null,
+				'live' => false,
+		],
+		[
+				'slug' => 'huntingdon-haulage',
+				'num' => '10',
+				'code' => 'WEB_DEV',
+				'title' => 'Huntingdon Haulage',
+				'desc' => 'Fleet services website with route coverage map and driver recruitment section.',
+				'year' => '2023',
+				'thumb' => null,
+				'live' => false,
+		],
+		[
+				'slug' => 'chatteris-cars',
+				'num' => '11',
+				'code' => 'LISTINGS',
+				'title' => 'Chatteris Cars',
+				'desc' => 'Used car listings with dynamic search, filter by make/model, and finance enquiry form.',
+				'year' => '2023',
+				'thumb' => null,
+				'live' => false,
+		],
+		[
+				'slug' => 'ramsey-recovery',
+				'num' => '12',
+				'code' => 'LANDING',
+				'title' => 'Ramsey Recovery',
+				'desc' => '24/7 roadside recovery landing page built for speed — sub-2s load, click-to-call hero.',
+				'year' => '2023',
+				'thumb' => null,
+				'live' => false,
+		],
+		[
+				'slug' => 'soham-services',
+				'num' => '13',
+				'code' => 'FULL_BUILD',
+				'title' => 'Soham Service Station',
+				'desc' => 'Full rebuild from scratch — site, booking system, staff rota, and customer history. One login, everything in one place.',
+				'year' => '2023',
+				'thumb' => null,
+				'live' => false,
+		],
+		[
+				'slug' => 'downham-diesel',
+				'num' => '14',
+				'code' => 'LANDING',
+				'title' => 'Downham Diesel',
+				'desc' => 'Specialist diesel landing page targeting commercial vehicle operators in the Fens.',
+				'year' => '2022',
+				'thumb' => null,
+				'live' => false,
+		],
+		[
+				'slug' => 'kings-lynn-kustoms',
+				'num' => '15',
+				'code' => 'PORTFOLIO',
+				'title' => "King's Lynn Kustoms",
+				'desc' => 'Custom builds portfolio for a one-man fabrication shop. Dramatic full-screen imagery.',
+				'year' => '2022',
+				'thumb' => null,
+				'live' => false,
+		],
+];
+?>
+
+<header class="hero">
+	<div class="hero-label">Portfolio — Selected Work</div>
+	<h1>Selected<br>Work</h1>
+	<p class="hero-sub">Client projects and builds.</p>
+</header>
+
+<section class="section">
+	<div class="section-label">001 — <?php
+		echo count($projects); ?> Projects
+	</div>
+	<div class="portfolio-grid">
+		<?php
+		foreach ($projects as $p): ?>
+			<a href="/portfolio/<?php
+			echo htmlspecialchars($p['slug']); ?>/"
+			   class="project-card<?php
+			   echo $p['live'] ? '' : ' project-card--wip'; ?>">
+
+				<div class="project-card__thumb">
+					<span class="project-card__label">[<?php
+						echo htmlspecialchars($p['num']); ?> / <?php
+						echo htmlspecialchars($p['code']); ?>]</span>
+					<?php
+					if ($p['thumb']): ?>
+						<img src="<?php
+						echo htmlspecialchars($p['thumb']); ?>"
+							 alt="<?php
+							 echo htmlspecialchars($p['title']); ?>"
+							 loading="lazy">
+					<?php
+					endif; ?>
+				</div>
+
+				<div class="project-card__body">
+					<h3 class="project-card__title"><?php
+						echo htmlspecialchars($p['title']); ?></h3>
+					<p class="project-card__desc"><?php
+						echo htmlspecialchars($p['desc']); ?></p>
+					<div class="project-card__footer">
+						<span class="project-card__year"><?php
+							echo htmlspecialchars($p['year']); ?></span>
+						<span class="project-card__arrow">→</span>
+					</div>
+				</div>
+
+			</a>
+		<?php
+		endforeach; ?>
+	</div>
+</section>
+
+<section class="section section-cta">
+	<div class="section-label">002 — Contact</div>
+	<div class="section-content">
+		<p class="large-text">Got a project in mind?</p>
+		<a href="mailto:hello@uovidiu.com" class="btn">Get in Touch →</a>
+	</div>
+</section>
+
+<?php
+require __DIR__.'/../includes/footer.php'; ?>
diff --git a/portfolio/index.php b/portfolio/index.php
index 5bd4ec5..b786652 100644
--- a/portfolio/index.php
+++ b/portfolio/index.php
@@ -1,205 +1,83 @@
 <?php
-$title       = 'Portfolio — Ovidiu Ungureanu';
-$description = 'Selected web development projects by Ovidiu Ungureanu.';
-$extra_css   = '/css/portfolio.css';
-require __DIR__ . '/../includes/header.php';
 
+$title = 'Portfolio — Ovidiu Ungureanu';
+$description = 'Selected web development projects by Ovidiu Ungureanu.';
+$extra_css = '/css/portfolio.css';
+require __DIR__.'/../includes/header.php';
+
+// Full 15-project version is in index.full.php — restore when ready.
 $projects = [
-    [
-        'slug'  => 'thompson',
-        'num'   => '01',
-        'code'  => 'WEB_DEV',
-        'title' => 'Thompson Service Centre',
-        'desc'  => 'Trust-first redesign for a 25-year Peterborough garage. Bold credibility signals, booking flow, zero clichés.',
-        'year'  => '2025',
-        'thumb' => '/img/thompson/hero.jpg',
-        'live'  => true,
-    ],
-    [
-        'slug'  => 'northgate-motors',
-        'num'   => '02',
-        'code'  => 'E_COMMERCE',
-        'title' => 'Northgate Motors',
-        'desc'  => 'Parts and accessories e-commerce with Stripe checkout and stock management backend.',
-        'year'  => '2025',
-        'thumb' => null,
-        'live'  => false,
-    ],
-    [
-        'slug'  => 'fenland-tyres',
-        'num'   => '03',
-        'code'  => 'BOOKING',
-        'title' => 'Fenland Tyres',
-        'desc'  => 'Online booking system with real-time slot availability and automated confirmation emails.',
-        'year'  => '2025',
-        'thumb' => null,
-        'live'  => false,
-    ],
-    [
-        'slug'  => 'stamford-autocare',
-        'num'   => '04',
-        'code'  => 'LANDING',
-        'title' => 'Stamford Autocare',
-        'desc'  => 'High-conversion landing page focused on local SEO and a single clear call-to-action.',
-        'year'  => '2024',
-        'thumb' => null,
-        'live'  => false,
-    ],
-    [
-        'slug'  => 'heron-storage',
-        'num'   => '05',
-        'code'  => 'WEB_DEV',
-        'title' => 'Heron Self Storage',
-        'desc'  => 'Full site rebuild with unit availability checker and online reservation management.',
-        'year'  => '2024',
-        'thumb' => null,
-        'live'  => false,
-    ],
-    [
-        'slug'  => 'ely-clutch',
-        'num'   => '06',
-        'code'  => 'LANDING',
-        'title' => 'Ely Clutch & Brake',
-        'desc'  => 'Fast-loading landing page emphasising specialist credentials and emergency call-out service.',
-        'year'  => '2024',
-        'thumb' => null,
-        'live'  => false,
-    ],
-    [
-        'slug'  => 'wisbech-auto',
-        'num'   => '07',
-        'code'  => 'FULL_BUILD',
-        'title' => 'Wisbech Auto Centre',
-        'desc'  => 'Full-stack build: service menu, booking, customer portal, and GSAP scroll animations.',
-        'year'  => '2024',
-        'thumb' => null,
-        'live'  => false,
-    ],
-    [
-        'slug'  => 'march-mot',
-        'num'   => '08',
-        'code'  => 'BOOKING',
-        'title' => 'March MOT Station',
-        'desc'  => 'Streamlined MOT booking with DVLA vehicle lookup and reminder SMS integration.',
-        'year'  => '2024',
-        'thumb' => null,
-        'live'  => false,
-    ],
-    [
-        'slug'  => 'peterborough-panels',
-        'num'   => '09',
-        'code'  => 'PORTFOLIO',
-        'title' => 'Peterborough Panels',
-        'desc'  => 'Before/after portfolio site for a bodywork specialist. Gallery-first layout, zero clutter.',
-        'year'  => '2023',
-        'thumb' => null,
-        'live'  => false,
-    ],
-    [
-        'slug'  => 'huntingdon-haulage',
-        'num'   => '10',
-        'code'  => 'WEB_DEV',
-        'title' => 'Huntingdon Haulage',
-        'desc'  => 'Fleet services website with route coverage map and driver recruitment section.',
-        'year'  => '2023',
-        'thumb' => null,
-        'live'  => false,
-    ],
-    [
-        'slug'  => 'chatteris-cars',
-        'num'   => '11',
-        'code'  => 'LISTINGS',
-        'title' => 'Chatteris Cars',
-        'desc'  => 'Used car listings with dynamic search, filter by make/model, and finance enquiry form.',
-        'year'  => '2023',
-        'thumb' => null,
-        'live'  => false,
-    ],
-    [
-        'slug'  => 'ramsey-recovery',
-        'num'   => '12',
-        'code'  => 'LANDING',
-        'title' => 'Ramsey Recovery',
-        'desc'  => '24/7 roadside recovery landing page built for speed — sub-2s load, click-to-call hero.',
-        'year'  => '2023',
-        'thumb' => null,
-        'live'  => false,
-    ],
-    [
-        'slug'  => 'soham-services',
-        'num'   => '13',
-        'code'  => 'FULL_BUILD',
-        'title' => 'Soham Service Station',
-        'desc'  => 'Complete digital overhaul: site, booking system, staff rota tool, and customer history log.',
-        'year'  => '2023',
-        'thumb' => null,
-        'live'  => false,
-    ],
-    [
-        'slug'  => 'downham-diesel',
-        'num'   => '14',
-        'code'  => 'LANDING',
-        'title' => 'Downham Diesel',
-        'desc'  => 'Specialist diesel landing page targeting commercial vehicle operators in the Fens.',
-        'year'  => '2022',
-        'thumb' => null,
-        'live'  => false,
-    ],
-    [
-        'slug'  => 'kings-lynn-kustoms',
-        'num'   => '15',
-        'code'  => 'PORTFOLIO',
-        'title' => "King's Lynn Kustoms",
-        'desc'  => 'Custom builds portfolio for a one-man fabrication shop. Dramatic full-screen imagery.',
-        'year'  => '2022',
-        'thumb' => null,
-        'live'  => false,
-    ],
+		[
+				'slug' => 'thompson',
+				'num' => '01',
+				'code' => 'WEB_DEV',
+				'title' => 'Thompson Service Centre',
+				'desc' => 'Trust-first redesign for a 25-year Peterborough garage. Bold credibility signals, booking flow, zero clichés.',
+				'year' => '2025',
+				'thumb' => '/img/thompson/hero.jpg',
+				'live' => true,
+		],
 ];
 ?>
 
-    <header class="hero">
-        <div class="hero-label">Portfolio — Selected Work</div>
-        <h1>Selected<br>Work</h1>
-        <p class="hero-sub">Client projects and builds.</p>
-    </header>
+<header class="hero">
+	<div class="hero-label">Portfolio — Selected Work</div>
+	<h1>Selected<br>Work</h1>
+	<p class="hero-sub">Client projects and builds.</p>
+</header>
 
-    <section class="section">
-        <div class="section-label">001 — <?php echo count($projects); ?> Projects</div>
-        <div class="portfolio-grid">
-            <?php foreach ($projects as $p): ?>
-            <a href="/portfolio/<?php echo htmlspecialchars($p['slug']); ?>/"
-               class="project-card<?php echo $p['live'] ? '' : ' project-card--wip'; ?>">
+<section class="section">
+	<div class="section-label">001 — <?php
+		echo count($projects); ?> Projects
+	</div>
+	<div class="portfolio-grid">
+		<?php
+		foreach ($projects as $p): ?>
+			<a href="/portfolio/<?php
+			echo htmlspecialchars($p['slug']); ?>/"
+			   class="project-card<?php
+			   echo $p['live'] ? '' : ' project-card--wip'; ?>">
 
-                <div class="project-card__thumb">
-                    <span class="project-card__label">[<?php echo htmlspecialchars($p['num']); ?> / <?php echo htmlspecialchars($p['code']); ?>]</span>
-                    <?php if ($p['thumb']): ?>
-                        <img src="<?php echo htmlspecialchars($p['thumb']); ?>"
-                             alt="<?php echo htmlspecialchars($p['title']); ?>"
-                             loading="lazy">
-                    <?php endif; ?>
-                </div>
+				<div class="project-card__thumb">
+					<span class="project-card__label">[<?php
+						echo htmlspecialchars($p['num']); ?> / <?php
+						echo htmlspecialchars($p['code']); ?>]</span>
+					<?php
+					if ($p['thumb']): ?>
+						<img src="<?php
+						echo htmlspecialchars($p['thumb']); ?>"
+							 alt="<?php
+							 echo htmlspecialchars($p['title']); ?>"
+							 loading="lazy">
+					<?php
+					endif; ?>
+				</div>
 
-                <div class="project-card__body">
-                    <h3 class="project-card__title"><?php echo htmlspecialchars($p['title']); ?></h3>
-                    <p class="project-card__desc"><?php echo htmlspecialchars($p['desc']); ?></p>
-                    <div class="project-card__footer">
-                        <span class="project-card__year"><?php echo htmlspecialchars($p['year']); ?></span>
-                        <span class="project-card__arrow">→</span>
-                    </div>
-                </div>
+				<div class="project-card__body">
+					<h3 class="project-card__title"><?php
+						echo htmlspecialchars($p['title']); ?></h3>
+					<p class="project-card__desc"><?php
+						echo htmlspecialchars($p['desc']); ?></p>
+					<div class="project-card__footer">
+						<span class="project-card__year"><?php
+							echo htmlspecialchars($p['year']); ?></span>
+						<span class="project-card__arrow">→</span>
+					</div>
+				</div>
 
-            </a>
-            <?php endforeach; ?>
-        </div>
-    </section>
+			</a>
+		<?php
+		endforeach; ?>
+	</div>
+</section>
 
-    <section class="section section-cta">
-        <div class="section-label">002 — Contact</div>
-        <div class="section-content">
-            <p class="large-text">Got a project in mind?</p>
-            <a href="mailto:hello@uovidiu.com" class="btn">Get in Touch →</a>
-        </div>
-    </section>
+<section class="section section-cta">
+	<div class="section-label">002 — Contact</div>
+	<div class="section-content">
+		<p class="large-text">Got a project in mind?</p>
+		<a href="mailto:hello@uovidiu.com" class="btn">Get in Touch →</a>
+	</div>
+</section>
 
-<?php require __DIR__ . '/../includes/footer.php'; ?>
+<?php
+require __DIR__.'/../includes/footer.php'; ?>
diff --git a/portfolio/thompson/index.php b/portfolio/thompson/index.php
index 84f92a4..b870ccf 100644
--- a/portfolio/thompson/index.php
+++ b/portfolio/thompson/index.php
@@ -1,4 +1,5 @@
 <?php
+
 /*
  * CASE STUDY PAGE TEMPLATE
  * ─────────────────────────────────────────────────────────────────
@@ -10,103 +11,107 @@
  * Images: store in /img/{slug}/ — see naming convention in CLAUDE.md.
  * ─────────────────────────────────────────────────────────────────
  */
-$title       = 'Thompson Service Centre — Case Study';
+$title = 'Thompson Service Centre — Case Study';
 $description = 'How we built a trust-first digital presence for a 25-year Peterborough garage.';
-$extra_css   = '/css/portfolio.css';
-require __DIR__ . '/../../includes/header.php';
+$extra_css = '/css/portfolio.css';
+require __DIR__.'/../../includes/header.php';
 ?>
 
-    <div class="cs-breadcrumb">
-        <a href="/portfolio/" class="cs-back">← All Work</a>
-        <span class="cs-breadcrumb-label">[01 / WEB_DEV]</span>
-    </div>
+<div class="cs-breadcrumb">
+	<a href="/portfolio/" class="cs-back">← All Work</a>
+	<span class="cs-breadcrumb-label">[01 / WEB_DEV]</span>
+</div>
 
-    <header class="hero">
-        <div class="hero-label">Case Study — 01</div>
-        <h1>Thompson<br>Service Centre</h1>
-        <p class="hero-sub">Website Redesign · 2025</p>
-        <ul class="cs-meta-bar">
-            <li>HTML · Tailwind CSS v4 · GSAP</li>
-            <li>Thompson Service Centre, Peterborough</li>
-            <li>2025</li>
-        </ul>
-    </header>
+<header class="hero">
+	<div class="hero-label">Case Study — 01</div>
+	<h1>Thompson<br>Service Centre</h1>
+	<p class="hero-sub">Website Redesign · 2025</p>
+	<ul class="cs-meta-bar">
+		<li>HTML · Tailwind CSS v4 · GSAP</li>
+		<li>Thompson Service Centre, Peterborough</li>
+		<li>2025</li>
+	</ul>
+</header>
 
-    <section class="section">
-        <div class="section-label">Project Overview</div>
-        <div class="section-content">
-            <p>Thompson Service Centre needed more than a website — they needed a digital presence that matched 25 years of earned trust. We built a high-fidelity landing page that puts credibility front and centre: a bold hero section, a trust bar loaded with real credentials, and service cards that communicate competence without the usual garage-site clichés. Every element was designed to make a first-time visitor feel like they'd already found their mechanic.</p>
-        </div>
-    </section>
+<section class="section">
 
-    <section class="section">
-        <div class="section-label">Homepage</div>
-        <div class="screenshot-hero-wrap">
-            <div class="browser-chrome">
-                <div class="browser-dots">
-                    <span></span><span></span><span></span>
-                </div>
-                <span class="browser-url">thompsonservicecentre.co.uk</span>
-            </div>
-            <img
-                src="/img/thompson/hero.jpg"
-                alt="Thompson Service Centre — Homepage"
-                class="screenshot-hero"
-                loading="lazy"
-            >
-        </div>
-    </section>
+	<div class="section-label">Project Overview</div>
+	<div class="section-content">
+		<p>Thompson Service Centre needed more than a website — they needed a digital presence that matched 25 years of earned trust. We built a high-fidelity
+			landing page that puts credibility front and centre: a bold hero section, a trust bar loaded with real credentials, and service cards that
+			communicate competence without the usual garage-site clichés. Every element was designed to make a first-time visitor feel like they'd already found
+			their mechanic.</p>
+	</div>
 
-    <section class="section">
-        <div class="section-label">Booking Flow</div>
-        <div class="services-grid">
-            <div class="service-item screenshot-card">
-                <span class="service-num">Vehicle Lookup</span>
-                <div class="browser-chrome browser-chrome--sm">
-                    <div class="browser-dots">
-                        <span></span><span></span><span></span>
-                    </div>
-                    <span class="browser-url">thompsonservicecentre.co.uk/book</span>
-                </div>
-                <img
-                    src="/img/thompson/booking-lookup.jpg"
-                    alt="Vehicle registration lookup"
-                    class="screenshot-screen"
-                    loading="lazy"
-                >
-            </div>
-            <div class="service-item screenshot-card">
-                <span class="service-num">Booking Form</span>
-                <div class="browser-chrome browser-chrome--sm">
-                    <div class="browser-dots">
-                        <span></span><span></span><span></span>
-                    </div>
-                    <span class="browser-url">thompsonservicecentre.co.uk/book</span>
-                </div>
-                <img
-                    src="/img/thompson/booking-confirm.jpg"
-                    alt="Vehicle confirmed and booking form"
-                    class="screenshot-screen"
-                    loading="lazy"
-                >
-            </div>
-        </div>
-    </section>
+	<div class="screenshot-hero-wrap">
+		<div class="browser-chrome">
+			<div class="browser-dots">
+				<span></span><span></span><span></span>
+			</div>
+			<span class="browser-url">thompsonservicecentre.co.uk</span>
+		</div>
+		<img
+				src="/img/thompson/hero.jpg"
+				alt="Thompson Service Centre — Homepage"
+				class="screenshot-hero"
+				loading="lazy"
+		>
+	</div>
+</section>
 
-    <section class="section">
-        <div class="section-label">Craft & Execution</div>
-        <div class="section-content">
-            <p>Built with vanilla HTML, Tailwind CSS v4, and GSAP-powered scroll animations, the page loads fast and feels premium on every device. The design system — rooted in Workshop Navy and Safety Orange — draws from real automotive heritage rather than off-the-shelf templates. Noise overlays, layered gradients, and spring-eased micro-interactions give it a tactile warmth that sets it apart from every other garage site in the postcode.</p>
-        </div>
-    </section>
+<section class="section">
+	<div class="section-label">Booking Flow</div>
+	<div class="services-grid">
+		<div class="service-item screenshot-card">
+			<span class="service-num">Vehicle Lookup</span>
+			<div class="browser-chrome browser-chrome--sm">
+				<div class="browser-dots">
+					<span></span><span></span><span></span>
+				</div>
+				<span class="browser-url">thompsonservicecentre.co.uk/book</span>
+			</div>
+			<img
+					src="/img/thompson/booking-lookup.jpg"
+					alt="Vehicle registration lookup"
+					class="screenshot-screen"
+					loading="lazy"
+			>
+		</div>
+		<div class="service-item screenshot-card">
+			<span class="service-num">Booking Form</span>
+			<div class="browser-chrome browser-chrome--sm">
+				<div class="browser-dots">
+					<span></span><span></span><span></span>
+				</div>
+				<span class="browser-url">thompsonservicecentre.co.uk/book</span>
+			</div>
+			<img
+					src="/img/thompson/booking-confirm.jpg"
+					alt="Vehicle confirmed and booking form"
+					class="screenshot-screen"
+					loading="lazy"
+			>
+		</div>
+	</div>
+</section>
 
-    <section class="section section-cta">
-        <div class="section-label">— Next</div>
-        <div class="section-content">
-            <a href="/portfolio/" class="cs-back cs-back--lg">← Back to All Work</a>
-            <p class="large-text">Got a project in mind?</p>
-            <a href="mailto:hello@uovidiu.com" class="btn">Get in Touch →</a>
-        </div>
-    </section>
+<section class="section">
+	<div class="section-label">Craft & Execution</div>
+	<div class="section-content">
+		<p>Built with vanilla HTML, Tailwind CSS v4, and GSAP-powered scroll animations, the page loads fast and feels premium on every device. The design
+			system — rooted in Workshop Navy and Safety Orange — draws from real automotive heritage rather than off-the-shelf templates. Noise overlays,
+			layered gradients, and spring-eased micro-interactions give it a tactile warmth that sets it apart from every other garage site in the postcode.</p>
+	</div>
+</section>
 
-<?php require __DIR__ . '/../../includes/footer.php'; ?>
+<section class="section section-cta">
+	<div class="section-label">— Next</div>
+	<div class="section-content">
+		<a href="/portfolio/" class="cs-back cs-back--lg">← Back to All Work</a>
+		<p class="large-text">Got a project in mind?</p>
+		<a href="mailto:hello@uovidiu.com" class="btn">Get in Touch →</a>
+	</div>
+</section>
+
+<?php
+require __DIR__.'/../../includes/footer.php'; ?>