.sc-projects__listing {
    position: relative;
    z-index: 6
}

.projects__listing-main {
    padding-top: calc(7rem + 6.2vh);
    padding-bottom: 4.2vh;
    height: 100%;
    grid-template-rows: auto 1fr
}

@media screen and (max-width: 991px) {
    .projects__listing-main {
        padding-top: calc(6.6rem + 4svh);
        padding-bottom: 5.7svh;
        grid-template-rows: auto auto 1fr auto auto
    }
}

@media screen and (max-width: 767px) {
    .projects__listing-main {
        padding-top: calc(6rem + 3.28svh);
        padding-bottom: 0;
        grid-template-rows: auto auto auto 1fr auto
    }
}

.projects__sticky {
    position: relative;
    height: 100vh
}

@media screen and (max-width: 991px) {
    .projects__sticky {
        height: 100svh;
        overflow: hidden
    }
}

.projects__sticky>.container {
    z-index: 3;
    height: 100%
}

@media screen and (max-width: 991px) {
    .projects__sticky>.container {
        pointer-events: auto
    }
}

.projects__navigation {
    z-index: 2;
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column
}

@media screen and (max-width: 991px) {
    .projects__navigation {
        display: none
    }
}

.projects__navigation-area {
    width: 100%;
    height: 50%
}

.projects__position {
    position: absolute;
    inset: 0 var(--container-padding);
    opacity: 0;
    visibility: hidden
}

.projects__position-name {
    grid-column: 1/11;
    grid-row: 1/3;
    align-self: end;
    line-height: .835em !important;
    margin-bottom: 4.2vh
}

@media screen and (max-width: 991px) {
    .projects__position-name {
        font-size: var(--fs-dis1);
        line-height: var(--lh-dis1);
        line-height: .835em;
        grid-column: 1/-1;
        margin-bottom: calc(30rem + 5.7svh);
        white-space: nowrap
    }

    .projects__position-name br {
        display: none
    }
}

@media screen and (max-width: 767px) {
    .projects__position-name {
        font-size: var(--fs-h2);
        line-height: var(--lh-h2);
        line-height: .835em;
        margin-top: 64svh;
        transform: translateY(-100%);
        overflow-wrap: anywhere;
        white-space: unset
    }

    .projects__position-name br {
        display: block
    }
}

.projects__position-info {
    grid-row: 1/2;
    grid-column: 13/16;
    padding-top: 17.14vh;
    display: flex;
    flex-direction: column;
    gap: 7.4rem 0
}

.projects__position-info-label {
    margin-bottom: 1rem
}

.projects__position-info-listing {
    height: calc(var(--fs-16) * 1.4 * var(--max-line));
    overflow: hidden
}

@media screen and (max-width: 991px) {
    .projects__position-info {
        display: none
    }
}

.projects__position-year {
    grid-column: 13/14;
    grid-row: 2/3;
    padding-bottom: 4.2vh;
    align-self: end
}

@media screen and (max-width: 991px) {
    .projects__position-year {
        display: none
    }
}

.project-item-label {
    margin-bottom: 1rem;
    pointer-events: auto;
    transition: opacity .4s ease-in-out
}

.project-item-label.hidden {
    opacity: 0 !important;
    display: block;
    pointer-events: none
}

.project__name {
    grid-column: 1/6;
    grid-row: 1/2;
    overflow-wrap: break-word;
    align-self: start
}

@media screen and (max-width: 991px) {
    .project__name {
        grid-column: 1/9;
        grid-row: 1/2;
        margin-bottom: 6rem;
        height: calc(var(--fs-h1) * .835 * 2)
    }
}

@media screen and (max-width: 767px) {
    .project__name {
        grid-column: 1/-1;
        grid-row: 1/2;
        padding-bottom: 0;
        overflow-wrap: anywhere;
        margin-bottom: 3.2rem;
        height: auto;
        padding-top: .1em;
        margin-top: -.1em;
        overflow: hidden
    }
}

@media screen and (max-width: 767px) {
    .project__name-wrap {
        display: flex;
        gap: 0 3.2rem
    }
}

