/* === PROJECT SECTIONS SHARED === */
.projects-section {
    background-color: var(--bg-white);
    padding: 8rem var(--padding-page) 10rem;
    position: relative;
    z-index: 5;
}

.projects-header {
    text-align: center;
    margin-bottom: 6rem;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.projects-title {
    font-family: 'Inter', sans-serif;
    font-size: 3.5rem;
    font-weight: 500;
    color: #121212;
    letter-spacing: -2px;
    margin-top: 1rem;
    line-height: 1;
}

.sub-header {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #888;
    margin-bottom: 1rem;
    display: block;
}


/* =========================================
   HOMEPAGE STYLE: STACKING CARDS
   (Scoped to .projects-stack container)
   ========================================= */

.projects-stack {
    display: flex;
    flex-direction: column;
    gap: 5vh;
    max-width: var(--container-width);
    margin: 0 auto;
}

.projects-stack .project-card {
    position: sticky;
    top: 13vh;
    height: 70vh;
    background-color: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    transform-origin: center top;
    transition: transform 0.3s ease-out;
}

/* Stepped Stacking creates a deck effect */
.projects-stack .project-card:nth-child(1) {
    top: 13vh;
}

.projects-stack .project-card:nth-child(2) {
    top: 15vh;
}

.projects-stack .project-card:nth-child(3) {
    top: 17vh;
}

.projects-stack .project-card:nth-child(4) {
    top: 19vh;
}

.projects-stack .project-card:nth-child(5) {
    top: 21vh;
}

.projects-stack .project-inner {
    width: 100%;
    height: 100%;
    position: relative;
    display: grid;
    grid-template-rows: 1fr auto;
}

.projects-stack .project-image {
    width: 100%;
    height: 100%;
    position: relative;
    background-color: #f4f4f4;
    padding: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.projects-stack .project-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    border-radius: 8px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
}

/* Mockup Browser Bar (Homepage Specific) */
.browser-chrome {
    width: 100%;
    max-width: 98%;
    height: 100%;
    max-height: 96%;
    display: flex;
    flex-direction: column;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.browser-bar {
    height: 30px;
    background: #e5e5e5;
    display: flex;
    align-items: center;
    padding: 0 1rem;
    gap: 6px;
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ccc;
}

.dot.red {
    background: #ff5f56;
}

.dot.yellow {
    background: #ffbd2e;
}

.dot.green {
    background: #27c93f;
}

.browser-content {
    flex: 1;
    overflow: hidden;
}

.browser-content img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.projects-stack .project-info {
    padding: 2rem 3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;
}

.projects-stack .project-info-text h3 {
    font-size: 1.5rem;
    color: #1a1a1a;
    margin-bottom: 0.5rem;
}

.projects-stack .project-info-text p {
    color: #666;
    font-size: 0.9rem;
}

.projects-stack .project-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-decoration: none;
    transition: transform 0.3s;
}

.projects-stack .project-btn:hover {
    transform: rotate(45deg);
}

/* Responsive for Stack */
@media (max-width: 768px) {
    .projects-stack .project-card {
        top: 100px;
        height: 60vh;
    }

    .projects-stack .project-image {
        padding: 1rem;
    }
}


/* =========================================
   PORTFOLIO PAGE STYLE: GRID VIEW
   (Scoped to .projects-grid container)
   ========================================= */

.projects-filters {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 1rem;
}

.filter-btn {
    padding: 12px 24px;
    background-color: var(--color-gray-100);
    border: none;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-dark);
    cursor: pointer;
    transition: all 0.3s ease;
}

.filter-btn:hover,
.filter-btn.active {
    background-color: var(--text-dark);
    color: var(--text-white);
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    max-width: var(--container-width);
    margin: 0 auto;
}

.projects-grid .project-card {
    position: relative;
    background-color: var(--color-gray-50);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform 0.3s ease;
    /* Reset sticky props just in case */
    top: auto;
    height: auto;
    border-radius: 0;
    box-shadow: none;
}

.projects-grid .project-card:hover {
    transform: translateY(-5px);
}

.projects-grid .project-image {
    width: 100%;
    aspect-ratio: 1 / 1.1;
    position: relative;
    overflow: hidden;
    background: none;
    /* Reset */
    padding: 0;
    /* Reset */
}

.projects-grid .project-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
    border-radius: 0;
    /* Reset */
    box-shadow: none;
    /* Reset */
}

/* Specific styling for Logos in Grid */
.projects-grid .project-image img.project-logo-img {
    object-fit: contain;
    padding: 3rem;
    /* Add breathing room for logos */
    filter: grayscale(100%);
    /* Optional: keep them uniform until hover? Or just keep original. User said "same as partners" so maybe? Let's stick to clean logos first. */
    /* Let's actually NOT filter these by default, usually project thumbnails should be clear. 
       But to match the "clean" aesthetic, maybe subtle grayscale? 
       Let's stick to NO filter for main project grid, just clean display. */
    filter: none;
}

