/* ================================================
   GENTAGLOW – responsive.css
   ================================================ */

@media (max-width: 1100px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 900px) {
    section {
        padding: 80px 28px;
    }

    nav {
        padding: 14px 28px;
    }

    nav.scrolled {
        padding: 10px 28px;
    }

    .nav-links {
        gap: 20px;
    }

    .nav-links li:not(.nav-logo-item) a {
        font-size: 10px;
    }

    .about-wrapper {
        grid-template-columns: 1fr;
        grid-template-areas:
            "heading"
            "photo"
            "body";
        gap: 24px;
        text-align: center;
    }

    .about-heading {
        text-align: center;
    }

    #about .eyebrow,
    #about .section-title,
    #about .gold-divider {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    #about .section-lead {
        text-align: center;
        max-width: 480px;
        margin: 0 auto 8px;
    }

    .about-visual {
        height: 200px;
        width: 200px;
        border-radius: 50%;
        margin: 0 auto;
    }

    .price-card {
        min-width: 250px;
    }

    .gallery-grid {
        columns: 2;
    }

    .reviews-track-wrapper {
        margin: 0 -28px;
    }

    .booking-form {
        padding: 32px 24px;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .nav-links {
        display: none;
    }

    .nav-cta {
        display: none;
    }

    nav {
        justify-content: center;
    }

    .nav-logo-left {
        height: 150px;
    }

    .hero-content {
        margin-top: -70px;
    }

    .hero-title {
        font-size: clamp(64px, 18vw, 100px);
    }

    section {
        padding: 56px 20px;
        scroll-margin-top: 140px;
    }

    .eyebrow {
        font-size: 10px;
        letter-spacing: 0.2em;
        margin-bottom: 10px;
    }

    .section-title {
        font-size: clamp(30px, 9vw, 40px);
        margin-bottom: 14px;
    }

    .gold-divider {
        margin-bottom: 14px;
    }

    .about-features {
        gap: 12px;
        margin-top: 24px;
    }

    .about-feature {
        padding: 18px 16px;
    }

    .feature-icon {
        font-size: 20px;
        margin-bottom: 6px;
    }

    .feature-title {
        font-size: 13px;
    }

    .feature-desc {
        font-size: 11px;
    }

    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        margin-top: 32px;
    }

    .service-card {
        padding: 22px 14px;
    }

    .service-icon {
        width: 46px;
        height: 46px;
        font-size: 20px;
        margin-bottom: 12px;
    }

    .service-title {
        font-size: 14px;
        margin-bottom: 6px;
    }

    .service-desc {
        font-size: 11px;
        line-height: 1.5;
    }

    .gallery-grid {
        columns: unset;
        display: flex;
        gap: 12px;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        scroll-behavior: smooth;
        cursor: grab;
        -webkit-user-select: none;
        user-select: none;
        -ms-overflow-style: none;
        scrollbar-width: none;
        padding: 0 16%;
        max-width: 100%;
        margin: 32px auto 0;
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
                mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
    }

    .gallery-grid::-webkit-scrollbar {
        display: none;
    }

    .gallery-grid.dragging {
        cursor: grabbing;
        scroll-behavior: auto;
        scroll-snap-type: none;
    }

    .gallery-item {
        flex: 0 0 auto;
        width: 68%;
        aspect-ratio: 4 / 5;
        margin-bottom: 0;
        scroll-snap-align: center;
    }

    .gallery-item .gallery-img {
        width: 100%;
        height: 100%;
    }

    .price-card {
        min-width: 220px;
        padding: 24px 20px;
    }

    .booking-actions {
        flex-direction: column;
        align-items: center;
    }

    .booking-btn {
        width: 100%;
        justify-content: center;
    }

    .about-collab {
        padding: 16px 20px;
        gap: 10px;
    }

    .about-collab-title {
        font-size: 11px;
    }

    .about-collab-brands {
        gap: 12px;
    }

    .about-collab-logo {
        height: 56px;
    }

    .about-collab-logo-gg {
        height: 90px;
    }

    .about-collab-x {
        font-size: 12px;
    }

    .about-collab-services {
        font-size: 11px;
        gap: 6px;
        text-align: center;
        flex-wrap: wrap;
        justify-content: center;
    }

    footer {
        padding: 48px 28px 28px;
    }
}