/* Media queries for responsive design */

@media (max-width: 1024px) {
    .services-grid {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }

    .process-board {
        gap: 20px;
    }
}

@media (max-width: 1100px) {

    /* Process section - Ball and cards */
    .process-board {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        /* Cards pushed to the right */
        gap: 60px;
        margin-top: 60px;
        position: relative;
    }

    .process-card {
        width: 100%;
        max-width: calc(100% - 60px);
        /* Leave room for the line on the left */
        margin: 0;
        /* Clear grid margins if any */
    }

    .process-track-line {
        top: 0;
        bottom: 0;
        left: 20px;
        /* Position line on the left */
        width: 2px;
        height: 100%;
        background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.2) 15%, rgba(255, 255, 255, 0.2) 85%, transparent);
        transform: none;
        /* remove center translation */
    }
}

@media (max-width: 768px) {

    /* General section tweaks */
    .services,
    .process,
    .about {
        padding: 80px 5%;
    }

    .proof {
        padding: 100px 5%;
    }

    /* Header adjustments */
    .header {
        padding: 15px 20px;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 15px;
    }

    .logo img {
        width: 100px;
    }

    .nav {
        order: 3;
        width: 100%;
        display: flex;
        justify-content: center;
        gap: 15px;
    }

    .nav a {
        margin: 0;
        font-size: 15px;
    }

    /* Hero */
    .hero {
        padding: 0 5%;
        text-align: center;
    }

    .hero-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .hero-content h1 {
        font-size: clamp(32px, 8vw, 48px);
    }

    /* Proof Section - Signature */
    .proof-inner {
        grid-template-columns: 1fr;
        gap: 50px;
        text-align: center;
    }

    .proof-content {
        max-width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .proof-tags {
        justify-content: center;
    }

    .proof-art {
        justify-self: center;
        max-width: 100%;
        width: 100%;
        padding: 0 10px;
    }
}

@media (max-width: 480px) {
    .header {
        padding: 12px 15px;
    }

    .services,
    .process,
    .about {
        padding: 60px 5%;
    }

    .proof {
        padding: 80px 5%;
    }

    .hero-content h1 {
        font-size: clamp(28px, 9vw, 36px);
    }

    .about-inner {
        gap: 40px;
        text-align: center;
    }

    .about-text p {
        margin-left: auto;
        margin-right: auto;
    }

    .contact-links {
        flex-direction: column;
    }

    .contact-links a {
        text-align: center;
    }
}