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

.project{

    position: relative;
    overflow: hidden;

    padding: 160px 0 120px;

    background-image: url("../images/project-background.webp");
    background-repeat: no-repeat;

    background-size: 100% auto;
    background-position: center 0px;

}.project::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        to top,
        rgba(5,10,20,.92) 0%,
        rgba(5,10,20,.82) 28%,
        rgba(5,10,20,.45) 55%,
        rgba(5,10,20,.12) 78%,
        transparent 100%
    );

    z-index:0;

    pointer-events:none;
}.project::after{

    content:"";

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    height:220px;

    background:linear-gradient(
        to bottom,
        rgba(5,10,20,0) 0%,
        rgba(5,10,20,.18) 30%,
        rgba(5,10,20,.55) 70%,
        #050A14 100%
    );

    pointer-events:none;

    z-index:1;

}.project > .container{

    position:relative;

    z-index:2;

}/* ================= TITLE ================= */

.project-subtitle{

    display:inline-block;

    margin-bottom:18px;

    color:#167BFF;

    font-size:16px;

    letter-spacing:2px;

    text-transform:uppercase;

    font-weight:700;

}.project h1{

    max-width:1180px;

    font-size:44px;

    line-height:1.22;

    margin-bottom:45px;

}/* ================= TOP BLOCK ================= */

.project-main{

    display:grid;

    grid-template-columns:1.45fr 1fr;

    gap:32px;

    align-items:start;

    margin-bottom:80px;

}/* ================= IMAGE ================= */

.project-image{

    position:relative;

    overflow:hidden;

    border-radius:24px;

    background:#0D1626;

    height:480px;

    width:100%;

    border:1px solid rgba(120,185,255,.25);

    box-shadow:
        0 0 0 1px rgba(255,255,255,.04),
        0 0 30px rgba(22,123,255,.12),
        0 20px 50px rgba(0,0,0,.28);

    transition:
        box-shadow .45s ease,
        border-color .45s ease;

}.project-image:hover{

    border-color: rgba(120,185,255,.25);

    box-shadow:
        0 0 0 1px rgba(255,255,255,.04),
        0 0 45px rgba(22,123,255,.28),
        0 20px 50px rgba(0,0,0,.28);

}.project-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center;

    display:block;

    transition:transform .8s ease;

}/* no zoom on the main photo — it drew attention away from the
   content and cropped the frame on hover */
.project-image:hover img{

    transform:none;

}.project-image::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        to top,
        rgba(5,10,20,.35),
        rgba(5,10,20,0)
    );

    }/* ================= INFO ================= */

.project-info{

    background:#0F1728;

    border:1px solid rgba(255,255,255,.06);

    border-radius:24px;

    padding:42px;

    width:100%;

    align-self:start;

    box-shadow:0 20px 50px rgba(0,0,0,.30);

    height:480px;

display:flex;

flex-direction:column;

justify-content:center;

}/* ================= ROW ================= */

.info-row{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:25px;

    padding:18px 0;

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

}.info-row:last-child{

    border-bottom:none;

}.info-row span{

    color:#8D9AB2;

    font-size:15px;

    white-space:nowrap;

}.info-row strong{

    color:#fff;

    text-align:right;

    font-weight:600;

    line-height:1.7;

}/* ================= DESCRIPTION ================= */

.project-content{

    display:grid;

    grid-template-columns:1.45fr 1fr;

    gap:32px;

    margin-top:32px;

    align-items:start;

}.project-about h2{

    font-size:42px;

    margin-bottom:26px;

    color:#fff;

}.project-about p{

    color:#C7D1DE;

    font-size:18px;

    line-height:1.9;

    margin-bottom:26px;

    max-width:780px;

}.project-work{

    padding:0;

    background:none;

    border:none;

    box-shadow:none;

}.project-work h2{

    font-size:42px;

    margin-bottom:26px;

    color:#fff;

}.project-work h2::after{

    content:"";

    display:block;

    width:60px;

    height:3px;

    margin-top:14px;

    border-radius:10px;

    background:#167BFF;

}.project-work ul{

    list-style:none;

    padding:0;

    margin:0;

}.project-work li::before{

    content:"✓";

    position:absolute;

    left:0;

    top:0;

    color:#167BFF;

    font-weight:700;

}.project-work li{

    position:relative;

    padding-left:34px;

    margin-bottom:18px;

    color:#fff;

    font-size:18px;

    line-height:1.7;

}/* ================= HOVER ================= */

