diff --git a/src/pages/about/about.css b/src/pages/about/about.css
index 5de5cfc..567390b 100644
--- a/src/pages/about/about.css
+++ b/src/pages/about/about.css
@@ -1,34 +1,7 @@
-.page {
-  margin: 0 auto;
-  padding: 1rem 1.25rem 4rem;
-}
-
-.section {
-  margin-bottom: 3rem;
-  scroll-margin-top: 5.5rem;
-}
-
 .hero {
-  padding: 2.5rem;
-  border: 1px solid rgba(110, 118, 129, 0.28);
-  border-radius: 24px;
   background: radial-gradient(circle at top right, rgba(88, 166, 255, 0.16), rgba(13, 17, 23, 0.9));
 }
 
-.eyebrow {
-  width: fit-content;
-  margin: 0 0 1rem;
-  padding: 0.35rem 0.7rem;
-  line-height: 1;
-  border: 1px solid rgba(88, 166, 255, 0.5);
-  border-radius: 999px;
-  color: #9ecbff;
-  font-size: 0.82rem;
-  font-weight: 600;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-}
-
 h1,
 h2,
 h3,
@@ -37,38 +10,12 @@ ul {
   margin: 0;
 }
 
-h1 {
-  font-size: clamp(2rem, 5vw, 3.2rem);
-  line-height: 1.1;
-}
-
-.lede {
-  max-width: 65ch;
-  margin-top: 1rem;
-  color: #c9d1d9;
-}
-
-.section-title-row {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  gap: 1rem;
-  align-items: baseline;
-  margin-bottom: 1rem;
-}
-
 .section-title-row p,
 .card p,
 .story li {
   color: #b6bec8;
 }
 
