refactor(styles): move service-page rules into a dedicated pages stylesheet

- keep blog.css focused on blog/article styling only
- move the existing .service-page rules unchanged into pages.css
- import pages.css from the shared global stylesheet
- preserve the current service-page layout and responsive behavior

www/README.md

@@ -198,15 +198,6 @@ Available `Button` variants are `filled` (default), `outlined`, and `light`.
 Available sizes are `default` and `small`. A `_blank` target automatically adds
 `rel="noopener noreferrer"`.
 
-Use the optional `Link` component only when an inline link needs an explicit
-variant or target:
-
-```mdx
-import Link from '../../../components/Link.astro';
-
-<Link href="/library" variant="strong">Browse the library</Link>
-```
-
 Normal Markdown links remain preferred for ordinary page and article content.
 
 ### Front Matter CMS

www/src/components/ConsultationCTA.astro

@@ -1,11 +0,0 @@
-<section class="cta-band">
-  <div class="container split">
-    <div><p class="eyebrow">Start the conversation</p><h2>Find the right support for your learner.</h2></div>
-    <a class="button button-light" href="/client-consultation">Schedule a Free Consultation</a>
-  </div>
-</section>
-
-<style>
-  .cta-band { background: var(--color-primary); color: white; padding-block: var(--space-xl); }
-  .cta-band h2, .cta-band .eyebrow { color: white; margin: 0; }
-</style>

www/src/components/InsuranceStrip.astro

@@ -1,13 +0,0 @@
----
-const logos = ['aetna.png', 'bluecrossblueshield-logo-1.webp', 'logo-ahcccs.webp', 'logo-optum.webp', 'logo-tricare-1.webp', 'united-healthcare-logo-1.webp'];
----
-<section class="insurance-strip" aria-labelledby="insurance-title">
-  <div class="container"><h2 id="insurance-title">Insurance partners</h2><div class="logo-row">{logos.map((logo) => <img src={`/assets/images/${logo}`} alt="" loading="lazy" />)}</div></div>
-</section>
-
-<style>
-  .insurance-strip { background: white; border-block: 1px solid var(--color-border); padding-block: var(--space-lg); text-align: center; }
-  .insurance-strip h2 { font-size: 1.4rem; }
-  .logo-row { align-items: center; display: flex; flex-wrap: wrap; justify-content: space-around; }
-  .logo-row img { filter: grayscale(1); max-height: 55px; max-width: 130px; }
-</style>

www/src/components/Link.astro

@@ -1,42 +0,0 @@
----
-interface Props {
-  href: string;
-  variant?: 'default' | 'strong';
-  target?: '_blank' | '_self';
-  rel?: string;
-  class?: string;
-}
-
-const {
-  href,
-  variant = 'default',
-  target,
-  rel = target === '_blank' ? 'noopener noreferrer' : undefined,
-  class: className
-} = Astro.props;
----
-
-<a
-  class:list={['content-link', { 'content-link--strong': variant === 'strong' }, className]}
-  href={href}
-  target={target}
-  rel={rel}
->
-  <slot />
-</a>
-
-<style>
-  .content-link {
-    color: var(--color-accent-strong);
-    text-decoration: none;
-  }
-
-  .content-link:hover,
-  .content-link:focus-visible {
-    color: var(--color-accent);
-  }
-
-  .content-link--strong {
-    font-weight: 700;
-  }
-</style>

www/src/components/LocationCard.astro

@@ -1,8 +0,0 @@
----
-const { title = 'Scottsdale', address = '8901 E Raintree Dr Ste 160, Scottsdale, AZ 85260' } = Astro.props;
----
-<article class="card location-card"><h3>{title}</h3><p>{address}</p><a class="text-link" href={`https://maps.google.com/?q=${encodeURIComponent(address)}`}>Get directions</a></article>
-
-<style>
-  .location-card { padding: var(--space-lg); }
-</style>

www/src/components/PageHero.astro

@@ -13,7 +13,7 @@ const { title, subtitle, image, eyebrow, constrain = false } = Astro.props;
   <div class="container">
     <div class="page-hero__heading">
     {eyebrow
-      ? <div class="page-hero__copy"><p class="script-label">{eyebrow}</p><h1>{title}</h1>{subtitle && <h2>{subtitle}</h2>}</div>
+      ? <div class="page-hero__copy"><p class="eyebrow">{eyebrow}</p><h1>{title}</h1>{subtitle && <h2>{subtitle}</h2>}</div>
       : <><h1>{title}</h1>{subtitle && <h2>{subtitle}</h2>}</>
     }
     </div>

www/src/components/ServiceCard.astro

@@ -1,7 +0,0 @@
----
-const { title, description, href, image } = Astro.props;
----
-<article class="card service-card">
-  {image && <img src={image} alt="" loading="lazy" />}
-  <div class="card-body"><h3><a href={href}>{title}</a></h3><p>{description}</p><a class="text-link" href={href}>Learn more</a></div>
-</article>

www/src/components/home/HomeHero.astro

@@ -6,7 +6,7 @@ const { section } = Astro.props;
 <section class="home-hero">
   <div class="container home-hero-grid">
     <div>
-      <p class="script-label">{section.eyebrow}</p>
+      <p class="eyebrow">{section.eyebrow}</p>
       <h1 set:html={section.heading} />
       <p>{section.body}</p>
       <a class="button" href={section.cta.href}>{section.cta.label}</a>
@@ -19,7 +19,7 @@ const { section } = Astro.props;
   .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 p:not(.eyebrow) { 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; }

www/src/components/pages/FaqPage.astro

@@ -38,7 +38,7 @@
 
   <section class="faq-cta faq-cta-primary">
     <div class="container-narrow">