@media screen and (max-width: 767px) {
    .project__name .grid-1-1 {
        display: flex;
        flex: none;
        gap: 0 3.2rem;
        height: auto
    }

    .project__name .grid-1-1>* {
        flex: none;
        height: auto
    }
}

.project__name .grid-1-1.clone-wrap {
    display: none
}

@media screen and (max-width: 767px) {
    .project__name .grid-1-1.clone-wrap {
        display: flex
    }
}

.project__name-txt {
    justify-self: start;
    align-self: start;
    line-height: .835em;
    margin-top: -.1em;
    pointer-events: none
}

@media screen and (max-width: 991px) {
    .project__name-txt {
        font-size: var(--fs-h1);
        line-height: var(--lh-h1);
        line-height: .835em;
        white-space: nowrap
    }

    .project__name-txt br {
        display: none
    }
}

@media screen and (max-width: 767px) {
    .project__name-txt {
        font-size: var(--fs-h2);
        line-height: var(--lh-h2);
        line-height: .835em;
        color: var(--cl-dm-desc);
        transition: color .55s ease-in-out .25s;
        pointer-events: auto
    }
}

@media screen and (max-width: 767px) {
    .project__name-txt.active {
        color: var(--cl-dm-title)
    }
}

.project__desc {
    grid-column: 1/4;
    grid-row: 1/2;
    max-width: 32rem;
    position: relative;
    margin-top: calc(var(--fs-16) * 1.4 * 4 + 1rem + 7.4rem)
}

@media screen and (max-width: 991px) {
    .project__desc {
        margin-top: 0;
        padding-top: 4rem;
        grid-column: 5/10;
        grid-row: 4/5;
        max-width: 38rem
    }
}

@media screen and (max-width: 767px) {
    .project__desc {
        padding-top: 3.2rem;
        grid-column: 1/-1;
        grid-row: 4/5;
        align-self: end;
        max-width: unset;
        margin-bottom: min(3svh, 2.4rem)
    }
}

.project__desc-txt {
    justify-self: start
}

.project__desc-txt.active {
    pointer-events: auto
}

@media screen and (max-width: 767px) {
    .project__desc-txt {
        align-self: start
    }
}

.project__scrollDown {
    grid-row: 2/3;
    grid-column: 1/3;
    align-self: end;
    line-height: .9em
}

@media screen and (max-width: 991px) {
    .project__scrollDown {
        display: none
    }
}

.project__link {
    display: none;
    align-items: center;
    column-gap: .6rem;
    overflow: hidden
}

@media screen and (max-width: 991px) {
    .project__link {
        margin-top: 4.35svh;
        display: flex
    }
}

@media screen and (max-width: 767px) {
    .project__link {
        display: none;
        margin-top: 0
    }
}

@media screen and (max-width: 991px) {
    .project__link.mod-mb {
        display: none
    }
}

@media screen and (max-width: 767px) {
    .project__link.mod-mb {
        display: flex
    }
}

.project__info {
    position: relative;
    z-index: 6;
    grid-column: 6/16;
    grid-row: 1/2;
    align-self: start;
    justify-self: start
}

@media screen and (max-width: 991px) {
    .project__info {
        grid-row: 3/4;
        grid-column: 1/5;
        padding-top: 8rem
    }
}

@media screen and (max-width: 767px) {
    .project__info {
        display: none
    }
}

.project__info-inner {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 7.4rem 0
}

@media screen and (max-width: 991px) {
    .project__info-inner {
        gap: 3.2rem 0
    }
}

.project__role,
.project__services,
.project__selling {
    display: flex;
    flex-direction: column;
    align-items: start
}

.project__role-listing,
.project__services-listing,
.project__selling-listing {
    align-self: start;
    justify-self: start;
    display: flex;
    flex-direction: column;
    align-items: start;
    height: calc(var(--fs-16) * 1.4 * var(--max-line))
}

.project__role-listing.active p,
.project__services-listing.active p,
.project__selling-listing.active p {
    pointer-events: auto
}

.project__year {
    grid-column: 6/8;
    align-self: end;
    pointer-events: auto;
    display: flex;
    gap: 0 .5rem
}

