/* =========================================================
   COSMO LINK — MOBILE READABILITY & TAP-TARGET FIXES
   Shared by every page. Only affects phones/tablets;
   desktop layout is unchanged.
   Found with an emulated 360 / 390 / 768px audit.
========================================================= */


@media (max-width: 767px) {

    /* ---------- Footer: text was 10px, links only 16px tall ---------- */

    .mf-footer .mf-footer-info-label {
        font-size: 11px;
    }

    .mf-footer .mf-footer-bottom p,
    .mf-footer .mf-footer-bottom-links a {
        font-size: 12px;
    }

    /* bigger tap area without changing the look */
    .mf-footer .mf-footer-bottom-links a {
        display: inline-block;
        padding: 8px 0;
    }

    .mf-footer .mf-footer-column ul li {
        margin-bottom: 4px;
    }

    .mf-footer .mf-footer-column ul li a {
        display: inline-block;
        padding: 7px 0;
    }


    /* ---------- Final CTA small labels (were 10px) ---------- */

    .mf-final-cta .mf-final-cta-eyebrow,
    .mf-final-cta .mf-final-cta-location {
        font-size: 11px;
    }


    /* ---------- Homepage slider (were 8–9px; dots 3px tall) ---------- */

    .mf-hero .mf-eyebrow {
        font-size: 11px;
        letter-spacing: 1.5px;
    }

    /* keep the thin line look, but make the dots ~27px tall to tap */
    .mf-hero .mf-dot {
        box-sizing: content-box;
        padding: 12px 0;
        background-clip: content-box;
    }

    .mf-premium-services .mf-bento-type {
        font-size: 11px;
    }

    /* homepage trust bar sub-lines and About hero highlight labels (were 10px) */
    .trust-bar .trust-item span,
    .mf-about-highlights span {
        font-size: 11px;
    }


    /* ---------- Homepage "featured solutions" — was cut off ---------- */

    .design-project-area .tp-section-title-dirtyline {
        font-size: 50px;
        line-height: 1;
    }

    .design-project-area .design-project-title {
        font-size: 36px;
        line-height: 1.05;
        overflow-wrap: break-word;
    }


    /* ---------- About "We're built for global connections" —
                 line-height 0.92 + reveal mask sliced the letters ---------- */

    .studio-about-title-box .tp-section-title-clash {
        line-height: 1.08 !important;
        letter-spacing: -0.5px !important;
    }

    /* Theme line-by-line text animation (SplitText) measures lines before the
       web font loads on phones, so each line wraps again and leaves stray
       one-word lines. Let the line wrappers flow inline — text wraps naturally,
       the fade-in still runs. */
    .tp_text_anim p > div {
        display: inline !important;
    }

    /* "We're" and "built for" share a line on phones — the word space
       is lost when the line is split for the reveal animation */
    .studio-about-title-box .tp-section-title-clash .clash-subtitle-space-1 {
        display: inline-block;
        margin-right: .3em;
    }

}


@media (max-width: 400px) {

    .design-project-area .tp-section-title-dirtyline {
        font-size: 42px;
    }

    .design-project-area .design-project-title {
        font-size: 30px;
    }

}