@media (max-width: 768px) {

    /* ===== HOME PAGE HERO: True Vertical Centering ===== */
    body.home-page #hero {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 100dvh !important;
        padding: 0 !important;
    }

    body.home-page .hero-content {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        min-height: auto !important;
        height: auto !important;
        padding: 130px 20px 80px 20px !important;
        /* More top gap from header */
        box-sizing: border-box;
        gap: 0 !important;
        text-align: center !important;
    }

    /* Professional page hero: gap from header */
    body.professional-page .hero-content {
        padding-top: 110px !important;
    }

    /* Tighter spacing for mobile to fit perfectly */
    .hero-badge {
        margin-top: 0;
        margin-bottom: 22px !important;
        transform: scale(0.9);
    }

    .hero-title {
        font-size: 2.5rem !important;
        margin-bottom: 22px !important;
        line-height: 1.1 !important;
    }

    .hero-tags {
        margin-bottom: 28px !important;
        gap: 8px !important;
    }

    .hero-cta {
        gap: 15px !important;
        margin-top: 5px !important;
    }

    /* Override inline style for socials to equalize gap */
    .hero-socials {
        margin-top: 28px !important;
    }
}

/* Contact Button - Theme Match (Orange/Warm) */
.btn-contact {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 30px;
    border-radius: 100px;
    font-size: 0.95rem;
    font-weight: 600;
    text-transform: capitalize;
    letter-spacing: 1px;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
    z-index: 1;
    color: white;
    background: var(--accent-orange, #f97316);
    /* Fallback to orange if var not set, matching Nav */
    border: 1px solid var(--accent-orange, #f97316);
    box-shadow: 0 10px 30px rgba(249, 115, 22, 0.3);
}

.btn-contact:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 40px rgba(249, 115, 22, 0.5);
    background: #ea580c;
    /* Darker orange on hover */
}

/* =========================================================================
   Psychological Interactions & Polish (Mobile)
   ========================================================================= */

/* 1. Tactile Tap Feedback (Scale Down on Click) */
a:active,
button:active,
.btn:active,
.mobile-link:active,
.nav-logo:active {
    transform: scale(0.96) !important;
    transition: transform 0.1s ease-out !important;
}

/* 2. Smooth "Ghost" Glow on Touch */
@media (hover: none) {
    .btn:active::after {
        opacity: 0.3;
        transition: opacity 0.1s;
    }
}

/* 3. Fix Layout Overlaps & Spacing */
@media (max-width: 768px) {

    /* Ensure cards don't overlap vertically */
    .stat-card,
    .process-step,
    .testimonial-card,
    .award-item {
        margin-bottom: 20px;
        transform: translateZ(0);
        /* Hardware acceleration to prevent glitching */
    }

    /* Fix potential text overlaps in grid items */
    .stats-grid,
    .process-grid,
    .testimonials-grid,
    .awards-grid {
        gap: 25px;
        /* Increase gap slightly for breathing room */
    }

    /* Ensure section headers have cleared space */
    .section-header {
        margin-bottom: 40px;
        /* More space before content starts */
        padding-top: 10px;
    }

    /* Fix Navigation Shift if any */
    .nav-container {
        padding-right: 15px;
        /* Ensure burger doesn't get too close to edge */
        display: flex;
        align-items: center;
        width: 100%;
    }

    .nav-logo {
        flex-shrink: 0;
        z-index: 1001;
        /* Ensure logo is above any ambient glows */
    }

    .theme-toggle-btn {
        margin-left: auto !important;
        margin-right: 10px !important;
    }

    .nav-menu-btn {
        margin-left: 0 !important;
    }
}

/* 4. Middleware Alignment for Menu (Strict Centering) */
.mobile-menu-content {
    align-items: center !important;
    justify-content: center !important;
    /* Force center vertically if using flex column */
    text-align: center !important;
}

.mobile-link {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-bottom: 2px !important;
    /* Reduced main link bottom gap */
}

/* 5. Tighter Grouping for Psychology/UX */
.mobile-menu-group {
    margin-bottom: 15px !important;
    /* Tighter grouping between sections */
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Tighter Sub-link Grid */
.sub-link-grid {
    gap: 2px 8px !important;
    /* Tighter grid */
    margin-bottom: 5px !important;
}

.mobile-link.sub-link-flat {
    padding: 2px 0 !important;
    /* Minimal padding */
}

/* Fix for sub-links centering */
.mobile-folder .folder-content {
    align-items: center !important;
    text-align: center !important;
}

.mobile-link:not(.main-link) {
    text-align: center !important;
    padding-left: 0 !important;
    margin: 5px auto !important;
    /* Center block with spacing */
}

/* Prevent menu from being too tall causing overlap */
@media (max-height: 700px) {
    .mobile-link {
        font-size: clamp(2rem, 8vw, 3rem) !important;
        /* Reduce font size on short screens */
    }

    .mobile-menu-content {
        gap: 15px !important;
        justify-content: center !important;
    }
}

/* Showreel Page Mobile Adjustments */
@media (max-width: 768px) {
    body.showreel-page .hero {
        padding-top: 50px !important;
        /* Move content up */
        min-height: 85vh !important;
        /* Allow it to fit better */
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }

    /* Remove the bottom shade/mask if present */
    body.showreel-page .hero-bg {
        mask-image: none !important;
        -webkit-mask-image: none !important;
        background: radial-gradient(circle at 50% 50%, rgba(139, 92, 246, 0.1) 0%, transparent 70%) !important;
        /* Keep subtle glow but remove heavy shade */
    }

    /* Push text up specifically */
    body.showreel-page .hero-text-block {
        margin-top: -30px !important;
    }

    /* Privacy & Terms Header Fix & Mobile Optimization */
    body.legal-page .section {
        padding-top: 140px !important;
        /* Reduced from 180px to be tighter but still clear */
        padding-bottom: 40px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    body.legal-page .section-title {
        font-size: 2rem !important;
        /* Smaller Heading */
        margin-bottom: 25px !important;
        line-height: 1.2 !important;
    }

    body.legal-page .narrative-text p,
    body.legal-page .narrative-text li {
        font-size: 0.95rem !important;
        /* Smaller body text */
        line-height: 1.5 !important;
        text-align: left !important;
    }

    body.legal-page .narrative-text h3 {
        font-size: 1.25rem !important;
        /* Smaller sub-headings */
        margin-top: 25px !important;
        margin-bottom: 10px !important;
    }

    body.legal-page .narrative-text ul {
        margin-left: 15px !important;
        margin-bottom: 15px !important;
    }

    /* Ensure video block has space but doesn't push too far down */
    body.showreel-page .hero-video-block {
        margin-top: 25px !important;
    }

    /* Fix Showreel Thumbnail Sizing (Prevent Zoom/Crop) */
    .portfolio-item img {
        object-fit: contain !important;
        background: #000;
    }
}