refactor(styles): move component-specific CSS into Astro components

- relocate header, footer, nav, hero, and page-hero styles into their owning components
- move blog index, blog post, team, video, insurance, CTA, and home-section styles out of the global sheet
- keep  focused on shared primitives such as buttons, cards, links, and list styling
- preserve existing layout and responsive behavior while reducing global CSS scope

www/src/layouts/BlogIndexLayout.astro

@@ -10,3 +10,24 @@ const canonical = `https://www.azinstitute4autism.com${languagePrefix}/library`;
   <section class="library-intro"><div class="container"><h2>Library</h2><p>{description}</p></div></section>
   <div class="container section library-layout"><slot /></div>
 </BaseLayout>
+
+<style>
+  .library-intro { background: var(--color-primary); color: white; padding-block: 3rem; }
+  .library-intro h2 { color: white; }
+  .library-layout { align-items: start; display: grid; gap: 3rem; grid-template-columns: 1fr 240px; }
+  .library-sidebar { position: sticky; top: 1rem; }
+  .library-sidebar label { display: block; font-weight: 700; margin-bottom: .4rem; }
+  .library-sidebar input { border: 1px solid var(--color-border); border-radius: 4px; font: inherit; padding: .7rem; width: 100%; }
+  .library-sidebar h2 { font-size: 1.1rem; margin-top: 2rem; }
+  .library-sidebar ul { list-style: none; padding: 0; }
+  .library-sidebar li { border-bottom: 1px solid var(--color-border); padding-block: .65rem; }
+  .library-sidebar a { color: var(--color-primary); font-size: .9rem; }
+  .blog-list { display: grid; gap: 2rem; }
+  .blog-list .blog-card { box-shadow: none; display: grid; grid-template-columns: 240px 1fr; }
+  .blog-list .blog-card > a img { aspect-ratio: 4 / 3; height: 100%; }
+  @media (max-width: 760px) {
+    .library-layout { grid-template-columns: 1fr; }
+    .library-sidebar { position: static; }
+    .blog-list .blog-card { grid-template-columns: 1fr; }
+  }
+</style>

www/src/layouts/BlogPostLayout.astro

@@ -19,3 +19,15 @@ const { entry } = Astro.props;
   </article>
   <BlogPostFooter entryId={entry.id} />
 </BaseLayout>
+
+<style>
+  .article-header { padding-block: 4.5rem 0; text-align: left; }
+  .article-header h1 { font-size: clamp(2.3rem, 5vw, 3rem); max-width: 900px; }
+  .article-byline { align-items: center; display: flex; font-size: .9rem; gap: 1rem; }
+  .article-byline img { margin-top: 0; height: 52px; width: 52px; }
+  .article-featured { height: 480px; margin: 3rem auto 0; max-width: 800px; overflow: hidden; }
+  .article-featured img { height: 100%; margin: 0; object-fit: cover; width: 100%; }
+  @media (max-width: 760px) {
+    .article-featured { height: auto; }
+  }
+</style>