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

Relocates HomeHero, HomeServicesIntro, HomeBenefits, HomeSkills,
HomeInsurance, HomeEsa, and HomeDirector styles from the global
components.css into each component's own <style> block. Removes the
now-empty 480px media query and trims the 760px media query to only
global rules. Build verified at 97 pages.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

www/src/components/home/HomeBenefits.astro

@@ -4,6 +4,13 @@ import VideoCard from '../VideoCard.astro';
 interface Props { section: BenefitsSection }
 const { section } = Astro.props;
 ---
+<style>
+  .benefit-grid { grid-template-columns: 1.1fr .9fr; }
+  @media (max-width: 760px) {
+    .benefit-grid { grid-template-columns: 1fr; }
+  }
+</style>
+
 <section class="section cream-section">
   <div class="container feature-grid benefit-grid">
     <div>

www/src/components/home/HomeDirector.astro

@@ -3,6 +3,14 @@ import type { DirectorSection } from '../../types/home-sections';
 interface Props { section: DirectorSection }
 const { section } = Astro.props;
 ---
+<style>
+  .director-layout { grid-template-columns: 1fr 3.6fr; }
+  .director-card { text-align: left; }
+  .director-card img { border-radius: 3px; height: auto; margin: 0 auto; width: 100%; }
+  .director-card h3 { font-family: var(--font-body); font-size: .84rem; letter-spacing: .5px; margin-top: 1rem; }
+  .signature { max-width: 270px; }
+</style>
+
 <section class="section director-section">
   <div class="container feature-grid director-layout">
     <div class="director-card">

www/src/components/home/HomeEsa.astro

@@ -3,6 +3,14 @@ import type { EsaSection } from '../../types/home-sections';
 interface Props { section: EsaSection }
 const { section } = Astro.props;
 ---
+<style>
+  .esa-grid { grid-template-columns: 1.5fr .5fr; }
+  .esa-grid img { max-height: 170px; justify-self: center; }
+  @media (max-width: 760px) {
+    .esa-grid { grid-template-columns: 1fr; }
+  }
+</style>
+
 <section class="section cream-section">
   <div class="container feature-grid esa-grid">
     <div>

www/src/components/home/HomeHero.astro

@@ -14,3 +14,16 @@ const { section } = Astro.props;
     <img src={`/assets/images/${section.image}`} alt={section.imageAlt} loading="eager" />
   </div>
 </section>
+
+<style>
+  .home-hero { background: var(--color-tint); overflow: hidden; }
+  .home-hero-grid { align-items: end; display: grid; grid-template-columns: 1fr .9fr; min-height: 520px; padding-top: 4rem; }
+  .home-hero-grid > div { align-self: center; padding-bottom: 4rem; }
+  .home-hero-grid p:not(.script-label) { max-width: 570px; }
+  .home-hero-grid img { align-self: end; justify-self: end; max-height: 500px; object-fit: contain; }
+  @media (max-width: 760px) {
+    .home-hero-grid { grid-template-columns: 1fr; padding-top: 3rem; text-align: center; }
+    .home-hero-grid > div { padding-bottom: 1rem; }
+    .home-hero-grid img { justify-self: center; max-height: 330px; }
+  }
+</style>

www/src/components/home/HomeInsurance.astro

@@ -3,6 +3,11 @@ import type { InsuranceSection } from '../../types/home-sections';
 interface Props { section: InsuranceSection }
 const { section } = Astro.props;
 ---
+<style>
+  .insurance-section .logo-row { margin-top: 2rem; }
+  .logo-row img { filter: none; }
+</style>
+
 <section class="section insurance-section">
   <div class="container">
     <h2>{section.heading}</h2>

www/src/components/home/HomeServicesIntro.astro

@@ -3,6 +3,21 @@ import type { ServicesIntroSection } from '../../types/home-sections';
 interface Props { section: ServicesIntroSection }
 const { section } = Astro.props;
 ---
+<style>
+  .services-grid { display: grid; gap: clamp(2rem, 6vw, 5rem); }
+  .feature-grid--intro { grid-template-columns: .75fr 1.25fr; }
+  .feature-grid--reverse { grid-template-columns: 1.25fr .75fr; }
+  .gear-photo { justify-self: center; max-width: 270px; }
+  .gear-photo-right { outline-color: #dce0e5; }
+  .two-column-list { columns: 2; }
+  @media (max-width: 760px) {
+    .services-grid { gap: 2rem; }
+    .services-grid .feature-grid { grid-template-columns: 1fr; }
+    .feature-grid > .gear-photo-right { grid-row: 3; }
+    .two-column-list { columns: 1; }
+  }
+</style>
+
 <section class="section services-intro">
   <div class="container services-grid">
     <div class="feature-grid feature-grid--intro">

www/src/components/home/HomeSkills.astro

@@ -3,6 +3,22 @@ import type { SkillsSection } from '../../types/home-sections';
 interface Props { section: SkillsSection }
 const { section } = Astro.props;
 ---
+<style>
+  .skills-section { background: var(--color-primary); color: white; padding-block: 4rem; text-align: center; }
+  .skills-section h2 { color: white; }
+  .skills-grid { display: grid; gap: 1rem; grid-template-columns: repeat(3, 1fr); margin-top: 2.5rem; }
+  .skills-grid div { display: grid; gap: .75rem; justify-items: center; }
+  .skills-grid img { max-height: 12vw; max-width: 12vw; }
+  @media (max-width: 760px) {
+    .skills-grid { grid-template-columns: repeat(2, 1fr); }
+    .skills-grid img { max-height: 24vw; max-width: 24vw; }
+  }
+  @media (max-width: 480px) {
+    .skills-grid { grid-template-columns: 1fr; }
+    .skills-grid img { max-height: 32vw; max-width: 32vw; }
+  }
+</style>
+
 <section class="skills-section">
   <div class="container">
     <h2>{section.heading}</h2>