.projects-grid .project-card:hover .project-image img {
    transform: scale(1.05);
}

/* New Info Bar Style for Grid */
.project-info-bar {
    background: white;
    padding: 1.5rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.info-left {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.project-year {
    font-size: 0.8rem;
    color: #888;
    font-weight: 500;
}

.project-name {
    font-family: 'Inter', sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: #1a1a1a;
}

.project-arrow {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: transform 0.3s ease, background-color 0.3s;
}

.projects-grid .project-card:hover .project-arrow {
    transform: rotate(45deg);
    background-color: #333;
}

/* Responsive for Grid */
@media (max-width: 900px) {
    .projects-grid {
        grid-template-columns: 1fr;
    }
}

/* === SERVICE MODAL (Copied for Portfolio) === */
.service-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 2000;
    /* Above menu */
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.4s ease, visibility 0.4s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.service-modal.active {
    visibility: visible;
    opacity: 1;
}

.modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
    z-index: 1;
}

.service-modal-content {
    position: relative;
    z-index: 2;
    background: #fff;
    width: 95%;
    /* Increased from 90% */
    max-width: 1400px;
    /* Increased from 1200px */
    height: 85vh;
    border-radius: 20px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 40% 60%;
    box-shadow: 0 50px 100px rgba(0, 0, 0, 0.3);
    transform: scale(0.85);
    /* Start smaller */
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.service-modal.active .service-modal-content {
    transform: scale(0.9);
    /* "Zoomed out" effect instead of 1 */
}

.close-modal-btn {
    position: absolute;
    top: 2rem;
    right: 2rem;
    width: 40px;
    height: 40px;
    background: #f5f5f5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: background 0.3s;
}

.close-modal-btn:hover {
    background: #e0e0e0;
}

.close-modal-btn span {
    position: absolute;
    width: 20px;
    height: 2px;
    background: #000;
    transform: rotate(45deg);
}

.close-modal-btn span:nth-child(2) {
    transform: rotate(-45deg);
}

.modal-image-col {
    background: #f0f0f0;
    width: 100%;
    height: 100%;
}

.modal-image-col img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.modal-text-col {
    padding: 2rem 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow-y: auto;
}

.modal-label {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 2px;
    color: #999;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.modal-title {
    font-family: 'Inter', sans-serif;
    font-size: 3rem;
    font-weight: 500;
    line-height: 1.1;
    color: #121212;
    letter-spacing: -1px;
    margin-bottom: 2rem;
}

.modal-divider {
    width: 50px;
    height: 2px;
    background: #000;
    margin-bottom: 2rem;
}

.modal-desc {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #444;
    margin-bottom: 3rem;
    max-width: 100%;
    /* Relax width for grid */
}

/* Modal Points Grid System */
.modal-points {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 2rem;
    list-style: none;
    /* Remove default bullets */
    padding: 0;
    margin: 0;
}

.modal-points li {
    position: relative;
    padding-left: 1.5rem;
    font-weight: 500;
    color: #333;
}

.modal-points li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.6em;
    /* Center vertically relative to line-height */
    width: 6px;
    height: 6px;
    background-color: #000;
    border-radius: 50%;
}



/* Modal Responsive */
@media (max-width: 900px) {
    .service-modal-content {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        height: auto;
        min-height: 60vh;
        max-height: 90vh;
        overflow-y: auto;
    }

    .modal-image-col {
        height: 300px;
        order: 1;
        /* Image first */
    }

    .modal-text-col {
        padding: 3rem 2rem;
        order: 2;
        /* Reorder text */
    }

    .modal-title {
        font-size: 2rem;
    }
}


/* === PARTNERS MARQUEE === */
.partners-section {
    padding: 6rem 0;
    background: #fafafa;
    overflow: hidden;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.marquee-container {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.marquee-custom {
    display: flex;
    width: max-content;
    animation: marquee-scroll 30s linear infinite;
    align-items: center;
    /* Center images vertically */
}

img.partner-logo {
    height: 60px;
    /* Fixed height for consistency */
    width: auto;
    margin: 0 4rem;
    /* Spacing */
    object-fit: contain;
    filter: grayscale(100%) opacity(0.6);
    /* Muted by default */
    transition: filter 0.3s ease, transform 0.3s ease;
}

img.partner-logo:hover {
    filter: grayscale(0%) opacity(1);
    /* Full color on hover */
    transform: scale(1.1);
}

@keyframes marquee-scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}