.project-info{

    transition:.35s;

}/* Card border/shadow lift on hover; vertical movement disabled
   so the card stays stationary. */
.project-info:hover{

    transform:none;

    border-color:rgba(22,123,255,.4);

    box-shadow:0 20px 50px rgba(0,0,0,.25);

}.project-about{

    padding:0;

}.project-about h2::after{

    content:"";

    display:block;

    width:60px;

    height:3px;

    margin-top:14px;

    border-radius:10px;

    background:#167BFF;

}/* =========================================================
   PROJECT CONTENT BEFORE FOOTER
   Нижние скругления должны быть видны поверх футера.
========================================================= */

.project{
    position: relative;
    z-index: 2;
    border-radius: 0 0 64px 64px;
    overflow: hidden;
    margin-bottom: -64px;
    padding-bottom: 184px;
}/* =========================================================
   PROJECT — FOOTER ROUNDING FIX
   The section's background is a non-repeating image, so the
   lower part had no fill and the rounded corners were
   invisible. A base colour under the image gives the curve
   something to cut, matching the service pages.
========================================================= */

.project{
    background-color: #050A14;
    overflow: hidden !important;
}/* =========================================================
   PROJECT GALLERY
   4-column grid, 200px row unit. Landscape shots span 2x2,
   portrait shots 1x2, so 4 landscapes + 4 portraits pack into
   three even bands with no holes.
========================================================= */

.project-gallery{
    margin-top: 80px;
}.project-gallery h2{
    margin-bottom: 34px;
}.project-gallery-grid{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 200px;
    grid-auto-flow: dense;
    gap: 16px;
}.pg-item{
    position: relative;
    grid-column: span 1;
    grid-row: span 2;
    display: block;
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid rgba(120,185,255,.18);
    background: #0D1626;
    cursor: zoom-in;
}.pg-item.pg-wide{
    grid-column: span 2;
}.pg-item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .7s cubic-bezier(.22,1,.36,1);
}.pg-item span{
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 38px 18px 16px;
    background: linear-gradient(180deg, rgba(5,10,20,0), rgba(5,10,20,.88));
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    opacity: .92;
    transition: opacity .35s ease;
}.pg-item:hover{
    border-color: rgba(120,185,255,.4);
    box-shadow: 0 0 30px rgba(22,123,255,.2);
}.pg-item:hover img{
    transform: scale(1.05);
}/* ---------- lightbox ---------- */

.pg-lightbox{
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 90px;
    background: rgba(3,6,12,.94);
    backdrop-filter: blur(6px);
}.pg-lightbox[hidden]{
    display: none;
}.pg-lightbox img{
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 30px 80px rgba(0,0,0,.6);
}.pg-lightbox button{
    position: absolute;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    border: 1px solid #167BFF;
    background: rgba(5,10,20,.6);
    color: #fff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    transition: background .3s ease;
}.pg-lightbox button:hover{
    background: #167BFF;
}.pg-close{ top: 20px; right: 20px; }.pg-prev{ left: 20px; top: 50%; transform: translateY(-50%); }.pg-next{ right: 20px; top: 50%; transform: translateY(-50%); }/* ================= ALL PROJECTS BUTTON ================= */

.project-allprojects{
    display: flex;
    justify-content: center;
    margin-top: 64px;
}.project-allprojects-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 48px;
    padding: 0 28px;
    background: transparent;
    border: 1px solid #167BFF;
    border-radius: 12px;
    color: #ffffff;
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    transition: .35s ease;
}.project-allprojects-btn span{
    color: #ffffff;
    font-size: 18px;
    line-height: 1;
    display: inline-block;
}.project-allprojects-btn:hover{
    background: #167BFF;
    border-color: #167BFF;
}

@media (max-width: 900px){

    .project-gallery{ margin-top: 56px; }

    .project-gallery-grid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
        /* 110px rows keep the tiles close to 3:2 (wide) and 3:4 (tall)
           on a ~390px screen. */
        grid-auto-rows: 110px;
        gap: 10px;
    }

    .pg-item span{
        font-size: 12px;
        padding: 26px 10px 10px;
    }

    .pg-lightbox{ padding: 70px 12px; }

    .pg-prev, .pg-next{ top: auto; bottom: 16px; transform: none; }
    .pg-prev{ left: calc(50% - 58px); }
    .pg-next{ right: calc(50% - 58px); }

}/* 5-photo gallery: two large tiles on top, three below. */
.project-gallery-grid.pg-grid-5{
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-auto-rows: 170px;
}.pg-grid-5 .pg-l3{ grid-column: span 3; grid-row: span 2; }.pg-grid-5 .pg-l2{ grid-column: span 2; grid-row: span 2; }

