/* =============================================================
   SERVICE PAGE MOBILE — layout, spacing, and animation polish
   ============================================================= */

/* --- Service hero — better mobile scaling --- */
@media (max-width: 640px) {
  .sp-hero { padding: clamp(40px, 7vw, 64px) 0 clamp(32px, 5vw, 48px); }
  .sp-hero__title {
    font-size: clamp(40px, 11vw, 72px);
    line-height: 0.95;
    margin-bottom: 20px;
  }
  .sp-hero__lede {
    font-size: clamp(15px, 4vw, 18px);
    margin-bottom: 28px;
  }
  .sp-hero__eyebrow { font-size: 11px; }
}

/* --- Stat strip on service pages --- */
@media (max-width: 640px) {
  .sp-stats { grid-template-columns: repeat(2, 1fr) !important; }
  .sp-stats__value { font-size: clamp(20px, 5.5vw, 28px); }
  .sp-stats__cell { padding: 18px 16px; }
}

/* --- Included cards — single column on mobile --- */
@media (max-width: 640px) {
  .sp-included { grid-template-columns: 1fr !important; gap: 14px; }
  .sp-included__card { padding: 22px 18px; }
  .sp-included__title { font-size: 17px; }
  .sp-included__body { font-size: 14px; }
}

/* --- Process steps --- */
@media (max-width: 640px) {
  .sp-process { grid-template-columns: 1fr !important; gap: 16px; }
  .sp-process__step { padding: 24px 20px; }
  .sp-process__num { font-size: 32px; margin: 8px 0 10px; }
  .sp-process__title { font-size: 18px; }
  .sp-process__body { font-size: 13px; }
}

/* --- Compare table --- */
@media (max-width: 680px) {
  .sp-compare__cell { padding: 10px 14px; font-size: 13px; }
}

/* --- Plans grid --- */
@media (max-width: 640px) {
  .sp-plans { grid-template-columns: 1fr !important; gap: 16px; }
  .sp-plan { padding: 24px 20px; }
  .sp-plan__price { font-size: 32px !important; }
}

/* --- Service next nav --- */
@media (max-width: 600px) {
  .sp-next { grid-template-columns: 1fr; }
  .sp-next--right { text-align: left; }
  .sp-next a { padding: 22px 20px; }
  .sp-next__title { font-size: 18px; }
}

/* --- Photo grid on service pages --- */
@media (max-width: 780px) {
  .sp-photo-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
}

/* =============================================================
   "WHY IT MATTERS" SECTION — SiteIQ and all service pages
   Improved spacing, breathing room, visual hierarchy
   ============================================================= */

/* Give the included cards more visual weight */
.sp-included__card {
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.sp-included__card:hover {
  border-color: rgba(240,200,0,0.4);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.35);
}

/* Arrow icon — make it feel more intentional */
.sp-included__num {
  font-size: 20px;
  color: var(--im-primary);
  margin-bottom: 20px;
  display: inline-block;
  transition: transform 0.2s;
}
.sp-included__card:hover .sp-included__num { transform: translateX(4px); }

/* Title — more breathing room */
.sp-included__title {
  font-size: 20px;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
  line-height: 1.2;
}

/* Body — slightly more generous line height */
.sp-included__body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--im-fg-muted);
}

/* Force 3-col on desktop for the "Why it matters" grid */
@media (min-width: 900px) {
  .sp-included[style*="repeat(3"] {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* On tablet, 2 cols */
@media (min-width: 641px) and (max-width: 899px) {
  .sp-included { grid-template-columns: repeat(2, 1fr) !important; }
}

/* =============================================================
   STORY VIZ — better mobile aspect ratios
   ============================================================= */
@media (max-width: 640px) {
  .fx-story-viz { aspect-ratio: 3 / 4 !important; }
  .fx-meta.fx-story-viz,
  .fx-cold.fx-story-viz,
  .fx-seo.fx-story-viz,
  .fx-sat.fx-story-viz { aspect-ratio: 3 / 4 !important; }
  .fx-story-title { font-size: clamp(22px, 6.5vw, 32px); }
  .fx-story-sub { font-size: 14px; }
}

/* =============================================================
   ABOUT PAGE MOBILE
   ============================================================= */
@media (max-width: 780px) {
  .about-team-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  .about-values-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
}

/* =============================================================
   CONTACT PAGE MOBILE
   ============================================================= */
@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr !important; gap: 36px !important; }
}

/* =============================================================
   WORK PAGE MOBILE
   ============================================================= */
@media (max-width: 780px) {
  .work-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
}

/* =============================================================
   INDEX PAGE — hero button group
   ============================================================= */
@media (max-width: 540px) {
  /* Hero CTA buttons side by side → stacked */
  section .btn + .btn,
  .hero-btns .btn + .btn {
    margin-top: 0;
  }
}