/* ============================================================
   /expertise/website-design-development/, page-local styles.
   Loaded after css/main.css; additions only, no overrides of
   global components.
   ============================================================ */

/* CTA row under the H1 + answer block */
.page-header__ctas {
  display:flex; align-items:center; gap:var(--s-6); flex-wrap:wrap;
  margin-top:var(--s-7);
}

/* What's included, intro + pairing line around the reused .outcomes__list */
.scope h2 { max-width:20ch; }
.scope__intro { max-width:var(--text-max); color:var(--muted); margin-top:var(--s-5); margin-bottom:var(--s-6); }
.scope__pairing { max-width:var(--text-max-body); color:var(--muted); margin-top:var(--s-7); }

/* Standards note, signal hairline, pull-quote geometry without quote styling */
.standards-note { border-left:1px solid var(--gold-500); padding-left:var(--s-5); margin-top:var(--s-7); max-width:var(--text-max-body); }
.standards-note p { color:var(--muted); }
.standards-note p:first-child { color:var(--ink); margin-bottom:var(--s-2); }

/* Featured work rows: grid, not .work__rows. That class becomes a
   swipe carousel on mobile and expects the homepage dot markup */
.featured h2 { max-width:18ch; }
.featured__intro { max-width:var(--text-max); color:var(--muted); margin-top:var(--s-5); }
.featured__rows { display:grid; gap:var(--s-9); margin:var(--s-8) 0; }

/* Further reading rows */
.reading h2 { margin-bottom:var(--s-3); }
.reading__intro { max-width:var(--text-max); color:var(--muted); }
.reading__list { max-width:var(--text-max); margin-top:var(--s-6); }
.reading__list li { border-top:1px solid var(--border-light); padding:var(--s-5) 0; }
.reading__list li:last-child { border-bottom:1px solid var(--border-light); }
.reading__kicker { display:block; text-transform:uppercase; color:var(--muted); margin-bottom:var(--s-2); }
.reading__title { font-size:var(--fs-body-lg); font-weight:600; }
.reading__note { display:block; margin-top:var(--s-2); }

/* FAQ section heading spacing (matches .bm-faq h2 on /brandmee/) */
.faq-section h2 { margin-bottom:var(--s-5); }