-.card-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-  gap: 1rem;
-}
-
 /* base .card container styles moved to src/components/card/card.css */
 
 .card h3 {
@@ -113,13 +60,6 @@ h1 {
 }
 
 @media (max-width: 760px) {
-  .page {
-    padding-top: 0.5rem;
-  }
-
-  .hero {
-    padding: 2rem 1.2rem;
-  }
 
   .timeline-item {
     grid-template-columns: 1fr;
diff --git a/src/pages/about/about.html b/src/pages/about/about.html
index 96ec591..6348788 100644
--- a/src/pages/about/about.html
+++ b/src/pages/about/about.html
@@ -1,19 +1,19 @@
-<div class="page">
-  <section class="hero section">
+<div class="page page-shell">
+  <section class="hero section section-base hero-panel">
     <p class="eyebrow">About</p>
-    <h1>Fullstack developer crafting modern web, backend, and mobile products.</h1>
-    <p class="lede">
+    <h1 class="hero-title">Fullstack developer crafting modern web, backend, and mobile products.</h1>
+    <p class="lede hero-lede">
       I am Tim Kainz, and I enjoy building software that feels clean, fast, and reliable from
       the first screen to the last API call.
     </p>
   </section>
 
-  <section class="section">
-    <div class="section-title-row">
+  <section class="section section-base">
+    <div class="section-title-row section-title-shared">
       <h2>What I bring</h2>
       <p>Core strengths across the stack.</p>
     </div>
-    <div class="card-grid">
+    <div class="card-grid card-grid-shared">
       @for (pillar of pillars; track pillar.title) {
       <app-card>
         <h3>{{ pillar.title }}</h3>
@@ -23,7 +23,7 @@
     </div>
   </section>
 
-  <section class="section story">
+  <section class="section section-base story">
     <app-card>
       <h2>How I work</h2>
       <ul>
@@ -34,8 +34,8 @@
     </app-card>
   </section>
 
-  <section class="section" id="experience">
-    <div class="section-title-row">
+  <section class="section section-base section-anchor" id="experience">
+    <div class="section-title-row section-title-shared">
       <h2>Experience</h2>
       <p>Hands-on delivery in backend systems and product architecture.</p>
     </div>
diff --git a/src/pages/contact/contact.css b/src/pages/contact/contact.css
index cff8af7..db89128 100644
--- a/src/pages/contact/contact.css
+++ b/src/pages/contact/contact.css
@@ -1,56 +1,13 @@
-.page {
-  margin: 0 auto;
-  padding: 1rem 1.25rem 4rem;
-}
-
-.section {
-  margin-bottom: 3rem;
-}
-
 .hero {
-  padding: 2.5rem;
-  border: 1px solid rgba(110, 118, 129, 0.28);
-  border-radius: 24px;
   background: radial-gradient(circle at top right, rgba(47, 129, 247, 0.18), rgba(13, 17, 23, 0.9));
 }
 
-.eyebrow {
-  width: fit-content;
-  margin: 0 0 1rem;
-  padding: 0.35rem 0.7rem;
-  line-height: 1;
-  border: 1px solid rgba(88, 166, 255, 0.5);
-  border-radius: 999px;
-  color: #9ecbff;
-  font-size: 0.82rem;
-  font-weight: 600;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-}
-
 h1,
 h2,
 p {
   margin: 0;
 }
 
-h1 {
-  font-size: clamp(2rem, 5vw, 3.2rem);
-  line-height: 1.1;
-}
-
-.lede {
-  max-width: 65ch;
-  margin-top: 1rem;
-  color: #c9d1d9;
-}
-
-.card-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-  gap: 1rem;
-}
-
 /* base .card container styles moved to src/components/card/card.css */
 
 .contact-card .label {
@@ -124,12 +81,4 @@ h1 {
   margin-left: auto;
 }
 
-@media (max-width: 760px) {
-  .page {
-    padding-top: 0.5rem;
-  }
 
-  .hero {
-    padding: 2rem 1.2rem;
-  }
-}
diff --git a/src/pages/contact/contact.html b/src/pages/contact/contact.html
index 4b76327..574f041 100644
--- a/src/pages/contact/contact.html
+++ b/src/pages/contact/contact.html
@@ -1,15 +1,15 @@
-<div class="page">
-  <section class="hero section">
+<div class="page page-shell">
+  <section class="hero section section-base hero-panel">
     <p class="eyebrow">Contact</p>
-    <h1>Let’s build something polished, useful, and fast.</h1>
-    <p class="lede">
+    <h1 class="hero-title">Let’s build something polished, useful, and fast.</h1>
+    <p class="lede hero-lede">
       If you have a product idea, an open role, or an app that needs a reliable fullstack hand,
       I’d be happy to talk.
     </p>
   </section>
 
-  <section class="section">
-    <div class="card-grid">
+  <section class="section section-base">
+    <div class="card-grid card-grid-shared">
       @for (channel of channels; track channel.label) {
       <app-card cardClass="contact-card">
         <p class="label">{{ channel.label }}</p>
@@ -28,7 +28,7 @@
     </div>
   </section>
 
-  <section class="section note">
+  <section class="section section-base note">
     <app-card>
       <h2>Preferred first step</h2>
       <p>
diff --git a/src/pages/projects/project-detail/project-detail.css b/src/pages/projects/project-detail/project-detail.css
index 8e5bf83..fed2ead 100644
--- a/src/pages/projects/project-detail/project-detail.css
+++ b/src/pages/projects/project-detail/project-detail.css
@@ -1,33 +1,7 @@
-.page-wrap {
-  margin: 0 auto;
-  padding: 1rem 1.25rem 4rem;
-}
-
-.section {
-  margin-bottom: 3rem;
-}
-
 .hero {
-  padding: 2.5rem;
-  border: 1px solid rgba(110, 118, 129, 0.28);
-  border-radius: 24px;
   background: radial-gradient(circle at top right, rgba(88, 166, 255, 0.2), rgba(13, 17, 23, 0.85));
 }
 
-.eyebrow {
-  width: fit-content;
-  margin: 0 0 1rem;
-  padding: 0.35rem 0.7rem;
-  line-height: 1;
-  border: 1px solid rgba(88, 166, 255, 0.5);
-  border-radius: 999px;
-  color: #9ecbff;
-  font-size: 0.82rem;
-  font-weight: 600;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-}
-
 h1,
 h2,
 p,
@@ -35,17 +9,6 @@ ul {
   margin: 0;
 }
 
-h1 {
-  font-size: clamp(2rem, 5vw, 3.2rem);
-  line-height: 1.1;
-}
-
-.lede {
-  max-width: 70ch;
-  margin-top: 1rem;
-  color: #c9d1d9;
-}
-
 .hero-actions {
   display: flex;
   flex-wrap: wrap;
@@ -91,13 +54,5 @@ li + li {
   margin-top: 0.45rem;
 }
 
-@media (max-width: 760px) {
-  .page-wrap {
-    padding-top: 0.5rem;
-  }
 
-  .hero {
-    padding: 2rem 1.2rem;
-  }
-}
 
diff --git a/src/pages/projects/project-detail/project-detail.html b/src/pages/projects/project-detail/project-detail.html
index 024620f..450cb7b 100644
--- a/src/pages/projects/project-detail/project-detail.html
+++ b/src/pages/projects/project-detail/project-detail.html
@@ -1,15 +1,15 @@
-<div class="page-wrap">
+<div class="page-wrap page-shell">
   @if (project; as project) {
-  <section class="hero section">
+  <section class="hero section section-base hero-panel">
     <p class="eyebrow">Project</p>
-    <h1>{{ project.title }}</h1>
-    <p class="lede">{{ project.overview }}</p>
+    <h1 class="hero-title">{{ project.title }}</h1>
+    <p class="lede hero-lede">{{ project.overview }}</p>
     <div class="hero-actions">
       <a class="btn btn-ghost" routerLink="/projects">Back to projects</a>
     </div>
   </section>
 
-  <section class="section">
+  <section class="section section-base">
     <div class="detail-grid">
       <app-card>
         <h2>Stack</h2>
@@ -23,7 +23,7 @@
     </div>
   </section>
 
-  <section class="section">
+  <section class="section section-base">
     <app-card>
       <h2>Highlights</h2>
       <ul>
@@ -34,10 +34,10 @@
     </app-card>
   </section>
   } @else {
-  <section class="hero section">
+  <section class="hero section section-base hero-panel">
     <p class="eyebrow">Project</p>
-    <h1>Project not found</h1>
-    <p class="lede">The requested project does not exist. Please pick one from the projects page.</p>
+    <h1 class="hero-title">Project not found</h1>
+    <p class="lede hero-lede">The requested project does not exist. Please pick one from the projects page.</p>
     <a class="btn btn-ghost" routerLink="/projects">Back to projects</a>
   </section>
   }
diff --git a/src/pages/projects/projects.css b/src/pages/projects/projects.css
index 2d91657..cdda65c 100644
--- a/src/pages/projects/projects.css
+++ b/src/pages/projects/projects.css
@@ -1,54 +1,14 @@
-.page-wrap {
-  margin: 0 auto;
-  padding: 1rem 1.25rem 4rem;
-}
-
-.section {
-  margin-bottom: 3rem;
-}
-
 .hero {
-  padding: 2.5rem;
-  border: 1px solid rgba(110, 118, 129, 0.28);
-  border-radius: 24px;
   background: radial-gradient(circle at top right, rgba(88, 166, 255, 0.2), rgba(13, 17, 23, 0.85));
 }
 
-.eyebrow {
-  width: fit-content;
-  margin: 0 0 1rem;
-  padding: 0.35rem 0.7rem;
-  line-height: 1;
-  border: 1px solid rgba(88, 166, 255, 0.5);
-  border-radius: 999px;
-  color: #9ecbff;
-  font-size: 0.82rem;
-  font-weight: 600;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-}
-
 h1,
 h2,
 p {
   margin: 0;
 }
-
-h1 {
-  font-size: clamp(2rem, 5vw, 3.2rem);
-  line-height: 1.1;
-}
-
-.lede {
-  max-width: 65ch;
-  margin-top: 1rem;
-  color: #c9d1d9;
-}
-
-.card-grid {
-  display: grid;
+.projects-grid {
   grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
-  gap: 1rem;
 }
 
 .project-link {
@@ -87,13 +47,5 @@ h1 {
   font-weight: 500;
 }
 
-@media (max-width: 760px) {
-  .page-wrap {
-    padding-top: 0.5rem;
-  }
 
-  .hero {
-    padding: 2rem 1.2rem;
-  }
-}
 
diff --git a/src/pages/projects/projects.html b/src/pages/projects/projects.html
index 8029e81..1d9c0f9 100644
--- a/src/pages/projects/projects.html
+++ b/src/pages/projects/projects.html
@@ -1,15 +1,15 @@
-<div class="page-wrap">
-  <section class="hero section">
+<div class="page-wrap page-shell">
+  <section class="hero section section-base hero-panel">
     <p class="eyebrow">Projects</p>
-    <h1>Featured work across web, backend, and mobile.</h1>
-    <p class="lede">
+    <h1 class="hero-title">Featured work across web, backend, and mobile.</h1>
+    <p class="lede hero-lede">
       A selection of projects that demonstrate my skills in building production-ready software
       solutions across various platforms and technologies.
     </p>
   </section>
 
-  <section class="section">
-    <div class="card-grid projects-grid">
+  <section class="section section-base">
+    <div class="card-grid card-grid-shared projects-grid">
       @for (project of projects; track project.slug) {
       <a class="project-link" [routerLink]="['/projects', project.slug]">
         <app-card cardClass="project-card">
diff --git a/src/styles.css b/src/styles.css
index 4c8349a..e6a1ecf 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -16,10 +16,80 @@ body {
   line-height: 1.6;
 }
 
+.page-shell {
+  margin: 0 auto;
+  padding: 1rem 1.25rem 4rem;
+}
+
+.section-base {
+  margin-bottom: 3rem;
+}
+
+.section-anchor {
+  scroll-margin-top: 5.5rem;
+}
+
+.hero-panel {
+  padding: 2.5rem;
+  border: 1px solid rgba(110, 118, 129, 0.28);
+  border-radius: 24px;
+}
+
+.eyebrow {
+  width: fit-content;
+  margin: 0 0 1rem;
+  padding: 0.35rem 0.7rem;
+  line-height: 1;
+  border: 1px solid rgba(88, 166, 255, 0.5);
+  border-radius: 999px;
+  color: #9ecbff;
+  font-size: 0.82rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.hero-title {
+  margin: 0;
+  font-size: clamp(2rem, 5vw, 3.2rem);
+  line-height: 1.1;
+}
+
+.hero-lede {
+  max-width: 65ch;
+  margin-top: 1rem;
+  color: #c9d1d9;
+}
+
+.section-title-shared {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  gap: 1rem;
+  align-items: baseline;
+  margin-bottom: 1rem;
+}
+
+.card-grid-shared {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 1rem;
+}
+
 a {
   color: inherit;
 }
 
+@media (max-width: 760px) {
+  .page-shell {
+    padding-top: 0.5rem;
+  }
+
+  .hero-panel {
+    padding: 2rem 1.2rem;
+  }
+}
+
 @media (hover: hover) and (pointer: fine) {
   html,
   body,