/* =========================================================
   A&S AUTOMATIONS — PROJECT SHOWCASE
   Visual language matched to approved ABOUT page
   Content / PHP structure intentionally unchanged
   ========================================================= */


/* =========================================================
   PROJECT ROOT
   ========================================================= */

.project-page{
    --ag:#3dcd58;
    --agd:#23963b;
    --ai:#111416;
    --am:#626b70;
    --al:#dfe4e6;
    --as:#f4f6f6;

    background:#fff;
    color:var(--ai);
}

.project-page *{
    box-sizing:border-box;
}


/* =========================================================
   IMPORTANT:
   DO NOT OVERRIDE THE GLOBAL .container
   The About page uses the site's existing container system.
   ========================================================= */


/* =========================================================
   HERO
   Matched to About page:
   About = 555px desktop
   ========================================================= */

.project-page .hero-banner{
    min-height:555px;
    position:relative;
    display:flex;
    align-items:center;
    overflow:hidden;

    padding:0;

    background-size:cover;
    background-position:center;

    color:#fff;
    text-align:left;
}

.project-page .hero-banner::before{
    content:"";
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(5,9,10,.93) 0%,
            rgba(7,11,12,.78) 43%,
            rgba(7,11,12,.32) 78%,
            rgba(7,11,12,.20) 100%
        );

    z-index:0;
}

.project-page .hero-banner::after{
    content:"";
    position:absolute;
    inset:0;

    border-bottom:1px solid rgba(255,255,255,.08);

    pointer-events:none;
}

.project-page .hero-banner .container{
    position:relative;
    z-index:2;
}


/* =========================================================
   HERO CONTENT
   ========================================================= */

.project-page .hero-banner .content{
    max-width:790px;
    padding:85px 0 90px;

    color:#fff;
    text-align:left !important;
}

.project-page .hero-banner h1{
    font-size:clamp(42px,5.3vw,70px);
    line-height:1.02;
    letter-spacing:-.04em;

    margin:0 0 23px;

    font-weight:800;

    max-width:760px;

    color:#fff;

    text-align:left;

    text-shadow:none;
}

.project-page .hero-banner h1::before{
    content:"";

    display:block;

    width:36px;
    height:2px;

    background:var(--ag);

    margin-bottom:20px;
}


/* =========================================================
   HERO DESCRIPTION
   ========================================================= */

.project-page .hero-banner .banner-description{
    max-width:660px;

    color:#e1e7e8;

    font-size:18px;
    line-height:1.65;

    margin:0 0 30px;

    font-weight:400;

    text-align:left;

    text-shadow:none;
}


/* =========================================================
   HERO BUTTON
   Matched to About green button
   ========================================================= */

.project-page .hero-banner .button-ear{
    display:flex;
    justify-content:flex-start;

    margin-top:0 !important;
}

.project-page .hero-banner .button-ear a{
    display:inline-flex;
    text-decoration:none;
}

.project-page .hero-banner .button-ear button.top{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:48px;

    padding:0 21px;

    border:0;
    border-radius:0;

    background:var(--ag);
    color:#08220d;

    font-size:12px;
    font-weight:900;

    transition:.2s;

    box-shadow:none;
}

.project-page .hero-banner .button-ear button.top:hover{
    background:#2fb94b;
    color:#06170a;

    transform:translateY(-1px);
}


/* =========================================================
   INTRODUCTION SECTION
   Matched to About section spacing
   ========================================================= */

.project-page .section-intro{
    padding:88px 0;

    background:#fff;

    text-align:left;
}

.project-page .section-intro .section-title{
    max-width:820px;

    font-size:clamp(32px,4vw,51px);
    line-height:1.08;
    letter-spacing:-.03em;

    margin:9px 0 15px;

    font-weight:800;

    color:var(--ai);

    text-align:left;
}

.project-page .section-intro .section-title span{
    color:var(--agd) !important;
}

.project-page .section-intro .section-description{
    max-width:820px;

    font-size:16px;
    line-height:1.7;

    color:var(--am);

    margin:0;

    text-align:left;
}


/* =========================================================
   PROJECT GRID SECTION
   ========================================================= */

.project-page .projects-grid-section{
    padding:0 0 88px;

    background:#fff;
}

.project-page .projects-grid-section .project-grid{
    display:grid;

    grid-template-columns:1fr;

    gap:18px;
}


/* =========================================================
   PROJECT CARD
   Matched to About capability/card language
   ========================================================= */

.project-page .project-item-wrapper{
    background:#fff;

    border:1px solid var(--al);

    border-radius:0;

    overflow:hidden;

    box-shadow:none;

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}

.project-page .project-item-wrapper:hover{
    transform:translateY(-3px);

    border-color:#acd6b4;

    box-shadow:0 18px 42px rgba(18,30,22,.09);
}

.project-page .project-item-wrapper.active{
    border-color:#acd6b4;

    box-shadow:0 18px 42px rgba(18,30,22,.09);
}


/* =========================================================
   PROJECT SUMMARY
   ========================================================= */

