/* =============================================================
   responsive.css — Mobile breakpoints only
   Desktop styles are untouched in their own CSS files.
   ============================================================= */

 @media (max-width: 1024px) {
    .callout__image img {
        height: 400px;
    }

    .callout__title {
        height: auto;
        max-width: 550px;
    }

    .contact__image img {
        height: 400px;
    }
}

@media (max-width: 768px) {
    /*---HOME: HERO SECTION---*/
    .hero__headline {
        font-size: clamp(2.8rem, 11vw, 4rem);
    }
 
    .hero__subtext {
        font-size: 0.9rem;
    }
 
    .hero__logo {
        width: 44px;
        top: 20px;
        right: 20px;
    }
 
    /*---HOME: SERVICES SECTION---*/
    .services {
        padding: 60px 24px;
    }
 
    .services__inner {
        padding: 0;
    }
 
    .services__grid {
        grid-template-columns: 1fr;
    }
 
    .services__extra {
        width: 100%;
    }
 
   /*---HOME: ABOUT SECTION---*/
    .about {
        padding: 60px 24px;
    }
 
    /*---HOME: CALLOUT SECTION---*/
    .callout {
        height: auto;
        min-height: 200px;
        padding: 40px 24px;
       
    }
 
    .callout__image img {
        height: 280px; 
    }

    .callout__title{
        font-size: clamp(2rem, 6vw, 4rem);
        max-width: 235px;
        line-height: 1.1;
    }
 
    /*---HOME: SERVICE AREA SECTION---*/
    .service__area {
        padding: 60px 24px;
    }
 
    .service__area__cities {
        grid-template-columns: 1fr;
    }
 
    /*---HOME: GALLERY SECTION---*/
    .gallery__item {
        height: 240px;
    }
 
    /*---HOME: CONTACT SECTION---*/
 
    .contact__image img{
        height: 230px;
    }
 
    /*---HOME: FOOTER---*/
    .footer__body {
        width: 100%;
    }
 
}