/* Mobile */
@media (max-width: 576px) {

    body {
        padding-left: 0px;
        padding-right: 0px;
    }


    .desktop-only {
        display: none;
    }

    .mobile-only {
        display:block;
    }

    .hero {
        min-height: 100svh;
        align-items: center; /* top-align content */
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 100%;
    }

    .navbar-brand img {
        max-width: 140px; /* adjust if needed */
        height: auto;
        width: auto;
        display: block;
    }

    .navbar-brand {
        flex-shrink: 1;
        min-width: 0;
    }

    .navbar-logo {
        max-width: 130px;
    }


    .mobile-hero-above-fold {
        min-height: calc(100svh - 120px); /* navbar-safe */
        max-height: calc(100svh - 120px);
        overflow: visible;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-top: 1rem; 
        padding-bottom: 1rem;
        align-content: stretch;

    }

        .mobile-hero-above-fold h1 {
            margin-top: 12vh; /* controlled, intentional */
        }

    .hero-timeline {
        margin-top: 2rem;
        padding-top: 32px;
    }

    .hero-content {
        padding-left: 14px;
        padding-right: 14px;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    /* Push everything except headline + subtitle below the fold */
    /*    .hero-proof,
    .hero-ways,
    .hero-timeline,
    .scroll-indicator {
        margin-top: 60px;
    }*/

    .hero-heading {
        font-size: 1.8rem;
        line-height: 1.15;
        margin-bottom: 0.8rem;
        margin-top: 1rem;
    }

    .hero-points-inline {
        font-size: 0.9rem;
        opacity: 0.85;
        text-align: center;
        margin-bottom: 1rem;
    }

    .hero-heading-secondary {
        font-size: 1.5rem;
        line-height: 1.3;
        margin-bottom: 0.8rem;
        margin-top: 0.8rem;
    }

    .hero-divider {
        margin: 0.6rem auto 0.8rem;
        width: 48px;
    }

    .hero-cred {
        font-size: 0.85rem;
        line-height: 1.4;
        text-align: center;
        opacity: 0.85;
    }

    .hero-cta-secondary {
        opacity: 0.8;
    }

    .hero-ways {
        margin-top: 40px;
    }

    .hero-cta-wrapper {
        position: relative;
        z-index: 5; /* above hero fade */
        margin-top: 1.6rem;
        margin-bottom: 2.2rem;
        text-align: center;
    }

    .hero-cta {
        width: 100%;
        max-width: 320px;
        padding: 14px 22px;
        font-size: 1rem;
        box-shadow: 0 12px 30px rgba(242,106,74,0.45);
    }

    .hero--compact {
        min-height: calc(100svh - 80px);
        padding-top: 80px;
        display: flex;
        align-items: center; /* vertical center */
        justify-content: center; /* horizontal stack center */
    }



    .hero--compact .hero-content {
        min-height: auto;
        justify-content: center;
    }

    .hero--compact .hero-top--compact {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        width: 100%;
    }

    .proof-section--compact {
        position: relative;
        top: auto;
        bottom: auto;
        left: auto;
        transform: none;
        width: 100%;
    }

    .proof-section {
        margin-top: 40px; /* reduce from -260px */
    }

    .scroll-indicator-mobile {
        z-index: 10001 !important;
        display: flex !important;
        flex-direction: column;
        align-items: center;
        position: fixed !important; /* ⬅️ CRITICAL */
        bottom: calc(16px + 220px) ;
        left: 50%;
        transform: translateX(-50%);
        font-size: 0.85rem;
        opacity: 0.85;
        color: var(--accent-orange-strong);
        animation: scrollBounce 1.8s infinite; /* ⬅️ FIXED */
        pointer-events: none;
        z-index: 9999; /* ⬅️ ABOVE hero fade */
    }

        .scroll-indicator-mobile.is-hidden {
            opacity: 0;
            transform: translateX(-50%) translateY(8px);
            pointer-events: none;
        }

        .scroll-indicator-mobile i {
            font-size: 1.2rem;
        }

    .hero-savings-proof {
        margin-top: 40px;
        gap: 16px;
    }

    .savings-mini-card {
        width: 90%;
        max-width: 320px;
        padding: 22px 20px;
        border-radius: 16px;
    }

    .savings-value {
        font-size: 32px;
    }

    .savings-label {
        font-size: 13px;
    }

    .logo-intro {
        margin-left: 12px;
        margin-right: 12px;
    }


    .logo-group {
        flex: 1 1 100%;
        min-width: 0;
    }

    .logo-card {
        background: #ffffff !important;
        backdrop-filter: none !important;
        box-shadow: 0 0 8px rgba(0,0,0,0.06);
    }

    .hero-proof-icons {
        display: flex;
        justify-content: center;
        gap: 1.4rem;
        font-size: 1.4rem;
        color: var(--accent-orange-strong);
    }

    /* Icon + label row under subtitle */
    .hero-proof-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr); /* 2 per row */
        row-gap: 1.4rem; /* vertical breathing room */
        column-gap: 2rem; /* horizontal balance */
        max-width: 320px;
        margin-top: 3rem;
        position: relative;
    }

        .hero-proof-grid::after {
            content: "";
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: 0%;
            right: 0%;
            border-top: 2px dotted rgba(242, 106, 74, 0.45);
            pointer-events: none;
        }


        /* Vertical dotted line (between columns) */
        .hero-proof-grid::before {
            content: "";
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: 0%;
            bottom: 0%;
            border-left: 2px dotted rgba(242, 106, 74, 0.45);
            pointer-events: none;
        }

    .proof-metric {
        font-size: 28px;
        font-weight: 800;
        line-height: 1;
        color: var(--accent-orange-strong);
        min-width: 48px;
    }

    .proof-label div:first-child {
        font-weight: 600;
    }

    .proof-label div:last-child {
        opacity: 0.85;
    }

    .proof-circle {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: var(--accent-orange-strong);
        color: #fff;
        font-size: 18px;
        font-weight: 800;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

        .proof-circle.proof-flags {
            gap: 4px;
        }

            .proof-circle.proof-flags img {
                width: 20px;
                height: 14px;
                object-fit: cover;
                border-radius: 2px;
                background: #fff; /* prevents transparency artifacts */
            }

    .proof-item {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .proof-label {
        text-align: center;
        font-size: 1.25rem;
        line-height: 1.25;
    }

    /* Reduce space before scroll hint */
    .hero-scroll {
        margin-top: 1.8rem;
    }

    .footer-section {
        max-width: 100%; /* Stack sections vertically on smaller screens */
        margin-bottom: 20px;
    }

    .experience-grid {
        grid-template-columns: 1fr; /* collapse to single column */
        gap: 32px;
    }

    .experience-right {
        padding: 40px 24px; /* reduce heavy desktop padding */
        border-radius: 20px;
    }

    .experience-left {
        text-align: center; /* optional – cleaner mobile layout */
    }

        .experience-left h3 {
            margin-top: 16px;
        }

    .profile-photo {
        margin-left: auto;
        margin-right: auto;
    }

    .positioning {
        font-size: 0.95rem;
    }

    .execution-card {
        flex-direction: column; /* stack vertically */
        padding: 36px 24px; /* reduce heavy desktop padding */
        gap: 32px;
        text-align: center;
    }

    .execution-left {
        width: 100%;
    }

    .execution-metrics {
        flex-direction: column; /* stack metrics */
        gap: 28px;
    }

    .metric {
        text-align: center;
    }

    .metric-divider {
        display: none; /* remove vertical divider */
    }

    .execution-right {
        width: 100%;
        align-items: center;
    }

    .btn-proof {
        width: 100%;
        max-width: 320px;
    }
}

/* small phones: reduce font a bit */
@media (max-width: 380px) {
    .proof-label {
        font-size: 0.98rem;
    }

    .proof-item i {
        font-size: 1.25rem;
    }
}

/* optional: on desktop you can keep this too, or hide it and show text */
@media (min-width: 768px) {
    .hero-proof-grid {
        max-width: 640px;
    }
}

@media (max-width: 480px) {
    .hero-heading br {
        display: none;
    }
}

/* Tablet: 2 x 2 */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .pillar-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile: 1 x 4 */
@media (max-width: 767.98px) {
    .pillar-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 991.98px) {
/*    .hero-content {
        padding: 100px 0 60px;
    }
*/
/*    .hero {
        min-height: auto;
    }*/

    .hero-visual-wrapper {
        margin-top: 40px;
    }
}


/* Allow wrapping on smaller screens */
@media (max-width: 992px) {
    .hero-subtitle {
        white-space: normal;
        max-width: 66ch;
    }
}

@media (max-width: 900px) {
    .timeline {
        grid-template-columns: 1fr;
    }

        .timeline::before {
            display: none;
        }
}


/* Tablet */
@media (max-width: 991.98px) {
    .hero-ways {
        margin-top: 60px;
    }
}