/* ======================================================
   MOBILE FIXES
   ====================================================== */

@media (max-width: 480px) {
    .grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 28px;
        line-height: 1.3;
        padding: 0 10px;
    }
}

@media (max-width: 480px) {
    .section {
        padding: 16px 12px;
    }
}

@media (max-width: 480px) {
    .top-nav-links {
        flex-wrap: wrap;
        justify-content: flex-end;
        max-width: 100%;
        gap: 8px;
    }
    .top-nav-links a,
    .top-nav-main-cta {
        white-space: nowrap;
    }
}

/* Adjust anchor scroll position for mobile */
@media (max-width: 480px) {
    section {
        scroll-margin-top: 110px !important;
    }
}

/* Ultra-tight mobile nav */
@media (max-width: 480px) {
    .top-nav-links {
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 2px !important;
        row-gap: 2px !important;
        line-height: 1 !important;
    }

    .top-nav-links a {
        padding: 2px 4px !important;
        line-height: 1 !important;
        font-size: 14px !important;
        display: inline-block !important;
        height: auto !important;
        margin: 0 !important;
    }

    .top-nav-main-cta {
        padding: 4px 10px !important;
        font-size: 12px !important;
        line-height: 1 !important;
        margin: 0 !important;
    }
}

@media (max-width: 480px) {

    .logo-block {
        align-items: flex-start !important;
    }

    .logo-text-main {
        display: block;
        width: 100%;
        font-size: 18px !important;
        white-space: normal !important;
    }

    .logo-text-sub,
    .logo-text-sub2 {
        display: block;
        width: 100%;
        font-size: 12px !important;
        line-height: 1.2;
        white-space: normal !important;
    }
}

@media (max-width: 480px) {
    .logo-text-main {
        white-space: nowrap !important;
        word-break: keep-all !important;
        overflow-wrap: normal !important;
    }
}

.logo-text-main {
    white-space: nowrap;
    word-break: keep-all;
}

@media (max-width: 480px) {
    .logo-block {
        align-items: flex-start !important;
        padding-left: 0 !important;
    }
}

@media (max-width: 480px) {
    .logo-mark {
        display: none !important;
    }
}

@media (max-width: 480px) {
    .logo-block {
        gap: 0 !important;
    }
}

@media (max-width: 480px) {
    .logo-block {
        align-items: flex-start !important;
        padding-left: 0 !important;
    }
}