.project__year .word {
    line-height: .5em
}

.project__year-current {
    display: flex;
    align-items: center
}

@media screen and (max-width: 991px) {
    .project__year {
        grid-column: 1/5;
        grid-row: 4/5
    }
}

@media screen and (max-width: 767px) {
    .project__year {
        grid-column: 1/-1;
        grid-row: 3/4;
        margin-bottom: -.5rem;
        font-size: var(--fs-14);
        line-height: var(--lh-14);
        color: var(--cl-dm-desc);
        margin-top: 1.5rem
    }
}

.project__thumbnail {
    position: relative;
    height: 100%
}

@media screen and (max-width: 767px) {
    .project__thumbnail {
        height: 26.53svh;
        margin-top: 3.2rem
    }
}

.project__thumbnail-wrap {
    grid-column: 9/15;
    grid-row: 1/3;
    position: relative;
    overflow: hidden
}

@media screen and (max-width: 991px) {
    .project__thumbnail-wrap {
        grid-column: 5/-1;
        grid-row: 2/4
    }
}

@media screen and (max-width: 767px) {
    .project__thumbnail-wrap {
        grid-column: 1/-1;
        grid-row: 2/3
    }
}

.project__thumbnail-listing {
    height: 100%;
    display: grid
}

.project__thumbnail-img {
    --clipIn: 100%;
    --clipOut: 100%;
    --imgTrans: 0%;
    --imgDirection: -1;
    --imgScale: 1;
    position: relative;
    width: 100%;
    height: 100%;
    clip-path: polygon(var(--clipIn) var(--clipIn), var(--clipOut) var(--clipIn), var(--clipOut) var(--clipOut), var(--clipIn) var(--clipOut))
}

.project__thumbnail-img.active {
    pointer-events: auto
}

.project__thumbnail-img-wrap {
    transform-origin: 25% 25%;
    transform: scale(var(--imgScale));
    width: 100%;
    height: 100%
}

.project__thumbnail-img-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    width: 100%;
    height: 100%
}

.project__thumbnail-img-inner img {
    position: absolute;
    object-fit: cover;
    object-position: center top;
    transform: translate(calc(var(--imgTrans) / (2 * var(--imgDirection))), calc(var(--imgTrans) / (2 * var(--imgDirection))))
}

@media screen and (max-width: 476px) {
    .project__thumbnail-img-inner img {
        object-position: center center
    }
}

.project__progress {
    display: none;
    width: 100%
}

@media screen and (max-width: 767px) {
    .project__progress {
        display: flex
    }
}

.project__progress.prev .project__progress-item-inner {
    transform-origin: left
}

.project__progress.prev .project__progress-item.active .project__progress-item-inner {
    transform-origin: right
}

.project__progress-item {
    height: 100%;
    width: 100%
}

.project__progress-item-inner {
    width: 100%;
    height: 100%;
    background-color: var(--cl-white);
    transform-origin: right;
    transform: scaleX(0);
    transition: transform 1s cubic-bezier(.645, .045, .355, 1)
}

.project__progress-item.active .project__progress-item-inner {
    transform: scaleX(1);
    transform-origin: left
}

.project__pagination {
    grid-column: -2/-1;
    grid-row: 1/3;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    justify-self: end
}

@media screen and (max-width: 991px) {
    .project__pagination {
        grid-column: 1/5;
        grid-row: 2/3;
        justify-self: start
    }
}

@media screen and (max-width: 767px) {
    .project__pagination {
        grid-column: 1/-1;
        grid-row: 5/6;
        justify-self: unset
    }
}

.project__pagination-main {
    display: flex;
    flex-direction: column;
    width: 6.6rem
}

@media screen and (max-width: 991px) {
    .project__pagination-main {
        display: none
    }
}

.project__pagination-item {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: .2rem;
    background-color: #303134;
    transition: height .6s ease-in-out, background-color .3s linear .6s
}

.project__pagination-item:before,
.project__pagination-item:after {
    top: 0;
    height: .2rem;
    z-index: 3;
    transition: all .65s cubic-bezier(.59, .23, .22, .96)
}

.project__pagination-item:before {
    background-color: #303134
}

