feat(team): add tinted band and tagline to ABA Clinic Management section

Move the --color-tint background from Employment Opportunities to the
ABA Clinic Management group. Restructure the group template so the
section (not the inner container) carries the background, allowing it
to span full width. Add the live site's italic tagline "Applied
Behavior Analysis '(ABA) at your service'" from the source markup.

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

www/src/components/TeamPage.astro

@@ -26,6 +26,8 @@ const groups = [
   },
   {
     title: 'ABA Clinic Management',
+    tagline: 'Applied Behavior Analysis "(ABA) at your service"',
+    tinted: true,
     members: [
       ['team-mariah-marley.webp', 'Mariah Marley', 'Claims Billing'],
       ['team-eney-garcia.webp', 'Eney Garcia, BA', 'Accounts Billing'],
@@ -42,17 +44,22 @@ const groups = [
     <p>AIA's clinical team consists of experienced professionals and paraprofessionals as well as Board Certified Behavior Analysts (BCBA) and Psychologists who have diverse experience and expertise.</p>
   </section>
   {groups.map((group) => (
-    <section class="team-group container">
+    <section class:list={['team-group', { 'team-group--tinted': group.tinted }]}>
+      <div class="container">
         <h2>{group.title}</h2>
+        {group.tagline && <p class="team-group__tagline"><em>{group.tagline}</em></p>}
         <div class="team-grid">
           {group.members.map(([image, name, role]) => (
             <article class="team-member">
+              <div class="team-thumb">
                 <img src={`/assets/images/${image}`} alt={name} loading="lazy" />
+              </div>
               <h3>{name}</h3>
               <p>{role}</p>
             </article>
           ))}
         </div>
+      </div>
     </section>
   ))}
   <section class="team-careers">
@@ -60,7 +67,7 @@ const groups = [
       <p class="script-label">Join the AIA Team!</p>
       <h2>Employment Opportunities</h2>
       <p>Apply online to join the AIA team! At the Arizona Institute for Autism (AIA) we are on a mission to improve special education and strengthen communities throughout Arizona.</p>
-      <p>Our talented and passionate employees are a critical piece to the high-quality ABA therapy we provide along with our commitment to behavioral health, school solutions, and community outreach.</p>
+      <p>Our talented and passionate employees are a critical piece to the high-quality ABA therapy we provide along with our commitment to behavioral health, school solutions, and community outreach. For questions regarding open positions, please contact us at <a href="mailto:hr@azinstitute4autism.com">hr@azinstitute4autism.com</a>.</p>
       <a class="button" href="/careers">View Open Positions</a>
     </div>
   </section>
@@ -70,16 +77,18 @@ const groups = [
   .team-intro { padding-block: 4rem; text-align: center; }
   .team-intro .script-label { font-size: 1.8rem; }
   .team-group { padding-block: 2rem 4rem; text-align: center; }
-  .team-group > h2 { margin: 0 auto 2.5rem; max-width: 760px; }
+  .team-group--tinted { background: var(--color-tint); }
-  .team-grid { display: grid; gap: 2rem 1.5rem; grid-template-columns: repeat(4, minmax(0, 1fr)); justify-content: center; }
+  .team-group h2 { margin: 0 auto 1rem; max-width: 760px; }
-  .team-member img { aspect-ratio: 1 / 1.08; border: 5px solid var(--color-primary-dark); border-radius: 15px; object-fit: cover; width: 100%; }
+  .team-group__tagline { font-size: 1.125rem; margin: 0 auto 2rem; }
-  .team-member h3 { font-size: 1.1rem; margin-bottom: .25rem; }
+  .team-grid { display: flex; flex-wrap: wrap; gap: 2rem 1.5rem; justify-content: center; }
-  .team-member p { margin: 0; }
+  .team-member { flex: 0 0 227px; }
-  .team-careers { background: var(--color-tint); padding-block: 5rem; text-align: center; }
+  .team-thumb { border-radius: 4px; overflow: hidden; }
+  .team-thumb img { display: block; object-fit: cover; transform: scale(1.1); transition: transform .5s; width: 100%; }
+  .team-thumb img:hover { transform: scale(1.05); }
+  .team-member h3 { font-family: var(--font-body); font-size: .8rem; margin-bottom: 0; }
+  .team-member p { font-size: .85rem; margin: 0; }
+  .team-careers { padding-block: 5rem; }
   @media (max-width: 950px) {
-    .team-grid { grid-template-columns: 1fr; }
+    .team-member { flex-basis: min(100%, 227px); }
-  }
-  @media (min-width: 761px) and (max-width: 1050px) {
-    .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
   }
 </style>

www/src/components/home/HomeInsurance.astro

@@ -7,15 +7,43 @@ const { section } = Astro.props;
   .insurance-section .logo-row {
     align-items: center;
     display: flex;
-    flex-wrap: wrap;
+    flex-direction: column;
-    gap: var(--space-lg);
     justify-content: space-between;
     margin-top: 2rem;
   }
 
   .insurance-section .logo-row img {
-    max-height: 55px;
+    flex: 0 1 auto;
-    max-width: 130px;
+    max-width: 200px;
+  }
+
+  @media (min-width: 640px) {
+    .insurance-section .logo-row {
+      display: grid;
+      gap: var(--space-lg);
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+      align-items: center;
+      justify-items: center;
+    }
+
+    .insurance-section .logo-row img {
+      flex: 0 1 auto;
+      max-width: 25vw;
+    }
+  }
+
+  @media (min-width: 1024px) {
+    .insurance-section .logo-row {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: nowrap;
+    }
+
+    .insurance-section .logo-row img {
+      flex-basis: 0;
+      flex-grow: 1;
+      max-width: 120px;
+    }
   }
 </style>
 

www/src/styles/typography.css

@@ -11,7 +11,8 @@ h3 { font-size: 1.5rem; }
 a { color: var(--color-primary); }
 .eyebrow { color: var(--color-secondary); font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
 .lede, .hero-copy { color: var(--color-muted); font-size: 1.25rem; }
-.script-label { color: var(--color-accent-strong); font-family: var(--font-accent); font-size: 1.5rem; margin: 0 0 .5rem; }
+.script-label { color: var(--color-accent-strong); font-family: var(--font-accent); font-size: 2rem; margin: 0; }
+.script-label + h2 { margin-top: 0; }
 
 .prose :where(ul, ol) {
   margin-block: 0 1.5rem;