@media (max-width: 900px){
    .project-gallery-grid.pg-grid-5{
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 110px;
    }
    .pg-grid-5 .pg-l3{ grid-column: span 2; }
    .pg-grid-5 .pg-l2{ grid-column: span 1; }
    .pg-grid-5 .pg-l2:last-child{ grid-column: span 2; }
}/* 3-photo gallery: two landscape shots + one portrait, one even row. */
.project-gallery-grid.pg-grid-3{
    grid-template-columns: 4fr 4fr 3fr;
    grid-auto-rows: 380px;
}.pg-grid-3 .pg-item{ grid-column: span 1; grid-row: span 1; }

@media (max-width: 900px){
    .project-gallery-grid.pg-grid-3{
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 150px;
    }
    .pg-grid-3 .pg-item:first-child{ grid-column: span 2; grid-row: span 2; }
    .pg-grid-3 .pg-item:nth-child(3){ grid-row: span 1; }
}/* =========================================================
   Project page backdrop: the blueprint image is 16:9 and only
   covers the top of the section, so it used to end in a hard
   horizontal line. It now lives on its own layer with the same
   aspect ratio and fades out into the page colour.
========================================================= */
html body .project{
    background-image:none;
}html body .project::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    aspect-ratio:1672 / 941;
    pointer-events:none;
    z-index:0;
    background-image:url("../images/project-background.webp");
    background-repeat:no-repeat;
    background-size:100% auto;
    background-position:center top;
    -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 45%, rgba(0,0,0,.55) 72%, rgba(0,0,0,0) 100%);
    mask-image:linear-gradient(180deg, #000 0%, #000 45%, rgba(0,0,0,.55) 72%, rgba(0,0,0,0) 100%);
}html body .project > .container{
    position:relative;
    z-index:1;
}


/* 4-photo gallery: an even 2 × 2 grid */
.project-gallery-grid.pg-grid-4{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    grid-auto-rows:auto;
}
.pg-grid-4 .pg-item{
    grid-column:span 1;
    grid-row:span 1;
    aspect-ratio:16 / 9;
    height:auto;
}
.pg-grid-4 .pg-item img{ width:100%; height:100%; object-fit:cover; }

@media (max-width:767px){
    .project-gallery-grid.pg-grid-4{ grid-template-columns:1fr; }
}


/* =========================================================
   PROJECT PAGES — ambient backdrop from the project's own
   main photo: heavily blurred, darkened and tinted into the
   site's blue, fading into the page colour. Every page gets
   its own mood without competing with the sharp photo.
========================================================= */
html body .project::before{
    aspect-ratio:auto !important;
    top:-60px !important;
    left:-8% !important;
    right:-8% !important;
    height:1100px;
    background:var(--proj-bg, none) center 30% / cover no-repeat !important;
    filter:none;
    opacity:.92;
    transform:translateZ(0);
    -webkit-mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.85) 30%, rgba(0,0,0,.5) 60%, rgba(0,0,0,.18) 82%, rgba(0,0,0,0) 100%) !important;
    mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.85) 30%, rgba(0,0,0,.5) 60%, rgba(0,0,0,.18) 82%, rgba(0,0,0,0) 100%) !important;
}

/* a deep blue veil over the blur keeps it in the site's palette
   and holds the text contrast */
html body .project > .container::before{
    content:"";
    position:absolute;
    left:50%;
    top:-160px;
    width:100vw;
    height:1100px;
    transform:translateX(-50%);
    z-index:-1;
    pointer-events:none;
    background:
        radial-gradient(1400px 520px at 70% -10%, rgba(22,123,255,.12), transparent 70%),
        linear-gradient(180deg, rgba(5,10,20,.42) 0%, rgba(5,10,20,.50) 22%, rgba(5,10,20,.66) 45%, rgba(5,10,20,.84) 68%, rgba(5,10,20,.95) 86%, #050A14 100%);
}

@media (max-width:767px){
    html body .project::before{ height:780px; filter:none; }
    html body .project > .container::before{ height:800px; top:-120px; }
}