@media (max-width: 767px) {
    /* 1. Masthead Layout Overrides */
    #masthead {
        padding: 16px 20px !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }

    /* 2. Brand Typography Scaling */
    .site-branding a {
        font-size: 15px !important;
        letter-spacing: 0.15em !important;
        line-height: 1.3 !important;
        display: inline-block !important;
    }
    
    .site-branding a span {
        display: block !important;
        margin-top: 2px;
    }

    /* 3. Navigation Actions Cleanup for Mobile Viewport */
    /* Hide the text portal link and duplicate book session action from the main header row.
       Both of these are easily accessible inside the mobile hamburger menu. */
    #masthead .nav-actions a[href="/portal"],
    #masthead .nav-actions a[href="/schedule"] {
        display: none !important;
    }

    /* 4. Compact Calm/Stillness Trigger */
    #silence-toggle {
        padding: 6px 12px !important;
        gap: 6px !important;
        border-radius: 99px !important;
        background: rgba(10, 10, 10, 0.02) !important;
    }

    #silence-toggle span:first-child {
        width: 6px !important;
        height: 6px !important;
    }

    #silence-toggle span:last-child {
        font-size: 8px !important;
        letter-spacing: 0.1em !important;
    }

    /* 5. Space and Flex Alignment */
    .nav-actions {
        gap: 16px !important;
    }
    
    /* Ensure the hamburger icon remains visible and correctly sized */
    #menu-toggle {
        width: 20px !important;
        height: 20px !important;
    }

    /* 6. Section Padding Adjustments */
    #resonance-field {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }

    #resonance-field .max-w-7xl,
    #resonance-field .grid {
        padding-left: 16px !important;
        padding-right: 16px !important;
        box-sizing: border-box !important;
    }

    #resonance-field .group {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    /* 7. Disable Custom Cursor on Mobile/Touch viewports */
    .custom-cursor,
    .custom-cursor-follower {
        display: none !important;
    }

    /* 8. Scroll-Triggered Color for Images on Mobile */
    /* When an image or container scrolls into view (adding .in-view class),
       we transition the grayscale filter to 0 and fade out color overlays. */
    .in-view img.grayscale,
    img.grayscale.in-view,
    .in-view.grayscale {
        filter: grayscale(0) !important;
        transform: scale(1) !important;
    }

    /* Target overlay divs inside in-view groups (e.g. green tint on front page image) */
    .in-view div.absolute.inset-0 {
        opacity: 0 !important;
    }

    /* 9. Mobile Menu Scroll Bug Fix */
    /* Prevent Flexbox justify-center alignment from cutting off top items when content overflows */
    #mobile-menu {
        justify-content: flex-start !important;
        padding-top: 100px !important;
        padding-bottom: 80px !important;
    }

    /* 10. Quiz Option Buttons Optimization */
    /* Make quiz options fully visible and responsive on touch screens */
    .quiz-step button.text-left {
        opacity: 0.9 !important;
        transition: background-color 0.15s ease, opacity 0.15s ease !important;
        pointer-events: auto !important;
    }
    
    .quiz-step button.text-left:active {
        background-color: rgba(255, 255, 255, 0.15) !important;
        opacity: 1 !important;
    }
}