/* ==========================================================================
   TYPOGRAPHY UNIFICATION
   The home page is built on style.css (Poppins, h1 46px, h2 33px, no
   negative tracking). Every other page is built on the service design,
   which shipped with Manrope headings, Inter body and an h1 that scales
   to 76px. Side by side they read as two different sites.

   This file makes the .ssp pages match the home page. It must load LAST,
   after svc-scoped.css, svc-extra.css, about.css, blog.css, ssp-sections.css
   and elementor-bridge.css, because it deliberately overrides all of them.
   ========================================================================== */

/* --- Families -----------------------------------------------------------
   Elementor's kit styles every Heading and Text Editor widget through its
   own variables, so those are repointed as well as the CSS families.
   ------------------------------------------------------------------------ */

.ssp {
  --e-global-typography-primary-font-family: "Poppins";
  --e-global-typography-primary-font-weight: 700;
  --e-global-typography-secondary-font-family: "Poppins";
  --e-global-typography-secondary-font-weight: 700;
  --e-global-typography-text-font-family: "Poppins";
  --e-global-typography-text-font-weight: 400;
  --e-global-typography-accent-font-family: "Poppins";
  --e-global-typography-accent-font-weight: 600;

  /* Match the home page's muted body colour exactly. */
  --muted: #5b6b80;

  font-family: "Poppins", system-ui, -apple-system, Arial, sans-serif;
  line-height: 1.6;
}

.ssp h1, .ssp h2, .ssp h3, .ssp h4, .ssp h5, .ssp h6,
.ssp p, .ssp li, .ssp span, .ssp small, .ssp b, .ssp strong,
.ssp a, .ssp button, .ssp input, .ssp textarea,
.ssp .elementor-heading-title,
.ssp .elementor-widget-text-editor,
.ssp .elementor-button {
  font-family: "Poppins", system-ui, -apple-system, Arial, sans-serif !important;
}

/* --- Heading scale, matching style.css ---------------------------------- */

.ssp h1, .ssp h2, .ssp h3, .ssp h4 {
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: normal;
}

.ssp h1,
.ssp .hero h1,
.ssp .ss-blog-hero h1,
.ssp .ss-article-head h1 {
  font-size: 46px;
  letter-spacing: normal;
  line-height: 1.2;
}

.ssp h2,
.ssp .creed h2,
.ssp .urgency h2,
.ssp .final-cta h2 {
  font-size: 33px;
  letter-spacing: normal;
  line-height: 1.2;
}

/* --- Eyebrow, matching style.css (no leading rule) ---------------------- */

.ssp .eyebrow {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 12px;
}
.ssp .eyebrow:before { content: none; display: none; }

/* --- Lead paragraph, matching style.css --------------------------------- */

.ssp .lead,
.ssp .hero-copy {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--muted);
}

/* --- Mobile, matching style.css ----------------------------------------- */

@media (max-width: 760px) {
  .ssp h1,
  .ssp .hero h1,
  .ssp .ss-blog-hero h1,
  .ssp .ss-article-head h1 { font-size: 34px; }
  .ssp h2,
  .ssp .creed h2,
  .ssp .urgency h2,
  .ssp .final-cta h2 { font-size: 27px; }
}

@media (max-width: 600px) {
  .ssp h1,
  .ssp .hero h1,
  .ssp .ss-blog-hero h1,
  .ssp .ss-article-head h1 { font-size: 31px; }
}

/* --- Article body keeps its reading size, but in Poppins ---------------- */

.ssp .ss-prose { font-size: 16px; line-height: 1.8; }
.ssp .ss-prose h2 { font-size: 28px; letter-spacing: normal; }
.ssp .ss-prose h3 { font-size: 21px; letter-spacing: normal; }
.ssp .ss-prose h4 { letter-spacing: normal; }