.project-page .project-summary-card{
    display:grid;

    grid-template-columns:1.03fr .97fr;

    min-height:320px;

    cursor:pointer;

    transition:none;
}

.project-page .project-summary-card:hover{
    transform:none;
    box-shadow:none;
}


/* =========================================================
   PROJECT IMAGE
   ========================================================= */

.project-page .project-summary-card img{
    width:100%;
    height:100%;

    min-height:320px;

    object-fit:cover;

    display:block;

    border-radius:0;

    transition:transform .45s ease;
}

.project-page .project-item-wrapper:hover
.project-summary-card img{
    transform:scale(1.025);
}


/* =========================================================
   PROJECT TEXT AREA
   ========================================================= */

.project-page .project-summary-card .summary-content{
    width:auto;

    padding:38px 40px;

    display:flex;
    flex-direction:column;

    min-width:0;

    position:relative;

    background:#fff;
}

.project-page .summary-content h4{
    font-size:25px;
    line-height:1.2;

    letter-spacing:-.025em;

    font-weight:800;

    color:var(--ai);

    margin:0 50px 10px 0;
}

.project-page .summary-content h3{
    font-size:14px;
    line-height:1.4;

    font-weight:800;

    color:var(--agd);

    margin:0 0 14px;
}

.project-page .summary-content .project-location{
    font-size:13px;
    line-height:1.5;

    font-weight:600;

    color:#4e575c;

    margin:0 0 15px;

    display:flex;
    align-items:center;
}

.project-page .summary-content .project-location i{
    margin-right:8px;

    color:var(--agd);

    font-size:14px;
}

.project-page .summary-content p.description-short{
    font-size:14px;
    line-height:1.75;

    color:var(--am);

    margin:0 0 20px;

    flex-grow:1;
}

.project-page .summary-content .project-duration{
    font-style:normal;

    color:#7a8388;

    font-size:11px;

    text-transform:uppercase;

    letter-spacing:.08em;

    margin:0;
}


/* =========================================================
   TOGGLE ICON
   ========================================================= */

.project-page .summary-content .toggle-icon{
    position:absolute;

    right:28px;
    top:28px;

    width:36px;
    height:36px;

    display:grid;
    place-items:center;

    border:1px solid var(--al);

    color:var(--agd);

    background:#fff;

    font-size:13px;

    transition:
        transform .25s ease,
        border-color .2s ease,
        background .2s ease;
}

.project-page .project-item-wrapper:hover
.summary-content .toggle-icon{
    border-color:#acd6b4;

    background:#f2faf3;
}

.project-page .project-item-wrapper.active
.summary-content .toggle-icon{
    transform:rotate(180deg);

    background:#e8f8eb;

    border-color:#a9d8b1;
}


/* =========================================================
   FULL PROJECT DETAILS
   ========================================================= */

.project-page .project-full-details{
    max-height:0;

    overflow:hidden;

    transition:
        max-height .7s ease,
        padding .45s ease,
        border-top .25s ease;

    background:#fbfcfc;

    border-top:1px solid transparent;
}

.project-page .project-item-wrapper.active
.project-full-details{
    max-height:10000px;

    padding:48px 44px;

    border-top:1px solid var(--al);
}


/* =========================================================
   DETAIL SECTIONS
   ========================================================= */

.project-page .detail-section{
    margin-bottom:54px;
}

.project-page .detail-section:last-child{
    margin-bottom:0;
}

.project-page .detail-section h2{
    font-size:30px;
    line-height:1.15;

    letter-spacing:-.025em;

    font-weight:800;

    color:var(--ai);

    margin:0 0 20px;

    text-align:left;

    display:flex;
    align-items:center;

    gap:13px;
}

.project-page .detail-section h2::before{
    content:"";

    width:28px;
    height:2px;

    background:var(--ag);

    flex:0 0 auto;
}

.project-page .detail-section p{
    font-size:15px;
    line-height:1.85;

    color:#596268;

    max-width:980px;

    margin:0 0 18px;

    text-align:left;
}


/* =========================================================
   HIGHLIGHTS
   ========================================================= */

.project-page .highlights-grid{
    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:18px;

    max-width:none;

    margin:26px 0 0;
}

.project-page .highlight-item{
    background:#fff;

    padding:28px 25px 25px;

    border:1px solid var(--al);

    border-radius:0;

    box-shadow:none;

    text-align:left;

    transition:.25s;
}

.project-page .highlight-item:hover{
    border-color:#acd6b4;

    transform:translateY(-3px);

    box-shadow:0 12px 28px rgba(18,30,22,.06);
}

.project-page .highlight-item i{
    font-size:27px;

    color:var(--agd);

    margin-bottom:18px;
}

.project-page .highlight-item h3{
    font-size:17px;

    line-height:1.3;

    font-weight:800;

    color:var(--ai);

    margin:0 0 9px;
}

.project-page .highlight-item p{
    font-size:13px;

    line-height:1.7;

    color:var(--am);

    margin:0 0 7px;

    text-align:left;
}

