/* ==========================================================
   SEO SERVICE PAGE  -  additions
   Styles for the logos, icons and founder photo added on top
   of the supplied design. Loaded after svc-scoped.css.
   ========================================================== */

.ssp .ss-ico, .ssp .ss-logo { display: block; }

/* Brand logos keep their own colours; line icons take the
   colour of whatever box they sit in. */
.ssp .logo-dot .ss-logo,
.ssp .logo-dot .ss-ico { width: 19px; height: 19px; }

.ssp .platform-icon .ss-logo,
.ssp .platform-icon .ss-ico { width: 24px; height: 24px; }

.ssp .platform-icon { background: #fff; border: 1px solid var(--line); }

.ssp .service-num .ss-ico { width: 24px; height: 24px; }
.ssp .industry .icon .ss-ico { width: 20px; height: 20px; }
.ssp .why .icon .ss-ico { width: 22px; height: 22px; }

/* WHAT WE OPTIMIZE  -  icon added above each metric */
.ssp .metric { gap: 12px; }
.ssp .metric-icon {
  width: 38px; height: 38px; border-radius: 11px;
  background: #FFF7ED; color: var(--orange);
  display: grid; place-items: center; flex: 0 0 auto;
}
.ssp .metric-icon .ss-ico { width: 20px; height: 20px; }

/* OUR SEO PROCESS  -  icon added above the step number */
.ssp .process-icon {
  width: 46px; height: 46px; border-radius: 14px;
  background: #FFF7ED; color: var(--orange);
  display: grid; place-items: center; margin-bottom: 16px;
}
.ssp .process-icon .ss-ico { width: 24px; height: 24px; }
.ssp .process-no { font-size: 32px; line-height: 1; }
.ssp .process-card h3 { margin-top: 10px; }

/* ABOUT  -  founder photo replaces the placeholder block */
.ssp .about-photo { place-items: end center; padding: 0 0 0 0; }
.ssp .about-img {
  width: 82%; max-height: 90%; height: auto;
  object-fit: contain; object-position: bottom;
  align-self: end; display: block;
  border-radius: 20px 20px 0 0;
}

@media (max-width: 860px) {
  .ssp .about-photo { min-height: 380px; }
  .ssp .about-img { width: 70%; }
}

/* ==========================================================
   Elementor kit defaults, corrected for THIS page.
   elementor-bridge.css points the kit's typography variables at
   Poppins for the home design. Inside .ssp the design is
   Manrope + Inter, so the variables are redeclared here.
   ========================================================== */
.ssp {
  --e-global-typography-primary-font-family: "Manrope";
  --e-global-typography-primary-font-weight: 700;
  --e-global-typography-secondary-font-family: "Manrope";
  --e-global-typography-secondary-font-weight: 700;
  --e-global-typography-text-font-family: "Inter";
  --e-global-typography-text-font-weight: 400;
  --e-global-typography-accent-font-family: "Inter";
  --e-global-typography-accent-font-weight: 600;
}

/* The bridge sets heading colour to inherit so dark sections tint
   their own headings. That works here too (.dark-card, .case and
   .final-cta all set color:#fff on the section), but it leaves the
   default heading colour as --text rather than --navy. Re-assert it
   above the bridge's specificity, then hand the dark blocks back. */
.ss-page .ssp .elementor-widget-heading .elementor-heading-title { color: var(--navy); }
.ss-page .ssp .dark-card .elementor-heading-title,
.ss-page .ssp .case .elementor-heading-title,
.ss-page .ssp .final-cta .elementor-heading-title,
.ss-page .ssp .resource:first-child .elementor-heading-title,
.ss-page .ssp .urgency .elementor-heading-title { color: #fff; }

/* ==========================================================
   URGENCY / MARKET-SHIFT BAND
   Dark section used on the service pages to carry the
   "cost of waiting" framing next to the business stats.
   ========================================================== */
.ssp .urgency { background: var(--navy); color: #fff; }
.ssp .urgency h2 { color: #fff; }
.ssp .urgency .lead { color: #CBD5E1; }
.ssp .urgency .eyebrow { color: var(--orange); }

.ssp .urgency-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 45px;
  text-align: left;
}

.ssp .urgency-card {
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: 28px 24px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.ssp .urgency-icon {
  width: 46px; height: 46px;
  border-radius: 14px;
  background: rgba(249, 115, 22, 0.16);
  color: var(--orange);
  display: grid; place-items: center;
}
.ssp .urgency-icon .ss-ico { width: 24px; height: 24px; }

.ssp .urgency-card strong {
  font-family: Manrope, Inter, sans-serif;
  font-size: 22px;
  line-height: 1.2;
  color: var(--orange);
}

.ssp .urgency-card span {
  font-size: 13.5px;
  line-height: 1.65;
  color: #CBD5E1;
}

.ssp .urgency-note {
  max-width: 780px;
  margin: 32px auto 0;
  font-size: 12px;
  line-height: 1.7;
  color: #8496ae;
}

@media (max-width: 980px) { .ssp .urgency-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ssp .urgency-grid { grid-template-columns: 1fr; } }