.projects-hero {
    position: relative;
    min-height: 520px;
    display: flex;
    align-items: flex-end;
    background: linear-gradient(90deg, rgba(4, 28, 49, .95), rgba(8, 44, 75, .58)), url("../img/road_bkgd2b.jpg") center/cover;
}

.projects-hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 5px;
    background: #ee212b;
}

.projects-hero__content {
    position: relative;
    z-index: 1;
    max-width: 900px;
    padding-top: 120px;
    padding-bottom: 78px;
    color: rgba(255, 255, 255, .84);
}

.projects-hero h1 {
    max-width: 820px;
    margin: 12px 0 20px;
    color: #fff;
    font-size: clamp(2.55rem, 5.5vw, 5rem);
    line-height: 1.02;
}

.projects-hero__content > p {
    max-width: 720px;
    margin: 0;
    color: #A6A6A6;
    font-size: 1.18rem;
    line-height: 1.7;
}

.projects-breadcrumbs {
    display: flex;
    gap: 8px;
    margin: 0 0 30px;
    padding: 0;
    list-style: none;
}

.projects-breadcrumbs li + li::before { content: "/"; margin-right: 8px; color: rgba(255, 255, 255, .5); }
.projects-breadcrumbs a { color: #fff; }
.projects-breadcrumbs a:hover { color: #ff686f; }

.projects-eyebrow {
    color: #ee212b;
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: 0.3em;
    text-transform: uppercase;
}

.projects-hero .projects-eyebrow { color: #ff5961; }

.projects-index { padding: 90px 0 110px; background: #f5f7f9; }

.projects-intro {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr);
    align-items: end;
    gap: 60px;
    margin-bottom: 58px;
}

.projects-intro h2 {
    max-width: 650px;
    margin: 8px 0 0;
    color: #082c4b;
    font-size: clamp(2rem, 4vw, 3.35rem);
    line-height: 1.12;
}

.projects-intro > p { margin: 0; color: #5e6b75; font-size: 1.5rem; line-height: 1.8; }

.projects-filter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 35px;
    padding: 18px 20px;
    border: 1px solid #e0e5e9;
    box-sizing: border-box;
    border: 1px solid transparent;
    border-radius: 5px;
    background: #fff;
}

.projects-filter__desktop { display: flex; flex-wrap: wrap; gap: 8px; }

    .projects-filter__desktop .nav-item {
        display: inline-flex;
        padding: 11px 17px;
        border-radius: 0px;
        color: #44525d;
        font-size: 1.3rem;
        font-weight: 600;
        letter-spacing: .035em;
        line-height: 1.35;
        text-transform: uppercase;
        cursor: pointer;
        border-bottom: 1px solid red;
    }
    
.projects-filter__desktop .nav-item:hover,
.projects-filter__desktop .nav-item.current { background: #082c4b; color: #fff; }

.projects-filter__mobile { display: none; }
.projects-count { flex: 0 0 auto; margin: 0; color: #6d7982; font-size: 1.2rem; }
.projects-count strong { color: #082c4b; }
.projects-grid { margin-right: -15px; margin-left: -15px; }
.projects-grid__item { margin-bottom: 30px; }

.project-card {
    display: block;
    height: 100%;
    overflow: hidden;
    border-radius: 5px;
    background: #fff;
    box-shadow: 0 12px 35px rgba(10, 38, 61, .08);
    color: inherit;
    transition: border-color .4s ease, box-shadow .4s ease;
}

.project-card:hover { border-color: rgba(238,33,43,.2); box-shadow: 0 18px 42px rgba(10,38,61,.14); }

.project-card__image { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #dfe5e9; }
.project-card__image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(4,28,49,.72), transparent 58%); opacity: .35; transition: opacity .9s ease; }
.project-card__image img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.01); transition: transform 1.2s cubic-bezier(.2,.75,.25,1), filter .9s ease; will-change: transform; }
.project-card:hover .project-card__image img { transform: scale(1.065); filter: saturate(1.05) contrast(1.02); }
.project-card:hover .project-card__image::after { opacity: .92; }

.project-card__action {
    position: absolute;
    right: 20px;
    bottom: 18px;
    z-index: 1;
    color: #fff;
    font-weight: 700;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .55s ease, transform .55s cubic-bezier(.2,.75,.25,1);
}

.project-card__action i { margin-left: 8px; }
.project-card:hover .project-card__action { opacity: 1; transform: translateY(0); }

.project-card__content { padding: 27px 28px 25px; }
.project-card__sector { margin: 0 0 8px; color: #ee212b; font-size: 1.2rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.project-card h3 { margin: 0; color: #082c4b; font-size: 1.38rem; line-height: 1.35; }
.project-card__summary { margin: 14px 0 0; color: #66737c; line-height: 1.65; }

.project-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    margin: 22px 0 0;
    padding-top: 17px;
    border-top: 1px solid #e7ebee;
}

.project-card__meta div { display: flex; align-items: center; gap: 8px; min-width: 0; }
.project-card__meta dt, .project-card__meta dd { margin: 0; }
.project-card__meta dt { color: #ee212b; }
.project-card__meta dd { overflow: hidden; color: #6b7780; font-size: 1.05rem; text-overflow: ellipsis; white-space: nowrap; }

.projects-empty { max-width: 680px; margin: 30px auto 0; padding: 60px 35px; border-radius: 5px; background: #fff; text-align: center; box-shadow: 0 12px 35px rgba(10, 38, 61, .08); }
.projects-empty i { color: #ee212b; font-size: 3rem; }
.projects-empty h2 { margin: 20px 0 10px; color: #082c4b; }
.projects-empty a { display: inline-block; margin-top: 15px; padding: 13px 20px; border-radius: 3px; background: #082c4b; color: #fff; font-weight: 700; }

@media (max-width: 991px) {
    .projects-hero { min-height: 460px; }
    .projects-intro { grid-template-columns: 1fr; gap: 24px; }
    .projects-filter { align-items: stretch; flex-direction: column; }
    .projects-filter__desktop { display: none; }
    .projects-filter__mobile { display: block; }
    .projects-filter__mobile label { display: block; margin-bottom: 9px; color: #082c4b; font-size: 1.5rem; font-weight: 700; letter-spacing: .035em; text-transform: uppercase; }
        .projects-filter__mobile select {
            width: 100%;
            min-height: 60px;
            padding: 9px 13px;
            border: 1px solid #cad2d8;
            border-radius: 3px;
            background: #082c4b;
            font-size: 2.5rem;
            font-weight: 600;
            text-transform: uppercase;
        }
    .projects-count {
        text-align: right;
        font-size: 1.9rem;
    }
.project-card__meta dd { font-size: 1.5rem;  }
    .project-card__sector {
        font-size: 1.7rem;
    }
    .project-card h3, .projects-intro > p {
        font-size: 1.8rem;
    }
    .projects-hero__content > p {
        font-size: 1.8rem;
    }


}

@media (max-width: 575px) {
    .projects-hero__content { padding-top: 95px; padding-bottom: 55px; }
    .projects-index { padding: 65px 0 75px; }
    .projects-intro { margin-bottom: 38px; }
    .project-card__action { opacity: 1; transform: none; }
}