.srp-project-carousel { position: relative; content-visibility:auto; contain-intrinsic-size:70rem; padding: var(--srp-section-space) 0; overflow: hidden; color: #fff; background: radial-gradient(circle at 50% 44%,rgba(140,114,255,.13),transparent 30%),#0a0910; }
.srp-project-carousel__heading { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(18rem,.55fr); gap: 1.4rem 4rem; align-items: end; margin-bottom: clamp(3.5rem,6vw,6rem); }
.srp-project-carousel__kicker { grid-column: 1/-1; margin: 0; color: #aeb6ff; font-family: var(--srp-font-display); font-size: .68rem; letter-spacing: .15em; text-transform: uppercase; }
.srp-project-carousel__heading h2 { margin: 0; font-family:var(--srp-font-heavy); font-size: clamp(3.8rem,7.5vw,8.2rem); font-weight: 900; letter-spacing: -.08em; line-height: .78; text-transform: uppercase; }
.srp-project-carousel__heading h2 span { display: block; overflow: hidden; }
.srp-project-carousel__heading h2 span:last-child { color: transparent; background: linear-gradient(90deg,#8c72ff,#aeb6ff 54%,#fff); -webkit-background-clip:text; background-clip:text; }
.srp-project-carousel__heading > p:last-child { max-width: 30rem; margin: 0; color: rgba(255,255,255,.62); }
.srp-project-carousel__stage { position: relative; min-height: clamp(30rem,49vw,47rem); perspective: 1200px; }
.srp-project-card { position: absolute; top: 50%; left: 50%; display: block; width: min(34vw,33rem); aspect-ratio: .76; padding: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.14); border-radius: clamp(1.25rem,2vw,2.2rem); color: #fff; background: #171421; box-shadow: 0 2rem 5rem rgba(0,0,0,.28); cursor: pointer; transform-origin: center; transition: transform 650ms cubic-bezier(.2,.75,.2,1),opacity 450ms ease,filter 450ms ease,border-color 350ms ease; }
.srp-project-card:nth-child(1) { transform: translate(-119%,-50%) rotate(-7deg) scale(.82); opacity: .68; }
.srp-project-card:nth-child(2) { z-index: 4; transform: translate(-50%,-50%) scale(1); }
.srp-project-card:nth-child(3) { transform: translate(19%,-50%) rotate(7deg) scale(.82); opacity: .68; }
.srp-project-card[data-slot="-1"] { z-index: 2; transform: translate(-119%,-50%) rotate(-7deg) scale(.82); opacity: .68; }
.srp-project-card[data-slot="0"] { z-index: 4; transform: translate(-50%,-50%) scale(1); opacity: 1; }
.srp-project-card[data-slot="1"] { z-index: 2; transform: translate(19%,-50%) rotate(7deg) scale(.82); opacity: .68; }
.srp-project-card:not(.is-active) { filter: saturate(.72) brightness(.82); }
.srp-project-card.is-active { border-color: rgba(174,182,255,.42); }
.srp-project-card__media { position: absolute; inset: 0; }
.srp-project-card__media::after { position: absolute; inset: 0; content: ""; background: linear-gradient(180deg,transparent 56%,rgba(7,7,13,.86)); }
.srp-project-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 800ms cubic-bezier(.2,.75,.2,1); }
.srp-project-card.is-active:hover .srp-project-card__media img { transform: scale(1.035); }
.srp-project-card__number { position: absolute; z-index: 2; top: 1rem; left: 1rem; display: grid; width: 2.5rem; height: 2.5rem; place-items: center; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; background: rgba(8,8,16,.48); font-size: .66rem; font-weight: 850; backdrop-filter: blur(10px); }
.srp-project-card__label { position: absolute; z-index: 2; right: 1.1rem; bottom: 1rem; left: 1.1rem; font-size: clamp(1.35rem,2vw,2.1rem); font-weight: 900; letter-spacing: -.05em; text-align: left; text-transform: uppercase; }
.srp-project-carousel__controls { display: flex; justify-content: center; align-items: center; gap: 1rem; margin-top: 1rem; }
.srp-project-carousel__controls button { display: inline-flex; min-height: 2.8rem; align-items: center; justify-content: center; padding: 0 1rem; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; color:#f6f3ef; background: rgba(255,255,255,.05); font-size:.74rem; font-weight:800; letter-spacing:.04em; cursor: pointer; transition: background .25s ease,transform .25s ease; }
.srp-project-carousel__controls button:hover { background: rgba(174,182,255,.13); transform: translateY(-2px); }
.srp-project-carousel__controls span { color: rgba(255,255,255,.46); font-size: .66rem; font-weight: 800; letter-spacing: .08em; }
.srp-project-carousel__controls b { color: #fff; }
.srp-project-carousel__details { position: relative; max-width: 78rem; min-height: 13rem; margin: clamp(2.5rem,4vw,4rem) auto 0; }
.srp-project-detail { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(12rem,.48fr) minmax(18rem,.8fr) minmax(12rem,.45fr) auto; align-items: end; gap: clamp(1.2rem,3vw,3rem); padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.13); opacity: 0; pointer-events: none; transform: translateY(1rem); transition: opacity 380ms ease,transform 520ms cubic-bezier(.2,.75,.2,1); }
.srp-project-detail.is-active { opacity: 1; pointer-events: auto; transform: translateY(0); }
.srp-project-detail > div > p { margin: 0 0 .45rem; color: #aeb6ff; font-size: .65rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.srp-project-detail h3 { margin: 0; font-size: clamp(1.8rem,2.8vw,3.1rem); font-weight: 900; letter-spacing: -.055em; text-transform: uppercase; }
.srp-project-detail__text { margin: 0; color: rgba(255,255,255,.66); line-height: 1.55; }
.srp-project-detail ul { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.srp-project-detail li { color: rgba(255,255,255,.72); font-size: .76rem; }
.srp-project-detail li::before { content: "— "; color: #8c72ff; }
.srp-project-detail .srp-button { white-space: nowrap; }
.srp-project-sites { padding: var(--srp-section-space) 0 0; color: #fff; background: #0a0910; }
.srp-project-sites__intro { display: grid; grid-template-columns: minmax(0,1fr) minmax(18rem,.6fr); align-items: end; gap: 2rem 5rem; }
.srp-project-sites__intro .srp-case-label { grid-column: 1/-1; }
.srp-project-sites__intro h2 { margin: 0; font-size: clamp(3rem,6vw,6.4rem); font-weight: 900; letter-spacing: -.07em; line-height: .86; text-transform: uppercase; }
.srp-project-sites__intro > p:last-child { margin: 0; color: rgba(255,255,255,.58); }
.srp-project-carousel--projects { padding-top: 2rem; }
@media (max-width:60rem) {
    .srp-project-carousel__heading,.srp-project-sites__intro { grid-template-columns: 1fr; }
    .srp-project-carousel__stage { min-height: 35rem; }
    .srp-project-card { width: min(48vw,28rem); }
    .srp-project-detail { grid-template-columns: 1fr 1fr; align-items: start; }
}
@media (max-width:39.9375rem) {
    .srp-project-carousel { padding-block: 5rem; }
    .srp-project-carousel__heading { margin-bottom: 2.3rem; }
    .srp-project-carousel__heading h2 { font-family:var(--srp-font-heavy); font-size:clamp(3rem,14vw,4.4rem); font-weight:900; letter-spacing:-.082em; }
    .srp-project-carousel__stage { display: flex; min-height: 25rem; gap: .8rem; margin-inline: calc(var(--srp-gutter) * -1); padding-inline: var(--srp-gutter); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; perspective: none; }
    .srp-project-carousel__stage::-webkit-scrollbar { display: none; }
    .srp-project-card,.srp-project-card:nth-child(1),.srp-project-card:nth-child(2),.srp-project-card:nth-child(3),.srp-project-card[data-slot] { position: relative; top: auto; left: auto; flex: 0 0 78vw; width: auto; max-width: 22rem; transform: none; opacity: 1; scroll-snap-align: center; }
    .srp-project-card:not(.is-active) { filter: saturate(.68) brightness(.7); transform: scale(.94); }
    .srp-project-card.is-active { transform: scale(1); }
    .srp-project-carousel__controls { margin-top: 1.4rem; }
    .srp-project-carousel__details { min-height: 22rem; margin-top: 2rem; }
    .srp-project-detail { grid-template-columns: 1fr; gap: 1rem; align-content: start; }
    .srp-project-detail .srp-button { width: fit-content; }
    .srp-project-sites__intro h2 { font-size: clamp(2.8rem,13vw,4.1rem); }
}

.srp-project-sites {
    min-height: 100svh;
    padding: clamp(4.5rem,6vw,6rem) 0 2rem;
    color: #fff;
    background: #0a0910;
}

.srp-project-sites__intro {
    display: block;
    margin-bottom: 0;
}

.srp-project-sites__intro .srp-case-label {
    margin: 0 0 .7rem;
    color: #aeb6ff;
}

.srp-project-sites__intro h2 {
    max-width: 70rem;
    margin: 0;
    font-family: var(--srp-font-heavy);
    font-size: clamp(3rem,5.7vw,6.2rem);
    font-weight: 900;
    letter-spacing: -.07em;
    line-height: .84;
    text-transform: uppercase;
}

.srp-project-sites__intro h2 i {
    color: inherit;
    font: inherit;
    font-style: normal;
    margin-left: .06em;
}

.srp-project-carousel--projects {
    padding: 1.2rem 0 2.5rem;
    background: transparent;
}

.srp-project-carousel--projects .srp-project-carousel__stage {
    min-height: clamp(24rem,37vw,34rem);
}

.srp-project-carousel--projects .srp-project-card {
    width: min(29vw,28rem);
}

.srp-project-carousel--projects .srp-project-carousel__controls {
    margin-top: .55rem;
}

.srp-project-carousel--projects .srp-project-carousel__details {
    min-height: 9.5rem;
    margin-top: 1.25rem;
}

.srp-project-carousel--projects .srp-project-detail {
    grid-template-columns: minmax(10rem,.5fr) minmax(16rem,1fr) auto;
    gap: 1rem 2rem;
    padding-top: 1rem;
}

.srp-project-carousel--projects .srp-project-detail ul { display: none; }
.srp-project-carousel--projects .srp-project-detail__text { max-width: 34rem; }

@media (max-width:39.9375rem) {
    .srp-project-sites {
        min-height: auto;
        padding: 4.25rem 0 1.5rem;
    }

    .srp-project-sites__intro h2 {
        font-size: clamp(2.55rem,11.5vw,3.75rem);
        line-height: .86;
    }

    .srp-project-carousel--projects {
        padding-top: .75rem;
        padding-bottom: 1.5rem;
    }

    .srp-project-carousel--projects .srp-project-carousel__stage {
        min-height: 20rem;
    }

    .srp-project-carousel--projects .srp-project-card,
    .srp-project-carousel--projects .srp-project-card:nth-child(1),
    .srp-project-carousel--projects .srp-project-card:nth-child(2),
    .srp-project-carousel--projects .srp-project-card:nth-child(3),
    .srp-project-carousel--projects .srp-project-card[data-slot] {
        flex-basis: 70vw;
        max-width: 19rem;
    }

    .srp-project-carousel--projects .srp-project-carousel__details {
        min-height: 13rem;
        margin-top: 1.1rem;
    }

    .srp-project-carousel--projects .srp-project-detail {
        grid-template-columns: 1fr;
        gap: .65rem;
        padding-top: .9rem;
    }

    .srp-project-carousel--projects .srp-project-detail h3 {
        font-size: 1.65rem;
    }

    .srp-project-carousel--projects .srp-project-detail__text {
        font-size: .88rem;
    }
}

/* Projects list: light selected-projects section */
.srp-project-sites {
    color: #17151e;
    background: linear-gradient(180deg,#f7f4f0 0%,#ffffff 100%);
}
.srp-project-sites__intro .srp-case-label { color: #6d59cb; }
.srp-project-sites__intro h2 { color: #17151e; }
.srp-project-sites__intro h2 i { color: #5b3df5; }
.srp-project-sites .srp-project-carousel--projects {
    color: #17151e;
    background: transparent;
}
.srp-project-sites .srp-project-card {
    color: #fff;
    border-color: rgba(23,21,30,.12);
    background: #171421;
    box-shadow: 0 2rem 5rem rgba(23,21,30,.18);
}
.srp-project-sites .srp-project-card.is-active { border-color: rgba(91,61,245,.42); }
.srp-project-sites .srp-project-carousel__controls button {
    color: #17151e;
    border-color: rgba(23,21,30,.14);
    background: rgba(23,21,30,.035);
}
.srp-project-sites .srp-project-carousel__controls button:hover { background: rgba(91,61,245,.08); }
.srp-project-sites .srp-project-carousel__controls span { color: #7b7380; }
.srp-project-sites .srp-project-carousel__controls b { color: #17151e; }
.srp-project-sites .srp-project-detail {
    border-top-color: rgba(23,21,30,.12);
    color: #17151e;
}
.srp-project-sites .srp-project-detail > div > p { color: #6d59cb; }
.srp-project-sites .srp-project-detail h3 { color: #17151e; }
.srp-project-sites .srp-project-detail__text { color: #625a68; }
.srp-project-sites .srp-project-detail li { color: #625a68; }