diff --git a/src/components/Projects.tsx b/src/components/Projects.tsx
index 5ffc511..bdd1a84 100755
--- a/src/components/Projects.tsx
+++ b/src/components/Projects.tsx
@@ -6,21 +6,20 @@ import ScrollReveal from "./ScrollReveal";
 
 export default function Projects() {
   return (
-    <section id="projects" className="py-28 md:py-36 bg-surface">
+    <section id="projects" aria-label="Selected projects" className="py-24 md:py-32 bg-surface">
       <div className="max-w-6xl mx-auto px-6">
         {/* Section header */}
         <ScrollReveal>
           <div className="flex flex-col md:flex-row md:items-end md:justify-between mb-16">
             <div>
-              <div className="w-10 h-px bg-accent mb-6" />
-              <p className="font-mono text-[10px] tracking-[0.3em] uppercase text-accent mb-4">
+              <p className="font-mono text-xs tracking-[0.25em] uppercase text-accent mb-4">
                 Projects
               </p>
               <h2 className="text-3xl md:text-4xl font-semibold text-primary leading-tight">
                 Selected work.
               </h2>
             </div>
-            <p className="text-muted mt-4 md:mt-0 max-w-md text-[15px] leading-relaxed">
+            <p className="text-muted mt-4 md:mt-0 max-w-md">
               Broadcast facility design and systems integration for enterprise,
               sports, aerospace, and financial services clients.
             </p>
@@ -28,16 +27,14 @@ export default function Projects() {
         </ScrollReveal>
 
         {/* Project grid */}
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
           {projects.map((project, index) => (
-            <ScrollReveal
-              key={project.slug}
-              delay={index * 60}
-              className={index === 0 ? "md:col-span-2" : ""}
-            >
+            <ScrollReveal key={project.slug} delay={index * 80}>
               <Link
                 href={`/projects/${project.slug}`}
-                className="group relative block bg-white rounded-xl overflow-hidden border border-neutral-200/80 hover:border-accent/20 hover:shadow-xl hover:shadow-neutral-200/60 transition-all duration-400"
+                className={`group relative block bg-white rounded-lg overflow-hidden border border-neutral-200 hover:border-accent/30 hover:shadow-lg transition-all duration-300 ${
+                  index === 0 ? "md:col-span-2" : ""
+                }`}
               >
                 {/* Thumbnail image */}
                 <div
@@ -47,43 +44,40 @@ export default function Projects() {
                 >
                   <Image
                     src={project.thumbnail}
-                    alt={project.title}
+                    alt={`${project.client} — ${project.category} broadcast facility`}
                     fill
-                    className="object-cover group-hover:scale-[1.03] transition-transform duration-700 ease-out"
+                    className="object-cover group-hover:scale-105 transition-transform duration-500"
                     sizes={index === 0 ? "100vw" : "50vw"}
                   />
-                  {/* Gradient overlay */}
-                  <div className="absolute inset-0 bg-gradient-to-t from-black/50 via-black/10 to-transparent" />
-                  {/* Hover tint */}
-                  <div className="absolute inset-0 bg-accent/0 group-hover:bg-accent/10 transition-colors duration-400" />
-
-                  {/* Category badge on image */}
-                  <div className="absolute top-4 left-4">
-                    <span className="px-3 py-1.5 text-[10px] font-mono tracking-wider uppercase bg-black/50 backdrop-blur-sm text-white/90 rounded-md">
-                      {project.category}
-                    </span>
-                  </div>
+                  {/* Dark overlay for readability */}
+                  <div className="absolute inset-0 bg-gradient-to-t from-black/40 via-transparent to-transparent" />
+                  {/* Hover overlay */}
+                  <div className="absolute inset-0 bg-accent/0 group-hover:bg-accent/10 transition-colors duration-300" />
                 </div>
 
                 {/* Content */}
-                <div className="p-6 md:p-7">
-                  <div className="flex items-center gap-2 mb-3">
-                    <span className="font-mono text-[11px] text-muted">
+                <div className="p-6 md:p-8">
+                  <div className="flex items-center gap-3 mb-3">
+                    <span className="font-mono text-xs tracking-wider uppercase text-accent">
+                      {project.category}
+                    </span>
+                    <span className="text-neutral-300">|</span>
+                    <span className="font-mono text-xs text-muted">
                       {project.year}
                     </span>
                   </div>
 
-                  <h3 className="text-lg md:text-xl font-semibold text-primary mb-2.5 group-hover:text-accent transition-colors duration-300">
+                  <h3 className="text-xl md:text-2xl font-semibold text-primary mb-3 group-hover:text-accent transition-colors">
                     {project.client}
                   </h3>
 
-                  <p className="text-[13.5px] text-muted leading-relaxed mb-4 line-clamp-2">
+                  <p className="text-muted leading-relaxed mb-4 line-clamp-2">
                     {project.summary}
                   </p>
 
-                  <div className="flex items-center text-[13px] font-medium text-accent translate-x-0 group-hover:translate-x-1 transition-transform duration-300">
+                  <div className="flex items-center text-sm font-medium text-accent opacity-0 group-hover:opacity-100 transition-opacity">
                     View Case Study
-                    <ArrowRight size={14} className="ml-1.5" />
+                    <ArrowRight size={16} className="ml-2" />
                   </div>
                 </div>
               </Link>