/* ============================================
   RESPONSIVE — mobile-first polish
   ============================================ */

@media (max-width: 1024px) {
    .services-grid { grid-template-columns: repeat(2, 1fr); }
    .pricing-grid { grid-template-columns: repeat(2, 1fr); }
    .process-timeline, .process-timeline-5 { grid-template-columns: repeat(2, 1fr); gap: 32px; }
    .process-timeline-connected::before { display: none; }
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .outcomes-stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
    .desktop-nav, .header-cta { display: none; }
    .mobile-menu-toggle { display: flex; }
    .mobile-nav { display: block; }
    .sticky-mobile-cta { display: block; }
    .hero-grid { grid-template-columns: 1fr; gap: 36px; }
    .hero-content { order: 1; }
    .hero-visual { order: 2; max-width: 460px; margin: 0 auto; width: 100%; }
    .contact-layout { grid-template-columns: 1fr; gap: 32px; }
    .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 36px; }
    .footer-cta-inner { grid-template-columns: 1fr; text-align: center; gap: var(--space-md); }
    .footer-cta-text .eyebrow, .footer-cta-text p { margin-left: auto; margin-right: auto; }
}

@media (max-width: 768px) {
    body { font-size: 16px; }
    .section { padding: 56px 0; }
    .container, .container-narrow { padding: 0 20px; }
    .personas-grid { grid-template-columns: 1fr; }
    .included-grid { grid-template-columns: 1fr; }
    .link-cards-grid { grid-template-columns: 1fr; }
    .blog-grid { grid-template-columns: 1fr; }
    .pricing-grid { grid-template-columns: 1fr; }
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
    .form-grid-2 { grid-template-columns: 1fr; }
    .credibility-strip .container { flex-direction: column; gap: 14px; text-align: center; }
    .credibility-items { justify-content: center; }
    .footer-grid { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 560px) {
    .services-grid { grid-template-columns: 1fr; }
    .outcomes-stats { grid-template-columns: 1fr 1fr; }
    .process-timeline, .process-timeline-5 { grid-template-columns: 1fr; }
    .contact-form-wrap { padding: 24px; }
    .ethics-block { padding: 26px; }
    .hero-float-badge { left: 4px; bottom: -12px; font-size: 12px; padding: 8px 14px; }
}

/* Add bottom space on mobile so sticky CTA doesn't cover footer content */
@media (max-width: 900px) {
    .site-footer { padding-bottom: 88px; }
}

/* ============================================
   GLOBAL MOBILE OVERFLOW & WRAP GUARDS (v2.1)
   Fixes: words breaking one-per-line, horizontal
   scroll/content cut-off on small screens.
   ============================================ */

/* Never allow horizontal overflow anywhere */
html, body { max-width: 100%; overflow-x: hidden; }
*, *::before, *::after { box-sizing: border-box; }

/* Media and SVG never exceed their container */
img, svg, video, .ssu-illu, .ssu-illu-frame { max-width: 100%; height: auto; }

/* Headings & text wrap normally (no per-word breaking),
   but long words/URLs break gracefully instead of overflowing */
h1, h2, h3, h4, p, a, li, span, .hero-headline, .section-title, .blog-card-title {
    overflow-wrap: break-word;
    word-wrap: break-word;
    -webkit-hyphens: none;
    hyphens: none;
}

/* Dropdown / footer min-widths must not force overflow on mobile */
@media (max-width: 900px) {
    .nav-dropdown, .dropdown-menu { min-width: 0 !important; }
    .footer-cta-action { min-width: 0 !important; width: 100%; }
}

/* Containers always fit viewport with safe gutters */
@media (max-width: 768px) {
    .container, .container-narrow, .container-wide {
        width: 100%;
        max-width: 100%;
        padding-left: 18px;
        padding-right: 18px;
        margin-left: auto;
        margin-right: auto;
    }
    /* Any grid collapses cleanly */
    .grid, [class*="-grid"] { grid-template-columns: 1fr !important; }
    /* Stat bands keep 2-up max on phones */
    .stat-band, .stat-band.cols-3 { grid-template-columns: repeat(2, 1fr) !important; }
    /* vs-block (comparison) stacks */
    .vs-block { grid-template-columns: 1fr !important; }
    /* why/feature two-column stacks */
    .why-grid, .feature-row, .faq-layout, .contact-layout { grid-template-columns: 1fr !important; }
    /* heading sizes calm down so they don't dominate */
    .hero-headline { font-size: clamp(30px, 8vw, 44px); line-height: 1.12; }
    .section-title { font-size: clamp(24px, 6.5vw, 32px); line-height: 1.2; }
}

/* Very small phones */
@media (max-width: 420px) {
    .stat-band, .stat-band.cols-3 { grid-template-columns: 1fr 1fr !important; }
    .hero-headline { font-size: clamp(26px, 8.5vw, 38px); }
    .btn-large { padding: 13px 18px; font-size: 14px; }
    .ssu-illu-frame { padding: 14px; }
    .credibility-items { gap: 10px 18px; }
    .credibility-items li { font-size: 16px; }
}

/* WhatsApp float: sit lower-right, never cover key content; smaller on phones */
@media (max-width: 768px) {
    .ssu-whatsapp-float { bottom: 16px; right: 14px; padding: 12px; }
    .ssu-whatsapp-float svg { width: 26px; height: 26px; }
}