.portfolio-full .portfolio-filters {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        padding: 0 10px;
    }

    .portfolio-full .filter-btn {
        flex: 0 0 auto;
        padding: 9px 12px;
        font-size: 0.78rem;
        white-space: nowrap;
    }


/* MOBILE PORTFOLIO — preserve complete artwork */
@media screen and (max-width: 480px) {
    .portfolio-full .portfolio-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        justify-items: center;
    }

    .portfolio-full .portfolio-grid .portfolio-item {
        width: 100% !important;
        max-width: 360px;
        height: auto !important;
        overflow: visible !important;
        margin: 0 auto;
    }

    .portfolio-full .portfolio-grid .item-media {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        aspect-ratio: auto !important;
        overflow: visible !important;
    }

    .portfolio-full .portfolio-grid .item-media img {
        position: static !important;
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        aspect-ratio: auto !important;
        object-fit: contain !important;
        object-position: center !important;
        transform: none !important;
    }
}

/* ======================================================================
   MOBILE IMAGE-CROP FIXES — FULL PORTFOLIO + GENERATED PORTFOLIO CARDS
   Keep these rules at the very bottom so they override earlier page styles.
   ====================================================================== */
@media screen and (max-width: 640px) {
    /* Full portfolio grid */
    .portfolio-full .portfolio-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        justify-items: center;
        gap: 20px !important;
    }

    .portfolio-full .portfolio-item,
    .portfolio-full .portfolio-grid .portfolio-item,
    .portfolio-full .portfolio-static-generated,
    .portfolio-full .portfolio-original-card {
        width: 100% !important;
        max-width: 360px !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        aspect-ratio: auto !important;
        overflow: visible !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .portfolio-full .item-media,
    .portfolio-full .static-single-media,
    .portfolio-full .portfolio-static-generated .static-single-media,
    .portfolio-full .portfolio-original-card .static-single-media {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        aspect-ratio: auto !important;
        overflow: visible !important;
    }

    .portfolio-full .item-media img,
    .portfolio-full .static-single-media img,
    .portfolio-full .portfolio-static-generated img,
    .portfolio-full .portfolio-original-card img {
        position: static !important;
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        aspect-ratio: auto !important;
        object-fit: contain !important;
        object-position: center center !important;
        transform: none !important;
    }
}

@media screen and (max-width: 480px) {
    .portfolio-full .portfolio-grid .portfolio-item,
    .portfolio-full .portfolio-static-generated,
    .portfolio-full .portfolio-original-card {
        max-width: 340px !important;
    }
}

/* FINAL MOBILE HERO ALIGNMENT */
@media screen and (max-width: 768px) {
    .hero .container {
        align-items: center;
    }

    .hero-content {
        width: 100%;
        max-width: 600px;
        padding: 0 20px;
        margin: 0 auto;
        box-sizing: border-box;
        text-align: center;
    }

    .hero-content .hero-eyebrow {
        justify-content: center;
        text-align: center;
    }

    .hero-content h1 {
        width: 100%;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    .hero-content p {
        width: 100%;
        max-width: 480px;
        text-align: center;
        margin: 24px auto 32px;
    }

    .hero-content .hero-buttons {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 14px;
    }

    .hero-content .hero-buttons a,
    .hero-content .hero-buttons .btn {
        margin: 0 auto;
        max-width: 100%;
        box-sizing: border-box;
    }
}


/* MOBILE HERO — CENTER ALIGNMENT */
@media screen and (max-width: 768px) {
    .hero .hero-grid {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .hero .hero-content {
        width: 100%;
        max-width: 600px;
        margin: 0 auto;
        padding: 0 20px;
        box-sizing: border-box;
        text-align: center;
        align-items: center;
    }

    .hero .eyebrow {
        display: flex;
        justify-content: center;
        text-align: center;
        width: 100%;
    }

    .hero .hero-content h1,
    .hero .hero-content .hero-sub {
        width: 100%;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    .hero .hero-actions {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        gap: 14px;
    }

    .hero .hero-actions a {
        margin-left: auto;
        margin-right: auto;
    }

    .hero .hero-illustration {
        display: none;
    }
}

/* MOBILE CTA SECTION FIX */
@media screen and (max-width: 768px) {
    .cta-section {
        width: calc(100% - 32px);
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        padding: 48px 20px;
        box-sizing: border-box;
        text-align: center;
        overflow: hidden;
    }

    .cta-section h2 {
        width: 100%;
        max-width: 100%;
        text-align: center;
        overflow-wrap: break-word;
        margin-left: auto;
        margin-right: auto;
    }

    .cta-section .btn {
        display: flex;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin: 28px auto 0;
        padding: 16px 12px;
        box-sizing: border-box;
        justify-content: center;
        align-items: center;
        text-align: center;
        white-space: normal;
        overflow-wrap: anywhere;
        line-height: 1.5;
    }
}

/* MOBILE ABOUT PREVIEW — CENTER ALIGNMENT */
@media screen and (max-width: 640px) {
    .about-preview > .container {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .about-preview .about-preview-copy {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        padding: 0 20px;
        box-sizing: border-box;
        text-align: center;
    }

    .about-preview .about-preview-copy .eyebrow {
        display: flex;
        justify-content: center;
        text-align: center;
    }

    .about-preview .about-preview-copy h2,
    .about-preview .about-preview-copy p,
    .about-preview .about-preview-copy .pillar h4 {
        width: 100%;
        max-width: 100%;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        overflow-wrap: break-word;
    }

    .about-preview .about-preview-copy .pillars {
        width: 100%;
        text-align: center;
    }

    .about-preview .about-preview-copy .btn {
        display: flex;
        width: fit-content;
        max-width: 100%;
        margin: 28px auto 0 !important;
        justify-content: center;
        box-sizing: border-box;
    }
}

/* MOBILE PORTFOLIO CARD — ROUNDED CORNERS */
@media screen and (max-width: 640px) {
    .portfolio-full .portfolio-grid .portfolio-item {
        border-radius: 18px !important;
        overflow: hidden !important;
        background: #111 !important;
    }

    .portfolio-full .portfolio-grid .item-media {
        border-radius: 18px !important;
        overflow: hidden !important;
    }

    .portfolio-full .portfolio-grid .item-media img {
        display: block;
        width: 100%;
        height: auto;
        border-radius: 18px !important;
        object-fit: contain;
    }
}