.project__pagination-item:after {
    top: 0;
    height: .2rem;
    background-color: #ff3d00cc
}

.project__pagination-item-wrap {
    padding-block: 1rem;
    cursor: pointer;
    overflow: hidden
}

.project__pagination-item-wrap.active {
    pointer-events: none
}

.project__pagination-item-wrap.active .project__pagination-item {
    height: 9.4rem;
    background-color: transparent;
    transition: height .6s ease-in-out, background-color .3s linear 0s
}

.project__pagination-item-wrap.active .project__pagination-item:before {
    opacity: 0
}

.project__pagination-item-wrap.active .project__pagination-item-progress-bg {
    opacity: 1
}

.project__pagination-item-wrap.active .project__pagination-item-img img {
    transform: scale(1)
}

.project__pagination-item-wrap:hover {
    opacity: 1
}

.project__pagination-item-wrap:hover .project__pagination-item:before {
    transform: translate(calc(100% + var(--line-spacing)))
}

.project__pagination-item-wrap:hover .project__pagination-item:after {
    transform: translate(calc(100% + var(--line-spacing) + 1px));
    background-color: #ff3d0080
}

.project__pagination-item-img {
    position: absolute;
    z-index: 3;
    width: calc(100% - 1rem);
    height: calc(100% - 1rem);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden
}

.project__pagination-item-img img {
    position: absolute;
    height: 9.4rem !important;
    transition: transform .4s linear
}

.project__pagination-item-progress {
    z-index: 2;
    position: absolute;
    inset: 0;
    overflow: hidden
}

.project__pagination-item-progress-bg {
    position: absolute;
    z-index: 2;
    inset: 0;
    opacity: .1;
    border: .2rem solid transparent;
    background: #242528 border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    transition: opacity .4s linear
}

.project__pagination-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 2rem
}

@media screen and (max-width: 767px) {
    .project__pagination-wrap {
        padding-block: min(3svh, 2.4rem);
        flex-direction: row-reverse
    }
}

.project__pagination .line {
    position: absolute;
    top: 0
}

.project__pagination-number {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0 .8rem;
    line-height: .9em;
    overflow: hidden
}

.project__pagination-number .word {
    line-height: .5em
}

@media screen and (max-width: 991px) {
    .project__pagination-number {
        font-size: var(--fs-18);
        line-height: var(--lh-18);
        line-height: 1em
    }
}

@media screen and (max-width: 767px) {
    .project__pagination-number {
        font-size: var(--fs-16);
        line-height: var(--lh-16);
        gap: 0 .2rem;
        line-height: 1em
    }
}

.project__pagination-number-current {
    display: flex;
    align-items: center
}

.project__control {
    display: none
}

@media screen and (max-width: 991px) {
    .project__control {
        display: flex;
        align-items: end;
        justify-self: end;
        gap: 0 .8rem;
        grid-area: 1/1/2/-1;
        padding-bottom: 6rem
    }
}

@media screen and (max-width: 767px) {
    .project__control {
        padding-bottom: 0;
        grid-row: 2/3;
        margin: -.3rem;
        display: none
    }
}

.project__control-arrow {
    width: 4.4rem;
    height: 4.4rem;
    border-radius: 50%;
    border: 1px solid var(--cl-dm-border);
    display: flex;
    justify-content: center;
    align-items: center
}

@media screen and (max-width: 767px) {
    .project__control-arrow {
        width: 2.2rem;
        height: 2.2rem;
        border: none
    }
}

/* Permanent fix for project item visibility and stacking */
.project__name-txt:not(.active),
.project__desc-txt:not(.active),
.project__role-listing:not(.active),
.project__services-listing:not(.active),
.project__selling-listing:not(.active),
.project__thumbnail-img:not(.active),
.project__year .grid-1-1>div:not(.active),
.project__progress-item:not(.active) {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    position: absolute;
}

.project__name-txt.active,
.project__desc-txt.active,
.project__role-listing.active,
.project__services-listing.active,
.project__selling-listing.active,
.project__thumbnail-img.active,
.project__year .grid-1-1>div.active,
.project__progress-item.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    position: relative;
}