/* Phone fit (2026-10-16). Loaded last on every page, phones only.
   Desktop and the locked hero type sizes are untouched.
   - Heroes size to their content instead of a full empty screen.
   - Section and wrapper padding drops from 80px to 56px top and bottom.
   - Cards get tighter inner padding so text has more width.
   Inline style="padding-top:0" on a section still wins (no !important). */
@media (max-width: 600px) {
  body .hero { min-height: 0; }
  body .hero .hero-content { padding-top: 104px; padding-bottom: 44px; }
  body .tool-hero { padding-top: 112px; }

  body section.section,
  body .case-studies-section,
  body .cta-section,
  body .showcase-section { padding-top: 56px; padding-bottom: 56px; }

  body .areas-inner,
  body .contact-meeting-inner,
  body .different-inner,
  body .faq-inner,
  body .form-inner,
  body .included-inner,
  body .retainer-inner,
  body .roi-inner,
  body .svc-block,
  body .usp-inner { padding-top: 56px; padding-bottom: 56px; }
  body .cta-inner { padding-top: 64px; padding-bottom: 64px; }
  body .back-link { padding-top: 32px; padding-bottom: 48px; }

  body .contact-step,
  body .cs-livelink-inner,
  body .local-case,
  body .price-card,
  body .proof-card,
  body .quiz-card,
  body .roi-result-card { padding: 24px 20px; }
  body .cta { padding: 28px 20px; }
  body .service-card { padding: 28px 22px; }
  body .service-num { font-size: 32px; margin-bottom: 12px; }
  body .fix-card,
  body .offer-card { padding: 24px 20px; }

  /* "How it works" steps (home, about, contact, get-started): number on the left,
     text on the right, instead of a huge centred number per step. */
  body .process-grid { gap: 0; }
  body .process-grid::before { display: none; }
  body .process-step { display: grid; grid-template-columns: 52px 1fr; column-gap: 14px; align-items: start; text-align: left; padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
  body .process-step:last-child { border-bottom: 0; }
  body .process-num { grid-row: 1 / span 2; font-size: 36px; margin: 0; }
  body .process-dot { display: none; }
  body .process-title { grid-column: 2; margin: 2px 0 6px; }
  body .process-desc { grid-column: 2; font-size: 14px; }

  /* Home page proof numbers: three short stats sit side by side, not one per row. */
  body .proof-bar { flex-wrap: nowrap; gap: 8px; }
  body .proof-stat { flex: 1 1 0; min-width: 0; padding: 16px 8px; }
  body .proof-stat-value { font-size: 24px; }
  body .proof-stat-label { font-size: 12px; }
}

/* Footer link row: wrap onto a second line on narrow screens (added 2026-10-21 with the Facebook and Instagram links) */
.footer-links { flex-wrap: wrap; row-gap: 12px; }

/* Section headings in sentence case; the hero h1 stays in capitals (S, 2026-11-09: calmer as you scroll) */
h2, .section-headline, .cta-headline { text-transform: none !important; }

/* WhatsApp "Speak to Scott" in the header, phone and tablet only (S, 2026-11-09) */
.nav-wa { display: none; }
@media (max-width: 960px) {
  .nav-wa { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; margin-right: 14px; padding: 8px 12px; border: 1px solid rgba(29,158,117,0.6); border-radius: 999px; color: #fff; font-family: var(--outfit, sans-serif); font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; }
  .nav-wa svg { color: #25D366; flex: none; }
}
@media (max-width: 360px) { .nav-wa span { display: none; } .nav-wa { padding: 8px; } }