/**
 * Mobile-Only Adjustments
 * All changes in this file apply ONLY to mobile view (max-width: 767px)
 *
 * This stylesheet contains responsive fixes for:
 * - Header
 * - Front Page
 * - Footer
 * - CGAP Page
 * - Service Single
 * - Team Single
 * - Software Single
 * - Contact Page
 * - Archive Pages (Blog, Reviews, History, Careers)
 *
 * @package Cosmick_Media_Project_Theme
 */

/* ============================================
   MOBILE-ONLY STYLES (max-width: 767px)
   ============================================ */

@media (max-width: 767px) {

    /* ========================================
       1. HEADER (header.php)
       ======================================== */

    /* Remove thin 1px line underneath header */
    .professional-header::after,
    .professional-header .container::after,
    .header-inner::after {
        display: none !important;
        border-bottom: none !important;
        height: 0 !important;
    }

    .professional-header {
        border-bottom: none !important;
    }


    /* ========================================
       2. FRONT PAGE (front-page.php)
       ======================================== */

    /* Stats Section: Single Row */
    .about-professional-stats {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 10px !important;
        justify-content: space-between !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .about-professional-stats .stat-professional {
        flex: 1 1 auto !important;
        min-width: 30% !important;
        max-width: 33.333% !important;
        margin-bottom: 0 !important;
        text-align: center !important;
    }

    .about-professional-stats .stat-professional-value {
        font-size: 1.5rem !important;
        white-space: nowrap !important;
    }

    .about-professional-stats .stat-professional-label {
        font-size: 0.75rem !important;
        white-space: normal !important;
    }

    /* Testimonials: Horizontal Carousel */
    .testimonials-carousel-wrapper {
        position: relative;
        overflow: visible !important;
        height: auto !important;
        min-height: auto !important;
    }

    .testimonials-carousel {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 15px !important;
        padding: 10px 0 20px !important;
        scrollbar-width: thin !important; /* Firefox - show scroll indicator */
        -ms-overflow-style: auto !important; /* IE/Edge - show scroll indicator */
        height: auto !important;
        min-height: auto !important;
        align-items: stretch !important;
    }

    /* Show scrollbar on mobile for testimonials */
    .testimonials-carousel::-webkit-scrollbar {
        height: 6px !important;
        display: block !important;
    }

    .testimonials-carousel::-webkit-scrollbar-track {
        background: #f1f1f1 !important;
        border-radius: 10px !important;
    }

    .testimonials-carousel::-webkit-scrollbar-thumb {
        background: #ff675b !important;
        border-radius: 10px !important;
    }

    .testimonials-carousel .testimonial-professional-card {
        flex: 0 0 90% !important;
        scroll-snap-align: center !important;
        min-width: 90% !important;
        height: auto !important;
        min-height: auto !important;
    }

    /* Hide desktop carousel navigation buttons on mobile */
    .testimonials-nav-btn {
        display: none !important;
    }

    /* All Reviews Button */
    .testimonials-professional-section .section-cta,
    .testimonials-all-reviews-cta {
        text-align: center !important;
        margin-top: 30px !important;
        padding-top: 20px !important;
    }

    .testimonials-professional-section .btn-professional-outline,
    .testimonials-all-reviews-btn {
        display: inline-block !important;
        padding: 14px 35px !important;
        background: transparent !important;
        color: #3c3c3c !important;
        border: 2px solid #3c3c3c !important;
        border-radius: 8px !important;
        font-weight: 600 !important;
        font-size: 1rem !important;
        text-decoration: none !important;
        transition: all 0.3s ease !important;
    }

    .testimonials-professional-section .btn-professional-outline:hover,
    .testimonials-all-reviews-btn:hover {
        background: #3c3c3c !important;
        color: white !important;
        transform: translateY(-2px) !important;
    }


    /* ========================================
       3. FOOTER (footer.php)
       ======================================== */

    /* Center logo */
    .footer .f_logo {
        text-align: center !important;
        margin: 0 auto !important;
    }

    .footer .f_logo a {
        display: inline-block !important;
    }

    /* Reduce excess vertical spacing above logo */
    .footer-item:first-child {
        padding-top: 20px !important;
    }

    .footer .f_logo {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }


    /* ========================================
       4. CGAP PAGE (page-cgap.php)
       ======================================== */

    /* Add top padding for fixed header offset */
    .cgap-hero-section {
        padding-top: 100px !important;
    }

    .cgap-hero-content .row {
        min-height: auto !important;
    }

    /* Hero Stats: Single Row */
    .cgap-hero-stats {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 10px !important;
        justify-content: space-between !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .cgap-hero-stats .cgap-stat-item {
        flex: 1 1 auto !important;
        min-width: 30% !important;
        max-width: 33.333% !important;
        text-align: center !important;
    }

    .cgap-hero-stats .stat-number {
        font-size: 1.5rem !important;
        white-space: nowrap !important;
    }

    .cgap-hero-stats .stat-label {
        font-size: 0.75rem !important;
        white-space: normal !important;
    }

    /* Add spacing between "Explore CGAP" button and video */
    .cgap-hero-actions {
        margin-bottom: 30px !important;
    }

    .cgap-video-container {
        margin-top: 30px !important;
    }

    /* Marketing Pillars: Horizontal Carousel */
    .cgap-pillars-grid {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 15px !important;
        padding: 10px 0 !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }

    .cgap-pillars-grid::-webkit-scrollbar {
        display: none !important;
    }

    .cgap-pillars-grid .cgap-pillar-card {
        flex: 0 0 85% !important;
        scroll-snap-align: center !important;
        min-width: 85% !important;
    }

    /* Add spacing before MediaHub Dashboard */
    .cgap-mediahub-section {
        margin-top: 50px !important;
    }

    .mediahub-cta {
        margin-top: 30px !important;
        margin-bottom: 30px !important;
    }

    /* MediaHub Dashboard: Stats on one line */
    .interface-stats {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        justify-content: space-between !important;
        overflow-x: auto !important;
    }

    .interface-stats .stat-card {
        flex: 1 1 auto !important;
        min-width: 30% !important;
        max-width: 33.333% !important;
        padding: 8px 5px !important;
    }

    .interface-stats .stat-value {
        font-size: 1.2rem !important;
        white-space: nowrap !important;
    }

    .interface-stats .stat-label {
        font-size: 0.65rem !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* AI Assistant Stats: Single Row */
    .chatbot-stats-mini {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 10px !important;
        justify-content: space-between !important;
    }

    .chatbot-stats-mini .mini-stat {
        flex: 1 1 auto !important;
        min-width: 30% !important;
        max-width: 33.333% !important;
        text-align: center !important;
    }

    .chatbot-stats-mini .mini-value {
        font-size: 1.5rem !important;
        white-space: nowrap !important;
    }

    .chatbot-stats-mini .mini-label {
        font-size: 0.75rem !important;
        white-space: normal !important;
    }

    /* Add spacing below AI Assistant section */
    .cgap-chatbot-section {
        padding-bottom: 50px !important;
    }

    /* Driply CRM: Horizontal Carousel */
    .cgap-journey-timeline {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 15px !important;
        padding: 10px 0 !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }

    .cgap-journey-timeline::-webkit-scrollbar {
        display: none !important;
    }

    .cgap-journey-timeline .journey-step {
        flex: 0 0 85% !important;
        scroll-snap-align: center !important;
        min-width: 85% !important;
    }

    .cgap-journey-timeline .journey-line {
        display: none !important;
    }

    /* Pricing: Horizontal Carousel */
    .cgap-pricing-table {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 15px !important;
        padding: 10px 0 !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }

    .cgap-pricing-table::-webkit-scrollbar {
        display: none !important;
    }

    .cgap-pricing-table .pricing-tier {
        flex: 0 0 85% !important;
        scroll-snap-align: center !important;
        min-width: 85% !important;
    }

    /* Getting Started: Fix color contrast */
    .process-step.active,
    .process-step:active,
    .process-step.selected {
        background-color: #3c3c3c !important;
        color: #ffffff !important;
    }

    .process-step.active .step-content h4,
    .process-step.active .step-content p,
    .process-step:active .step-content h4,
    .process-step:active .step-content p,
    .process-step.selected .step-content h4,
    .process-step.selected .step-content p {
        color: #ffffff !important;
    }

    /* Getting Started: Horizontal Carousel */
    .cgap-process-steps {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 15px !important;
        padding: 10px 0 !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }

    .cgap-process-steps::-webkit-scrollbar {
        display: none !important;
    }

    .cgap-process-steps .process-step {
        flex: 0 0 85% !important;
        scroll-snap-align: center !important;
        min-width: 85% !important;
    }


    /* ========================================
       5. SERVICE SINGLE (single-service.php)
       ======================================== */

    /* Service name vertical alignment */
    .cosmick-service-featured-badge {
        display: inline-flex !important;
        align-items: center !important;
        vertical-align: middle !important;
        gap: 5px !important;
    }

    .cosmick-service-meta-badges {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 10px !important;
    }

    /* Urgent Help popup: Increase width */
    .cosmick-service-immediate-cta {
        width: 300px !important;
        max-width: calc(100vw - 40px) !important;
    }

    /* Key Benefits: Horizontal Carousel */
    .cosmick-service-benefits-list {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 15px !important;
        padding: 10px 0 !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }

    .cosmick-service-benefits-list::-webkit-scrollbar {
        display: none !important;
    }

    .cosmick-service-benefits-list .cosmick-service-benefit-item {
        flex: 0 0 85% !important;
        scroll-snap-align: center !important;
        min-width: 85% !important;
    }

    /* Process Steps: Horizontal Carousel and Center */
    .cosmick-service-process-steps {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 15px !important;
        padding: 10px 0 !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        justify-content: center !important;
    }

    .cosmick-service-process-steps::-webkit-scrollbar {
        display: none !important;
    }

    .cosmick-service-process-steps .cosmick-service-process-step {
        flex: 0 0 85% !important;
        scroll-snap-align: center !important;
        min-width: 85% !important;
    }

    /* FAQ: Fix text display */
    .faq-section,
    .cosmick-service-content-section.faq-section {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .faq-accordion,
    .faq-item,
    .faq-question,
    .faq-answer {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .faq-answer-content,
    .faq-answer-content p,
    .faq-answer .faq-answer-content {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        color: #666 !important;
    }

    .faq-item.active .faq-answer,
    .faq-answer.show,
    .faq-answer.collapse.show {
        display: block !important;
        max-height: none !important;
        opacity: 1 !important;
        height: auto !important;
    }

    .faq-answer.collapse:not(.show) {
        display: none !important;
    }

    /* Service Single: Reduce bottom padding */
    .cosmick-service-single,
    .single-service-page {
        /* padding-bottom: 50px !important; */
        margin-bottom: 0 !important;
    }

    .cosmick-service-cta-section {
        margin-bottom: 50px !important;
        padding-bottom: 30px !important;
    }


    /* ========================================
       6. TEAM SINGLE (single-team.php)
       ======================================== */

    /* Gallery: 2x2 Grid */
    .team-gallery-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        max-width: 100% !important;
    }

    .team-gallery-grid-item {
        width: 100% !important;
        aspect-ratio: 1 / 1 !important;
        overflow: hidden !important;
    }

    .team-gallery-grid-item img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    /* Navigation: Remove Previous button, keep Back to Team */
    .member-navigation .prev-member {
        display: none !important;
    }

    .member-navigation {
        justify-content: center !important;
    }

    /* Adjust bottom spacing */
    .cosmick-single-team {
        /* margin-bottom: 50px !important; */
        margin-bottom: 0 !important;
    }

    .team-navigation {
        padding-bottom: 50px !important;
        margin-bottom: 0 !important;
    }


    /* ========================================
       7. SOFTWARE SINGLE (single-software.php)
       ======================================== */

    /* Add close button to sticky bottom container */
    .software-sticky-cta {
        position: relative !important;
    }

    .software-sticky-cta::before {
        content: "\00d7" !important;
        position: absolute !important;
        top: 10px !important;
        right: 10px !important;
        font-size: 24px !important;
        width: 30px !important;
        height: 30px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(0, 0, 0, 0.1) !important;
        border-radius: 50% !important;
        cursor: pointer !important;
        z-index: 10 !important;
        color: #333 !important;
    }

    /* Closeable functionality via JS (added below) */
    .software-sticky-cta.hidden {
        display: none !important;
    }

    /* Features: Horizontal Carousel */
    .software-features-grid {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 15px !important;
        padding: 10px 0 !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }

    .software-features-grid::-webkit-scrollbar {
        display: none !important;
    }

    .software-features-grid .software-feature-card {
        flex: 0 0 85% !important;
        scroll-snap-align: center !important;
        min-width: 85% !important;
    }

    /* Pricing: Horizontal Carousel */
    .software-pricing-grid {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 15px !important;
        padding: 10px 0 !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }

    .software-pricing-grid::-webkit-scrollbar {
        display: none !important;
    }

    .software-pricing-grid .software-pricing-card {
        flex: 0 0 85% !important;
        scroll-snap-align: center !important;
        min-width: 85% !important;
    }

    /* Software Single: Reduce bottom padding */
    .software-single,
    .single-software {
        /* padding-bottom: 50px !important; */
        margin-bottom: 0 !important;
    }


    /* ========================================
       8. CONTACT PAGE (page-contact.php)
       ======================================== */

    /* Add top padding for header offset */
    .cosmick-contact-page .cosmick-contact-header {
        padding-top: 100px !important;
    }

    /* Why Work With Us: Horizontal Carousel */
    .cosmick-benefits-grid {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 15px !important;
        padding: 10px 0 !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }

    .cosmick-benefits-grid::-webkit-scrollbar {
        display: none !important;
    }

    .cosmick-benefits-grid .cosmick-benefit-item {
        flex: 0 0 85% !important;
        scroll-snap-align: center !important;
        min-width: 85% !important;
    }

    /* Add bottom padding - ensure content is above footer */
    .cosmick-contact-page {
        padding-bottom: 0px !important;
        margin-bottom: 0 !important;
    }

    .cosmick-contact-cta {
        /* padding-bottom: 80px !important; */
        margin-bottom: 0px !important;
    }

    .cosmick-contact-page .site-main {
        /* padding-bottom: 50px !important; */
    }


    /* ========================================
       8B. TEAM ARCHIVE (archive-team.php or page-team.php)
       ======================================== */

    /* Add top padding for header offset */
    .page-team .page-header,
    .archive-team .page-header,
    body.page-template-page-team #primary,
    body.post-type-archive-team #primary,
    body.post-type-archive-team .site-main {
        padding-top: 35px !important;
    }

    /* Join Our Team button: Make text white */
    .team-archive .join-team-cta .btn,
    .team-archive .join-team-btn,
    .team-cta-section .btn,
    .team-cta-section a.btn-professional-primary,
    .page-team .join-team-btn,
    a[href*="join-our-team"] {
        color: #ffffff !important;
    }

    .team-archive .join-team-cta .btn:hover,
    .team-cta-section .btn:hover {
        color: #ffffff !important;
    }


    /* ========================================
       9. BLOG ARCHIVE (page-blog.php or archive-blog.php)
       ======================================== */

    /* Add top padding for header offset */
    .blog-archive .page-header,
    .archive.blog .page-header,
    .page-blog .page-header,
    body.blog #primary,
    body.archive.category #primary,
    body.archive.tag #primary,
    body.blog .site-main,
    body.archive.category .site-main,
    body.archive.tag .site-main {
        padding-top: 100px !important;
    }

    /* Reduce bottom padding significantly */
    body.blog,
    body.archive.category,
    body.archive.tag,
    .blog-archive,
    .page-blog {
        padding-bottom: 20px !important;
        margin-bottom: 0 !important;
    }

    body.blog .site-main,
    body.archive.category .site-main,
    body.archive.tag .site-main {
        padding-bottom: 20px !important;
        margin-bottom: 0 !important;
    }

    body.blog #primary,
    body.archive.category #primary,
    body.archive.tag #primary {
        padding-bottom: 20px !important;
        margin-bottom: 0 !important;
    }


    /* ========================================
       10. BLOG SINGLE (single-blog.php or single.php)
       ======================================== */

    /* Add top padding */
    .single-post .entry-header,
    .single-post article,
    body.single-post #primary {
        padding-top: 100px !important;
    }

    /* Remove random border lines at top */
    .single-post .entry-header::before,
    .single-post .entry-header::after,
    .single-post article::before,
    body.single-post #primary::before {
        display: none !important;
        border: none !important;
        height: 0 !important;
    }

    /* Blog Single: Reduce bottom padding */
    .single-post,
    body.single-post,
    body.single-post #primary,
    body.single-post .site-main {
        /* padding-bottom: 50px !important; */
        margin-bottom: 0 !important;
    }


    /* ========================================
       11. REVIEWS ARCHIVE (page-reviews.php or archive-reviews.php)
       ======================================== */

    /* Add top padding for header offset */
    .page-reviews .page-header,
    .archive-reviews .page-header,
    body.page-template-page-reviews #primary,
    body.post-type-archive-cosmick_review #primary {
        padding-top: 100px !important;
    }


    /* ========================================
       12. HISTORY ARCHIVE (page-history.php or archive-history.php)
       ======================================== */

    /* Remove white space above - fix header overlap */
    body.page-template-page-history #primary,
    body.page-template-page-history .site-main,
    .page-history,
    .page-history #primary {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    /* Add top padding to first section only */
    .page-history .page-header,
    .archive-history .page-header,
    body.page-template-page-history .site-main > section:first-child,
    body.page-template-page-history .site-main > *:first-child {
        padding-top: 100px !important;
        margin-top: 0 !important;
    }

    /* Stats: All three on one row (Milestones, Years, Founded) */
    .history-stats,
    .milestone-stats,
    .history-hero-stats,
    .page-history .stats-row,
    .page-history .hero-stats {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        justify-content: space-between !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .history-stats .stat-item,
    .milestone-stats .stat-item,
    .history-hero-stats .stat-item,
    .page-history .stats-row .stat-item,
    .page-history .hero-stats .stat-item {
        flex: 1 1 auto !important;
        min-width: 30% !important;
        max-width: 33.333% !important;
        text-align: center !important;
    }

    .history-stats .stat-item .stat-number,
    .history-stats .stat-item .stat-value {
        font-size: 1.5rem !important;
        white-space: nowrap !important;
    }

    .history-stats .stat-item .stat-label {
        font-size: 0.75rem !important;
        white-space: normal !important;
    }

    /* Timeline: Year on top of vertical line with circle */
    .timeline-section {
        position: relative !important;
    }

    .timeline-item {
        position: relative !important;
        z-index: 2 !important;
    }

    .timeline-item::before,
    .timeline-vertical-line,
    .vertical-line {
        z-index: 0 !important;
        position: relative !important;
    }

    .timeline-year,
    .timeline-item .year,
    .timeline-year-marker {
        position: relative !important;
        z-index: 10 !important;
        background: white !important;
        padding: 8px 12px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: 2px solid #ff675b !important;
        border-radius: 50% !important;
        font-weight: bold !important;
        color: #ff675b !important;
        min-width: 60px !important;
        min-height: 60px !important;
    }

    .timeline-vertical-line {
        position: absolute !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 2px !important;
        height: 100% !important;
        background: #e5e5e5 !important;
        z-index: 0 !important;
    }

    /* Remove excess bottom spacing - reduce by at least 100px */
    .page-history,
    .archive-history,
    body.page-template-page-history {
        margin-bottom: 0 !important;
        padding-bottom: 30px !important;
    }

    body.page-template-page-history .site-main {
        padding-bottom: 30px !important;
        margin-bottom: 0 !important;
    }

    .page-history .timeline-section,
    .archive-history .timeline-section {
        margin-bottom: 30px !important;
        padding-bottom: 0 !important;
    }

    .page-history #primary,
    body.page-template-page-history #primary {
        padding-bottom: 30px !important;
        margin-bottom: 0 !important;
    }


    /* ========================================
       13. CAREERS (page-careers.php or archive-careers.php)
       ======================================== */

    /* Remove white space above - fix header overlap */
    body.page-template-page-careers #primary,
    body.page-template-page-join-our-team #primary,
    body.page-template-page-careers .site-main,
    body.page-template-page-join-our-team .site-main,
    .page-careers,
    .page-careers #primary {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    /* Add top padding to first section only */
    .page-careers .page-header,
    .archive-careers .page-header,
    body.page-template-page-careers .site-main > section:first-child,
    body.page-template-page-join-our-team .site-main > section:first-child,
    body.page-template-page-careers .site-main > *:first-child,
    body.page-template-page-join-our-team .site-main > *:first-child {
        padding-top: 100px !important;
        margin-top: 0 !important;
    }

    /* Stats: All three on one row (Team Members, Experience, Projects Completed) */
    .careers-stats,
    .team-stats,
    .careers-hero-stats,
    .page-careers .stats-row,
    .page-careers .hero-stats {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        justify-content: space-between !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .careers-stats .stat-item,
    .team-stats .stat-item,
    .careers-hero-stats .stat-item,
    .page-careers .stats-row .stat-item,
    .page-careers .hero-stats .stat-item {
        flex: 1 1 auto !important;
        min-width: 30% !important;
        max-width: 33.333% !important;
        text-align: center !important;
    }

    .careers-stats .stat-item .stat-number,
    .careers-stats .stat-item .stat-value {
        font-size: 1.5rem !important;
        white-space: nowrap !important;
    }

    .careers-stats .stat-item .stat-label {
        font-size: 0.75rem !important;
        white-space: normal !important;
    }

    /* Why Join: Horizontal Carousel */
    .why-join-grid,
    .benefits-grid {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 15px !important;
        padding: 10px 0 !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }

    .why-join-grid::-webkit-scrollbar,
    .benefits-grid::-webkit-scrollbar {
        display: none !important;
    }

    .why-join-grid .benefit-card,
    .benefits-grid .benefit-card,
    .why-join-grid .benefit-item,
    .benefits-grid .benefit-item {
        flex: 0 0 85% !important;
        scroll-snap-align: center !important;
        min-width: 85% !important;
    }

}

/* End of Mobile-Only Styles */