-      <p class="script-label">Still have questions?</p>
+      <p class="eyebrow">Still have questions?</p>
       <h2>Reach Out to Learn More</h2>
       <p>We hope this FAQ gives you a clear picture of how Applied Behavior Analysis (ABA) therapy at the Arizona Institute for Autism can support your child’s growth. If you have more questions or would like to <a href="/client-consultation">schedule an assessment</a>, please reach out. Our team is here to guide you and your learner every step of the way!</p>
     </div>
@@ -558,7 +558,7 @@
     padding-block: 3.5rem;
   }
 
-  .faq-cta-primary .script-label {
+  .faq-cta-primary .eyebrow {
     color: #f9b34d;
   }
 

www/src/components/pages/TeamPage.astro

@@ -40,7 +40,7 @@ const groups = [
 <article class="team-page">
   <section class="team-intro container-narrow">
     <h2>Our Clinical Team</h2>
-    <p class="script-label">Arizona Institute for Autism<br />Scottsdale, Arizona</p>
+    <p class="eyebrow">Arizona Institute for Autism<br />Scottsdale, Arizona</p>
     <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) => (
@@ -64,7 +64,7 @@ const groups = [
   ))}
   <section class="team-careers">
     <div class="container-narrow">
-      <p class="script-label">Join the AIA Team!</p>
+      <p class="eyebrow">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. For questions regarding open positions, please contact us at <a href="mailto:hr@azinstitute4autism.com">hr@azinstitute4autism.com</a>.</p>
@@ -75,7 +75,7 @@ const groups = [
 
 <style>
   .team-intro { padding-block: 4rem; text-align: center; }
-  .team-intro .script-label { font-size: 1.8rem; }
+  .team-intro .eyebrow { font-size: 1.8rem; }
   .team-group { padding-block: 2rem 4rem; text-align: center; }
   .team-group h2 { margin: 0 auto 1rem; max-width: 760px; }
   .team-group__tagline { font-size: 1.125rem; margin: 0 auto 2rem; }

www/src/styles/blog.css

@@ -9,15 +9,9 @@
 .blog-post-body blockquote p { color: var(--color-primary); margin: 0 0 1.55rem; }
 .source-page { max-width: 980px; }
 .source-page > h2:first-of-type { margin-top: 0; }
-.service-page > p > img, .service-page > img { float: right; margin: .5rem 0 1.5rem 2rem; max-height: 230px; max-width: 300px; object-fit: cover; }
-.service-page h3 { font-size: 2rem; }
-.service-page h3 + p { color: var(--color-accent-strong); font-family: var(--font-accent); font-size: 1.5rem; margin-bottom: -.8rem; }
 .blog-post-body { max-width: 960px; }
 .blog-post-body p { margin-bottom: 1.55rem; }
 .blog-post-body table { border: 1px solid #d7d9e3; border-collapse: collapse; display: table; margin: 0 0 1.4rem; width: 100%; }
 .blog-post-body td, .blog-post-body th { border: 1px solid #d7d9e3; padding: 10px; }
 .blog-post-body th { background: var(--color-primary); color: #fff; }
 .blog-post-body td { background: #fff; color: var(--color-primary); }
-@media (max-width: 700px) {
-  .service-page > p > img, .service-page > img { float: none; margin: 1.5rem 0; max-width: 100%; width: 100%; }
-}

www/src/styles/global.css

@@ -4,3 +4,4 @@
 @import './components.css';
 @import './forms.css';
 @import './blog.css';
+@import './pages.css';

www/src/styles/pages.css

@@ -0,0 +1,5 @@
+.service-page > p > img, .service-page > img { float: right; margin: .5rem 0 1.5rem 2rem; max-height: 230px; max-width: 300px; object-fit: cover; }
+.service-page h3 { font-size: 2rem; }
+@media (max-width: 700px) {
+  .service-page > p > img, .service-page > img { float: none; margin: 1.5rem 0; max-width: 100%; width: 100%; }
+}

www/src/styles/typography.css

@@ -3,18 +3,26 @@
 @font-face { font-family: Rubik; src: url('/assets/fonts/Rubik/regular.woff2') format('woff2'); font-display: swap; }
 @font-face { font-family: Rubik; src: url('/assets/fonts/Rubik/700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
 body { color: var(--color-text); font-family: var(--font-body); font-size: 16px; line-height: 1.625; }
-h1, h2, h3 { color: var(--color-primary); font-family: var(--font-heading); line-height: 1.15; text-wrap: balance; }
+h1, h2, h3, h4 { color: var(--color-primary); font-family: var(--font-heading); line-height: 1.15; text-wrap: balance; }
 .no-balance { text-wrap: auto; }
 h1 { font-size: clamp(2.5rem, 5vw, 3rem); line-height: 1.12; margin: 0 0 var(--space-md); }
 h2 { font-size: clamp(2rem, 4vw, 2.4rem); line-height: 1.25; }
-h3 { font-size: clamp(1.5rem, 3vw, 2rem); }
+h3 { font-size: clamp(1.8rem, 3.4vw, 2rem); }
+h4 { font-size: clamp(1.5rem, 3vw, 1.8rem); }
 a, a:visited { color: var(--color-accent-strong); text-decoration: none; }
 a:hover, a:active { color: var(--color-accent); }
 a.button { 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: 2rem; margin: 0; }
-.script-label + h2 { margin-top: 0; }
+
+.eyebrow {
+  margin: 0;
+  color: var(--color-accent-strong);
+  font-family: var(--font-accent);
+  font-size: 2rem;
+}
+
+.eyebrow + :is(h1, h2, h3, h4, h5, h6) {
+  margin-block-start: 0;
+}
 
 .prose :where(ul, ol) {
   margin-block: 0 1.5rem;