/* ===========================================================
   BAKSORBIT — Global responsive hardening
   Loaded LAST on every public page (after style.css + per-page CSS),
   so it refines mobile behaviour site-wide without overriding intent.
   =========================================================== */

/* ---- 1. Overflow safety net: nothing should force horizontal scroll ---- */
img, svg, video, canvas, iframe { max-width: 100%; height: auto; }
table { max-width: 100%; }
pre, code { white-space: pre-wrap; word-break: break-word; }
* { min-width: 0; }                         /* let fl/grid children shrink instead of overflowing */

/* ---- 2. Tablet / small laptop ---- */
@media (max-width: 768px) {
    :root { --sp-section: clamp(64px, 11vw, 110px); }
    .section-head { margin-bottom: clamp(34px, 7vw, 56px); }
    /* keep long words / URLs from blowing out cards on small widths */
    p, h1, h2, h3, h4, a, li, span { overflow-wrap: break-word; }
}

/* ---- 3. Phones ---- */
@media (max-width: 560px) {
    :root {
        --sp-section: 58px;
        --fs-display: clamp(34px, 11vw, 60px);
        --fs-h2: clamp(26px, 7.6vw, 42px);
        --fs-lead: clamp(15.5px, 4vw, 18px);
    }
    .container { padding: 0 18px; }

    /* Full-width, comfortably tappable primary CTAs */
    .hero-cta, .sp-hero-cta, .sp-cta-btns { width: 100%; }
    .hero-cta .btn,
    .sp-hero-cta .btn,
    .sp-cta-btns .btn,
    .footer-cta-btn,
    .cta-form .btn { width: 100%; justify-content: center; }
    .btn { padding: 14px 20px; }
    .btn-lg { padding: 15px 22px; font-size: 15px; }

    /* Stat/number rows: wrap neatly, smaller numbers */
    .sp-hero-stats, .hero-meta { gap: 20px 28px; }
    .meta-item strong { font-size: 34px; }

    /* Section heads breathe a little less */
    .section-head { margin-bottom: 36px; }

    /* Forms: full-width fields, no side-by-side cramming */
    .cf-row, .jf-row, .field-grid { grid-template-columns: 1fr !important; }
    .pd-gate-form { flex-direction: column; }
    .pd-gate-form input, .pd-gate-form .btn { width: 100%; }
}

/* ---- 4. Very small phones ---- */
@media (max-width: 380px) {
    .container { padding: 0 14px; }
    .footer-wordmark { font-size: clamp(48px, 18vw, 90px); }
}