/* =========================================
   MOBILE HERO
========================================= */

@media (max-width: 1024px) {

    .hero-section {

        min-height: auto;

        padding-top: 128px;

        padding-bottom: 88px;
    }

    .hero-content {

        padding-left: 0;
    }

    .hero-title {

        max-width: 100%;

        font-size: clamp(2.6rem, 7.6vw, 4.2rem);

        line-height: 1;

        letter-spacing: 0;
    }

    .hero-description {

        font-size: 17px;

        line-height: 1.8;
    }

    .hero-actions {

        flex-direction: column;

        align-items: stretch;

        margin-left: 2px;
    }

    .navbar-container {

        padding-inline: 20px;
    }


    .navbar-logo {

        flex-shrink: 0;

        font-size: 1.05rem;

        letter-spacing: 0.10em;
    }


    .mobile-menu-toggle {

        flex: 0 0 48px;
    }

    .services-grid {

        grid-template-columns: 1fr;
    }

    .service-card {

        min-height: 380px;

        height: auto;
    }


    .service-content {

        padding: 28px;
    }


    .service-reveal {

        opacity: 1;

        transform: none;
    }

    .section-heading h2 {

        font-size: 1.9rem;
    }

    .standards-section {

        padding: 92px 24px;
    }


    .standards-grid {

        grid-template-columns: 1fr;

        gap: 84px;

        margin-top: 72px;
    }


    .standards-section .section-heading h2 {

        font-size: 2rem;

        line-height: 1.2;
    }


    .standard-icon {

        width: 74px;

        height: 74px;

        margin-bottom: 26px;
    }


    .standard-icon .material-symbols-outlined {

        font-size: 42px;
    }


    .standard-item h3 {

        font-size: 1.7rem;
    }


    .standard-item p {

        font-size: 1rem;

        line-height: 1.8;
    }

    .brands-section {

        padding: 34px 0 38px;
    }


    .brands-heading {

        margin-bottom: 28px;
    }


    .brands-heading p {

        font-size: 0.72rem;

        letter-spacing: 0.16em;
    }


    .brands-track {

        gap: 64px;
    }


    .brands-track span {

        font-size: 1.35rem;
    }

    .blog-preview-section {

        padding: 84px 20px 96px;
    }


    .blog-preview-top {

        flex-direction: column;

        align-items: flex-start;

        margin-bottom: 42px;
    }


    .blog-preview-grid {

        grid-template-columns: 1fr;
    }


    .blog-card-image {

        height: 240px;
    }


    .blog-card h3 {

        font-size: 1.35rem;
    }

    .page-hero {

        min-height: 560px;

        padding-top: 118px;

        padding-bottom: 74px;
    }


    .compact-hero {

        min-height: 340px;
    }


    .product-hero,
    .contact-hero {

        min-height: 390px;
    }


    .page-hero-content h1 {

        font-size: 2.6rem;

        line-height: 1.08;

        letter-spacing: 0.05em;
    }


    .page-hero-content p {

        font-size: 0.96rem;
    }


    .service-detail-row,
    .service-detail-row-reverse {

        grid-template-columns: 1fr;

        gap: 44px;

        padding: 74px 20px;
    }


    .service-detail-row-reverse .service-detail-copy {

        order: 0;
    }


    .service-detail-media {

        display: none;
    }


    .service-detail-mobile-media {

        display: block;

        margin: 28px 0 32px;
    }


    .service-detail-copy h2 {

        font-size: 2rem;
    }


    .quote-section {

        padding: 82px 20px 94px;
    }


    .quote-form,
    .contact-panel,
    .booking-panel,
    .product-detail-panel {

        padding: 24px;
    }


    .form-grid,
    .product-spec-grid {

        grid-template-columns: 1fr;

        gap: 0;
    }


    .product-section {

        padding-block: 56px 28px;
    }


    .section-toolbar {

        align-items: flex-start;

        flex-direction: column;

        margin-bottom: 32px;
    }


    .product-category-grid {

        grid-template-columns: 1fr;
    }


    .product-category-card {

        height: 220px;
    }


    .product-grid {

        grid-template-columns: repeat(2, minmax(0, 1fr));
    }


    .product-card {

        min-height: 390px;

        padding: 20px;
    }


    .product-detail-grid {

        grid-template-columns: 1fr;

        gap: 32px;
    }


    .product-visual-large {

        height: 360px;
    }


    .product-detail-actions {

        flex-direction: column;

        align-items: stretch;
    }


    .blog-feature {

        min-height: 650px;

        padding: 126px 20px 48px;
    }


    .blog-feature-panel {

        padding: 28px;
    }


    .blog-feature-panel h1 {

        font-size: 2.2rem;
    }


    .blog-filter-inner {

        align-items: stretch;

        flex-direction: column;
    }


    .blog-search {

        width: 100%;
    }


    .blog-feed {

        padding-block: 64px 88px;
    }


    .blog-grid,
    .article-card-wide {

        grid-template-columns: 1fr;
    }


    .article-card-wide {

        grid-column: span 1;
    }


    .article-card-wide .article-image,
    .article-image {

        height: 260px;
    }


    .article-card-wide .article-copy,
    .article-copy {

        padding: 26px;
    }


    .article-modal-panel {

        padding: 32px 24px;
    }


    .about-story,
    .studio-grid,
    .values-section,
    .contact-layout {

        grid-template-columns: 1fr;
    }


    .about-story,
    .values-section {

        padding-block: 44px 78px;
    }


    .about-image-card {

        padding: 24px;
    }


    .studio-section {

        padding-block: 78px;
    }


    .studio-grid img {

        height: 300px;
    }


    .contact-layout {

        margin-top: -34px;

        padding-bottom: 82px;
    }


    .booking-panel {

        align-items: flex-start;

        flex-direction: column;
    }

}


@media (max-width: 1024px) {

    .mobile-menu {

        top: 80px;

        padding: 28px 24px 34px;
    }


    .about-hero {

        min-height: 440px;

        padding-bottom: 44px;
    }

}


@media (max-width: 700px) {

    .product-grid {

        grid-template-columns: 1fr;
    }


    .product-card {

        min-height: auto;
    }


    .blog-feature-panel h1,
    .page-hero-content h1 {

        font-size: 1.82rem;

        letter-spacing: 0.04em;
    }


    .hero-title {

        font-size: clamp(1.84rem, 7.5vw, 2.18rem);
    }


    .contact-hero .page-hero-content h1 {

        max-width: 320px;

        margin-inline: auto;

        line-height: 1.14;
    }


    .article-copy small {

        align-items: flex-start;

        flex-direction: column;
    }


    .whatsapp-float {

        right: 18px;

        bottom: 18px;

        width: 54px;

        height: 54px;
    }

}