@media screen and (max-width: 767.98px) {
    #about-us-section {
        margin-top: 40px;
        padding: 0 24px;
        flex-direction: column-reverse;
        gap: 24px;
    }
    
    .about-us-image {
        width: 100%;
        max-width: 300px;
        height: auto;
        aspect-ratio: 300 / 283;
        object-fit: cover;
    }
    
    .about-us-description {
        width: 100%;
        max-width: 300px;
        height: auto;
    }
    
    .about-us-description h1 {
        font-size: 24px;
        line-height: 32px;
    }
    
    .about-us-description hr {
        margin: 16px 0;
    }
    
    .about-us-text {
        width: 100%;
        height: auto;
        gap: 16px;
        justify-content: flex-start;
    }
    
    .about-us-text p {
        margin: 0;
        font-size: 12px;
        line-height: 18px;
    }
    
    /* ---------- Mission & Vision: stacked ---------- */
    #mission-vision-section {
        height: auto;
        margin: 40px 0;
        padding: 48px 24px;
        flex-direction: column;
        gap: 48px;
    }
    
    .mission-section,
    .vision-section {
        width: 100%;
        max-width: 346px;
    }
    
    .mission-vision-img {
        width: 100px;
        height: 100px;
        margin-bottom: 12px;
    }
    
    .mission-vision-description :is(h1, h2, h3) {
        font-size: 20px;
        line-height: 26px;
    }
    
    .mission-vision-description hr {
        width: 80px;
    }
    
    .mission-vision-description p {
        max-width: 100%;
        font-size: 12px;
        line-height: 20px;
    }
    
    /* ---------- Philosophy: image on top, text below (your existing rules) ---------- */
    #philosophy-section {
        gap: 48px;
        padding: 0 24px;
    }
    
    .philosophy-column,
    .philosophy-column-reverse {
        width: 100%;
        height: auto;
        flex-direction: column;
        gap: 24px;
    }
    
    .philosophy-image {
        width: 100%;
        max-width: 346px;
        height: auto;
        aspect-ratio: 346 / 274;
    }
    
    .philosophy-text {
        width: 100%;
        max-width: 346px;
    }
    
    .philosophy-text h2 {
        font-size: 28px;
        line-height: 36px;
    }
}