.project-page .highlight-item p:last-child{
    margin-bottom:0;
}


/* =========================================================
   GALLERY
   ========================================================= */

.project-page .gallery-grid{
    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:18px;

    margin-top:24px;
}

.project-page .gallery-item{
    overflow:hidden;

    border-radius:0;

    box-shadow:none;

    border:1px solid var(--al);

    background:#fff;
}

.project-page .gallery-item img{
    width:100%;

    height:260px;

    object-fit:cover;

    display:block;

    border-radius:0;

    transition:transform .45s ease;
}

.project-page .gallery-item:hover img{
    transform:scale(1.025);
}


/* =========================================================
   CTA
   Matched to About dark CTA language
   ========================================================= */

.project-page .section-cta{
    text-align:left;

    padding:78px 0;

    background:#111416;

    border-top:0;

    color:#fff;
}

.project-page .section-cta h2{
    font-size:clamp(31px,4vw,48px);

    line-height:1.05;

    letter-spacing:-.03em;

    font-weight:800;

    color:#fff;

    margin:7px 0 8px;
}

.project-page .section-cta p{
    font-size:14px;

    line-height:1.7;

    color:#b8c1c4;

    margin:0 0 28px;

    max-width:760px;
}

.project-page .section-cta .button-ear{
    display:flex;

    justify-content:flex-start;
}

.project-page .section-cta .button-ear button.top{
    background:var(--ag);

    color:#08220d;

    min-height:50px;

    padding:0 22px;

    font-size:12px;

    font-weight:900;

    border:0;

    border-radius:0;
}

.project-page .section-cta .button-ear button.top:hover{
    background:#2fb94b;

    color:#06170a;
}


/* =========================================================
   TABLET
   Matches About <=1000px
   ========================================================= */

@media(max-width:1000px){

    .project-page .hero-banner{
        min-height:560px;
    }

    .project-page .hero-banner .content{
        padding:72px 0 85px;
    }

    .project-page .hero-banner h1{
        font-size:50px;
    }

    .project-page .project-summary-card{
        grid-template-columns:1fr;
    }

    .project-page .project-summary-card img{
        height:380px;
        min-height:380px;
    }

    .project-page .highlights-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .project-page .gallery-grid{
        grid-template-columns:repeat(2,1fr);
    }
}


/* =========================================================
   MOBILE
   Matches About <=760px
   ========================================================= */

@media(max-width:760px){

    .project-page .hero-banner{
        min-height:620px;
    }

    .project-page .hero-banner .content{
        padding:72px 0 85px;
    }

    .project-page .hero-banner h1{
        font-size:clamp(40px,10vw,56px);
    }

    .project-page .hero-banner .banner-description{
        font-size:15.5px;
    }

    .project-page .section-intro{
        padding:68px 0;
    }

    .project-page .section-intro .section-title{
        font-size:35px;
    }

    .project-page .section-intro .section-description{
        font-size:15px;
    }

    .project-page .projects-grid-section{
        padding:0 0 68px;
    }

    .project-page .project-summary-card{
        grid-template-columns:1fr;
    }

    .project-page .project-summary-card img{
        height:350px;
        min-height:350px;
    }

    .project-page .project-summary-card .summary-content{
        padding:28px 25px 30px;
    }

    .project-page .summary-content h4{
        font-size:22px;

        margin-right:40px;
    }

    .project-page .summary-content .toggle-icon{
        right:22px;
        top:25px;
    }

    .project-page .project-item-wrapper.active
    .project-full-details{
        padding:38px 25px;
    }

    .project-page .detail-section h2{
        font-size:25px;
    }

    .project-page .detail-section p{
        font-size:14px;
    }

    .project-page .highlights-grid,
    .project-page .gallery-grid{
        grid-template-columns:1fr;
    }

    .project-page .gallery-item img{
        height:290px;
    }

    .project-page .section-cta{
        padding:65px 0;
    }

    .project-page .section-cta h2{
        font-size:36px;
    }
}


/* =========================================================
   SMALL MOBILE
   Matches About <=480px
   ========================================================= */

@media(max-width:480px){

    .project-page .hero-banner{
        min-height:660px;
    }

    .project-page .hero-banner h1{
        font-size:41px;
    }

    .project-page .hero-banner .banner-description{
        font-size:15px;
    }

    .project-page .hero-banner .button-ear button.top{
        width:auto;
    }

    .project-page .section-intro{
        padding:60px 0 48px;
    }

    .project-page .section-intro .section-title{
        font-size:34px;
    }

    .project-page .project-summary-card img{
        height:290px;
        min-height:290px;
    }

    .project-page .project-summary-card .summary-content{
        padding:25px 22px 28px;
    }

    .project-page .summary-content h4{
        font-size:21px;
    }

    .project-page .project-item-wrapper.active
    .project-full-details{
        padding:32px 22px;
    }

    .project-page .gallery-item img{
        height:240px;
    }

    .project-page .section-cta{
        padding:55px 0;
    }

    .project-page .section-cta h2{
        font-size:34px;
    }
}