.srp-projects { color: var(--srp-color-text); background: var(--srp-color-surface); }

.srp-projects-hero {
    min-height: min(54rem, 100svh);
    color: var(--srp-color-text-inverse);
    background:
        radial-gradient(circle at 82% 25%, rgba(140, 114, 255, .2), transparent 30%),
        linear-gradient(145deg, #090911, #151321 65%, #11101a);
}
.srp-projects-hero__inner {
    display: grid;
    min-height: min(54rem, 100svh);
    grid-template-columns: minmax(0, 1.18fr) minmax(22rem, .82fr);
    align-items: end;
    gap: clamp(3rem, 8vw, 9rem);
    padding-top: clamp(10rem, 12vw, 14rem);
    padding-bottom: clamp(5rem, 7vw, 8rem);
}
.srp-projects-hero__copy h1 {
    max-width: 66rem;
    margin: 0;
    font-size: clamp(3.5rem, 6.5vw, 7.2rem);
    font-weight: 820;
    letter-spacing: -.06em;
    line-height: .93;
}
.srp-projects-hero__copy h1 span { display: block; }
.srp-projects-hero__lead {
    max-width: 48rem;
    margin: var(--srp-space-4) 0 0;
    color: var(--srp-color-text-inverse-muted);
    font-size: var(--srp-text-lead);
    line-height: 1.58;
}
.srp-project-index { display: grid; border-top: 1px solid rgba(255,255,255,.14); }
.srp-project-index a {
    display: grid;
    grid-template-columns: 2.5rem minmax(0,1fr);
    gap: .7rem;
    padding: 1rem .25rem;
    border-bottom: 1px solid rgba(255,255,255,.14);
    color: rgba(255,255,255,.78);
    font-size: var(--srp-text-sm);
    font-weight: 750;
    transition: color var(--srp-transition), padding-left var(--srp-transition);
}
.srp-project-index a span { color: var(--srp-color-lilac); font-size: .72em; letter-spacing: .08em; }
.srp-project-index a:hover,
.srp-project-index a:focus-visible { padding-left: .65rem; color: #fff; }
.srp-project-index a:focus-visible { outline: 2px solid var(--srp-color-lilac); outline-offset: 3px; }

.srp-project-filters {
    padding-block: clamp(1.4rem, 2.2vw, 2rem);
    color: var(--srp-color-text);
    border-bottom: 1px solid rgba(23, 21, 30, .1);
    background: #eeebe7;
    scroll-margin-top: 5rem;
}
.srp-filter-bar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: clamp(1.5rem, 4vw, 4rem);
}
.srp-filter-bar__label {
    display: grid;
    min-width: 7.5rem;
    gap: .1rem;
}
.srp-filter-bar__label span {
    color: #786f7e;
    font-size: .67rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.srp-filter-bar__label strong {
    font-size: 1rem;
    letter-spacing: -.02em;
}
.srp-filter-rail {
    display: flex;
    min-width: 0;
    gap: .35rem;
    overflow-x: auto;
    padding: .25rem;
    border: 1px solid rgba(23, 21, 30, .1);
    border-radius: var(--srp-radius-pill);
    background: rgba(255, 255, 255, .5);
    scrollbar-width: none;
}
.srp-filter-rail::-webkit-scrollbar {
    display: none;
}
.srp-filter-button {
    display: inline-flex;
    min-height: 2.85rem;
    flex: 0 0 auto;
    align-items: center;
    gap: .65rem;
    padding: .7rem 1rem;
    border: 0;
    border-radius: var(--srp-radius-pill);
    color: var(--srp-color-text);
    background: transparent;
    font-size: var(--srp-text-sm);
    font-weight: 760;
    white-space: nowrap;
    cursor: pointer;
    transition:
        color var(--srp-transition),
        background-color var(--srp-transition),
        box-shadow var(--srp-transition);
}
.srp-filter-button small {
    display: grid;
    min-width: 1.45rem;
    height: 1.45rem;
    place-items: center;
    border-radius: 50%;
    color: #6c6372;
    background: rgba(23, 21, 30, .07);
    font-size: .65rem;
    font-weight: 800;
}
.srp-filter-button:hover {
    background: rgba(255, 255, 255, .8);
}
.srp-filter-button:focus-visible {
    outline: 3px solid var(--srp-color-violet);
    outline-offset: 2px;
}
.srp-filter-button.is-active {
    color: #fff;
    background: #191622;
    box-shadow: 0 .5rem 1.3rem rgba(33, 28, 42, .16);
}
.srp-filter-button.is-active small {
    color: #17151e;
    background: var(--srp-color-lilac);
}
.srp-filter-status {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.srp-project-filter-target[hidden] { display: none !important; }
.srp-project-filter-target:not([hidden]) { animation: srp-project-reveal 360ms ease-out both; }
@keyframes srp-project-reveal {
    from { opacity: .01; transform: translateY(.7rem); }
    to { opacity: 1; transform: translateY(0); }
}

.srp-project { position: relative; padding-block: var(--srp-section-space); scroll-margin-top: 5rem; }
.srp-project + .srp-project { border-top: 1px solid rgba(23,21,30,.09); }
.srp-project--light { background: var(--srp-color-surface); }
.srp-project--soft { background: #e9e3ec; }
.srp-project--dark { color: #fff; background: #11101a; border-top-color: rgba(255,255,255,.08)!important; }
.srp-project--lab {
    color: #fff;
    background: radial-gradient(circle at 82% 12%, rgba(140,114,255,.12), transparent 25%), #171421;
    border-top-color: rgba(255,255,255,.08)!important;
}

.srp-case-head {
    display: grid;
    grid-template-columns: minmax(0,1.2fr) minmax(20rem,.8fr);
    align-items: end;
    gap: clamp(2rem,6vw,7rem);
    margin-bottom: var(--srp-space-6);
}
.srp-project-number,
.srp-case-label {
    margin: 0 0 var(--srp-space-3);
    color: #6d59cb;
    font-size: var(--srp-text-xs);
    font-weight: 850;
    letter-spacing: .08em;
    line-height: 1;
    text-transform: uppercase;
}
.srp-project--dark .srp-project-number,
.srp-project--dark .srp-case-label,
.srp-project--lab .srp-project-number,
.srp-project--lab .srp-case-label { color: #b9aeff; }
.srp-case-head h2 {
    margin: 0;
    font-size: clamp(3.2rem,6vw,7rem);
    font-weight: 830;
    letter-spacing: -.065em;
    line-height: .92;
}
.srp-case-head__statement {
    max-width: 55rem;
    margin: var(--srp-space-4) 0 0;
    color: #4f4956;
    font-size: clamp(1.3rem,1rem + 1.05vw,2.05rem);
    line-height: 1.42;
}
.srp-project--dark .srp-case-head__statement,
.srp-project--lab .srp-case-head__statement { color: rgba(255,255,255,.68); }
.srp-case-head__aside { max-width: 30rem; margin: 0; color: var(--srp-color-text-muted); font-size: var(--srp-text-lead); }

.srp-project-tags { display: flex; flex-wrap: wrap; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.srp-project-tags li {
    padding: .52rem .78rem;
    border: 1px solid rgba(23,21,30,.11);
    border-radius: var(--srp-radius-pill);
    color: #5d5664;
    background: rgba(255,255,255,.55);
    font-size: var(--srp-text-xs);
    font-weight: 750;
}
.srp-project-tags--dark li,
.srp-project--dark .srp-project-tags li,
.srp-project--lab .srp-project-tags li {
    border-color: rgba(255,255,255,.13);
    color: rgba(255,255,255,.72);
    background: rgba(255,255,255,.055);
}

.srp-project-cover {
    position: relative;
    margin: 0;
    overflow: hidden;
    border: 1px solid rgba(23,21,30,.1);
    border-radius: var(--srp-radius-lg);
    background: #d8d1dc;
    box-shadow: var(--srp-shadow);
}
.srp-project-cover img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.srp-project-cover figcaption {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    max-width: calc(100% - 2rem);
    padding: .62rem .85rem;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: var(--srp-radius-pill);
    color: rgba(255,255,255,.75);
    background: rgba(8,8,16,.78);
    backdrop-filter: blur(12px);
    font-size: .7rem;
    font-weight: 700;
}
.srp-project-cover--dark { border-color: rgba(255,255,255,.11); background: #090810; box-shadow: 0 2rem 6rem rgba(0,0,0,.3); }

.srp-project-stage {
    position: relative;
    min-height: clamp(27rem, 48vw, 46rem);
    padding: clamp(1rem, 3.5vw, 3.5rem);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: var(--srp-radius-lg);
    background:
        radial-gradient(circle at 78% 18%, rgba(174, 182, 255, .17), transparent 28%),
        linear-gradient(145deg, #0a0910, #262130);
    box-shadow: var(--srp-shadow);
}
.srp-project-stage::before {
    position: absolute;
    inset: auto -8% -45% 28%;
    height: 80%;
    border-radius: 50%;
    content: "";
    background: rgba(255, 255, 255, .08);
    filter: blur(2rem);
}
.srp-browser-mockup {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: clamp(.75rem, 1.4vw, 1.2rem);
    background: #111018;
    box-shadow: 0 1.7rem 4rem rgba(8, 7, 12, .28);
}
.srp-browser-mockup--hero {
    width: min(89%, 72rem);
    margin-top: clamp(1rem, 2vw, 2rem);
    transform: rotate(-1.6deg);
    transform-origin: center bottom;
}
.srp-browser-mockup__bar {
    display: flex;
    height: clamp(2rem, 3vw, 2.7rem);
    align-items: center;
    gap: .38rem;
    padding-inline: .75rem;
    color: rgba(255, 255, 255, .56);
    background: #211f27;
    font-size: .62rem;
}
.srp-browser-mockup__bar > span {
    width: .48rem;
    height: .48rem;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #69636f;
}
.srp-browser-mockup__bar > span:first-child { background: #f08d8d; }
.srp-browser-mockup__bar > span:nth-child(2) { background: #e6c06a; }
.srp-browser-mockup__bar > span:nth-child(3) { background: #7db88d; }
.srp-browser-mockup__bar strong {
    min-width: 0;
    margin-left: .45rem;
    overflow: hidden;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.srp-browser-mockup__viewport {
    position: relative;
    overflow: hidden;
    background: #0b0a10;
}
.srp-browser-mockup__viewport img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: top;
}
.srp-phone-mockup {
    position: absolute;
    z-index: 2;
    right: clamp(-.5rem, .5vw, .8rem);
    bottom: clamp(-1rem, -1vw, -.35rem);
    width: clamp(5.4rem, 14vw, 10.5rem);
    padding: .32rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: clamp(1rem, 2.4vw, 1.8rem);
    background: #15131a;
    box-shadow: 0 1.3rem 3.4rem rgba(8, 7, 12, .38);
}
.srp-phone-mockup img {
    width: 100%;
    aspect-ratio: 9 / 16.6;
    border-radius: clamp(.7rem, 1.8vw, 1.35rem);
    object-fit: cover;
    object-position: top;
}
.srp-phone-mockup__speaker {
    position: absolute;
    z-index: 1;
    top: .7rem;
    left: 50%;
    width: 30%;
    height: .28rem;
    border-radius: var(--srp-radius-pill);
    background: rgba(0, 0, 0, .68);
    transform: translateX(-50%);
}
.srp-phone-mockup--stage {
    right: clamp(2rem, 7vw, 7.5rem);
    bottom: clamp(1.5rem, 4vw, 4rem);
    width: clamp(7rem, 17vw, 12rem);
    transform: rotate(3deg);
}

.srp-case-intro,
.srp-role-panel {
    display: grid;
    grid-template-columns: minmax(18rem,.72fr) minmax(0,1.28fr);
    gap: clamp(2rem,8vw,9rem);
}
.srp-case-intro { padding-block: var(--srp-section-space); }
.srp-case-intro h3,
.srp-section-head--project h3,
.srp-role-panel h3,
.srp-vnoise-story h3,
.srp-platform-context h3,
.srp-lab-content h3 {
    margin: 0;
    font-size: clamp(1.8rem,1.3rem + 1.55vw,3.25rem);
    font-weight: 790;
    letter-spacing: -.045em;
    line-height: 1.08;
}
.srp-rich-copy { max-width: 48rem; }
.srp-rich-copy p { margin: 0; color: var(--srp-color-text-muted); font-size: var(--srp-text-lead); line-height: 1.65; }
.srp-rich-copy p + p { margin-top: var(--srp-space-3); }

.srp-role-panel {
    gap: clamp(2rem,6vw,6rem);
    padding: clamp(1.5rem,3.5vw,3.5rem);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--srp-radius-lg);
    color: #fff;
    background: #171421;
    box-shadow: 0 2rem 5rem rgba(33,28,42,.15);
}
.srp-role-panel .srp-case-label { color: #b9aeff; }
.srp-role-panel__intro > p:last-child { max-width: 30rem; margin: var(--srp-space-3) 0 0; color: rgba(255,255,255,.6); }
.srp-role-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); border-top: 1px solid rgba(255,255,255,.1); border-left: 1px solid rgba(255,255,255,.1); }
.srp-role-grid article { min-height: 12rem; padding: clamp(1rem,2vw,1.7rem); border-right: 1px solid rgba(255,255,255,.1); border-bottom: 1px solid rgba(255,255,255,.1); }
.srp-role-grid span { color: #b9aeff; font-size: .7rem; font-weight: 850; }
.srp-role-grid h4 { margin: .8rem 0 0; font-size: 1.12rem; }
.srp-role-grid p { margin: .55rem 0 0; color: rgba(255,255,255,.58); font-size: var(--srp-text-sm); }

.srp-objectives,
.srp-problem-solution,
.srp-change-section,
.srp-project-process,
.srp-before-after,
.srp-stack-comparison { padding-top: var(--srp-section-space); }
.srp-section-head--project { max-width: 58rem; margin-bottom: var(--srp-space-5); }
.srp-section-head--project > p:last-child { max-width: 46rem; margin: var(--srp-space-3) 0 0; color: var(--srp-color-text-muted); }
.srp-section-head--inverse { color: #fff; }
.srp-section-head--inverse > p:last-child { color: rgba(255,255,255,.6); }

.srp-objective-grid,
.srp-result-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1rem; }
.srp-objective-grid article,
.srp-result-grid article {
    min-height: 14rem;
    padding: clamp(1.2rem,2vw,1.8rem);
    border: 1px solid rgba(23,21,30,.1);
    border-radius: var(--srp-radius-md);
    background: rgba(255,255,255,.58);
}
.srp-objective-grid strong { display: block; color: #6854c3; font-size: clamp(1.3rem,1rem + .75vw,1.85rem); line-height: 1.1; }
.srp-objective-grid p,
.srp-result-grid p { margin: var(--srp-space-3) 0 0; color: var(--srp-color-text-muted); font-size: var(--srp-text-sm); }
.srp-result-grid { margin-top: var(--srp-space-6); }
.srp-result-grid span { color: #6d59cb; font-size: .7rem; font-weight: 850; }
.srp-result-grid h3 { margin: 1.6rem 0 0; font-size: 1.12rem; }

.srp-ps-list { border-top: 1px solid rgba(23,21,30,.12); }
.srp-ps-list article { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: clamp(2rem,6vw,6rem); padding-block: clamp(1.3rem,2.4vw,2.25rem); border-bottom: 1px solid rgba(23,21,30,.12); }
.srp-ps-list p { display: grid; grid-template-columns: 5.5rem minmax(0,1fr); gap: 1rem; margin: 0; color: #4f4956; }
.srp-ps-list p span { color: #746d7a; font-size: .68rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.srp-ps-list p:last-child { color: #352c58; font-weight: 650; }

.srp-change-matrix {
    border-top: 1px solid rgba(23, 21, 30, .14);
}
.srp-change-row {
    display: grid;
    grid-template-columns: minmax(8rem, .38fr) minmax(0, .81fr) minmax(0, .81fr);
    gap: clamp(1rem, 3vw, 3rem);
    align-items: start;
    padding-block: clamp(1.2rem, 2.4vw, 2.1rem);
    border-bottom: 1px solid rgba(23, 21, 30, .14);
}
.srp-change-row h4 {
    margin: .2rem 0 0;
    font-size: clamp(1rem, .92rem + .25vw, 1.2rem);
    letter-spacing: -.02em;
}
.srp-change-row p {
    display: grid;
    grid-template-columns: 1.8rem minmax(0, 1fr);
    gap: .75rem;
    margin: 0;
    color: #5b5561;
    line-height: 1.55;
}
.srp-change-row p > span:first-child {
    display: grid;
    width: 1.65rem;
    height: 1.65rem;
    place-items: center;
    border-radius: 50%;
    font-size: 1rem;
    font-weight: 900;
    line-height: 1;
}
.srp-change-row__before > span:first-child {
    color: #9f2f3a;
    background: #f4d9dc;
}
.srp-change-row__after {
    color: #243d30 !important;
    font-weight: 650;
}
.srp-change-row__after > span:first-child {
    color: #1d7549;
    background: #d7ebde;
}

.srp-process-list { position: relative; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); margin: 0; padding: 0; list-style: none; }
.srp-process-list::before { position: absolute; top: 1.1rem; right: 0; left: 0; height: 1px; content: ""; background: rgba(23,21,30,.16); }
.srp-process-list li { position: relative; padding-right: clamp(1rem,2vw,2rem); }
.srp-process-list li > span { position: relative; z-index: 1; display: grid; width: 2.2rem; height: 2.2rem; place-items: center; border: 1px solid rgba(104,84,195,.3); border-radius: 50%; color: #5f4bbd; background: var(--srp-color-surface); font-size: .65rem; font-weight: 850; }
.srp-process-list h4 { margin: 1.25rem 0 0; font-size: 1rem; }
.srp-process-list p { margin: .55rem 0 0; color: var(--srp-color-text-muted); font-size: var(--srp-text-sm); }

.srp-before-after__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1rem, 2vw, 1.5rem);
}
.srp-compare-card {
    min-width: 0;
    padding: clamp(1rem, 2.3vw, 2rem);
    border: 1px solid rgba(23, 21, 30, .1);
    border-radius: var(--srp-radius-md);
    background: rgba(255, 255, 255, .46);
}
.srp-compare-card--before { background: #ebe5e4; }
.srp-compare-card--after { background: #e5ece7; }
.srp-compare-card > header {
    display: flex;
    align-items: center;
    gap: .85rem;
    margin-bottom: 1.25rem;
}
.srp-state-icon {
    display: grid;
    width: 2.45rem;
    height: 2.45rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    font-size: 1.3rem;
    font-weight: 900;
    line-height: 1;
}
.srp-compare-card--before .srp-state-icon {
    color: #9f2f3a;
    background: #f4d9dc;
}
.srp-compare-card--after .srp-state-icon {
    color: #1d7549;
    background: #d2e8d9;
}
.srp-compare-card header small {
    display: block;
    color: #716a75;
    font-size: .65rem;
    font-weight: 850;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.srp-compare-card header h4 {
    margin: .1rem 0 0;
    font-size: clamp(1.1rem, .95rem + .5vw, 1.45rem);
    letter-spacing: -.025em;
}
.srp-device-scene {
    position: relative;
    min-height: clamp(17rem, 28vw, 27rem);
    padding: clamp(.65rem, 1.5vw, 1.1rem) clamp(1.2rem, 3vw, 2.2rem) clamp(2.2rem, 4vw, 3.5rem) 0;
}
.srp-device-scene--single {
    min-height: 0;
    padding: 0;
}
.srp-compare-card .srp-browser-mockup {
    width: 100%;
    box-shadow: 0 1.15rem 2.6rem rgba(33, 28, 42, .2);
}
.srp-compare-card .srp-phone-mockup {
    right: 0;
    bottom: 0;
}
.srp-compare-card > p {
    margin: 1.2rem 0 0;
    color: #5c5660;
    font-size: var(--srp-text-sm);
    line-height: 1.55;
}
.srp-screen-details {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(13rem, .55fr);
    gap: clamp(1rem, 2vw, 1.5rem);
    margin-top: clamp(1rem, 2vw, 1.5rem);
}
.srp-screen-details figure {
    position: relative;
    min-height: 18rem;
    margin: 0;
    overflow: hidden;
    border: 1px solid rgba(23, 21, 30, .1);
    border-radius: var(--srp-radius-md);
    background: #d8d1dc;
}
.srp-screen-details img {
    width: 100%;
    height: 100%;
    min-height: 18rem;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: top;
}
.srp-screen-details figure:last-child img {
    aspect-ratio: 3 / 4;
}
.srp-screen-details figcaption {
    position: absolute;
    right: .8rem;
    bottom: .8rem;
    left: .8rem;
    padding: .7rem .85rem;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: .8rem;
    color: rgba(255, 255, 255, .84);
    background: rgba(12, 11, 19, .78);
    backdrop-filter: blur(10px);
    font-size: var(--srp-text-xs);
    font-weight: 750;
}
.srp-case-conclusion { max-width: 72rem; margin-top: var(--srp-section-space); padding: clamp(1.6rem,4vw,4rem); border: 1px solid rgba(23,21,30,.09); border-radius: var(--srp-radius-lg); background: linear-gradient(135deg,#e4ddf7,#f7f1eb); }
.srp-case-conclusion h3 { max-width: 58rem; margin: 0; font-size: clamp(2rem,1.5rem + 1.8vw,3.75rem); letter-spacing: -.05em; line-height: 1.05; }
.srp-case-conclusion > p:last-child { max-width: 50rem; margin: var(--srp-space-4) 0 0; color: #5b5362; font-size: var(--srp-text-lead); }

.srp-before-after--vnoise { padding-top: 0; }
.srp-before-after--vnoise .srp-browser-mockup__viewport img { aspect-ratio: 16 / 10; }
.srp-vnoise-story {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(2rem, 7vw, 8rem);
    padding-top: var(--srp-section-space);
}
.srp-vnoise-story article { padding-block: clamp(1.5rem,3vw,2.8rem); border-bottom: 1px solid rgba(23,21,30,.12); }
.srp-vnoise-story article:first-child { border-top: 1px solid rgba(23,21,30,.12); }
.srp-vnoise-story article > p:last-child,
.srp-platform-context > div > p:last-child,
.srp-lab-content > div > p:last-child { margin: var(--srp-space-3) 0 0; color: var(--srp-color-text-muted); line-height: 1.65; }
.srp-change-section--vnoise + .srp-screen-details { margin-top: var(--srp-space-6); }
.srp-screen-details--vnoise { grid-template-columns: minmax(0, 1.55fr) minmax(12rem, .45fr); }

.srp-platform-cover { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(18rem,.6fr); gap: 1rem; }
.srp-platform-scale { display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(1.5rem,3vw,3rem); border: 1px solid rgba(255,255,255,.11); border-radius: var(--srp-radius-lg); background: rgba(255,255,255,.055); }
.srp-platform-scale strong { font-size: clamp(5rem,8vw,9rem); letter-spacing: -.07em; line-height: .78; }
.srp-platform-scale span { margin-top: 1rem; color: #c4baff; font-weight: 800; }
.srp-platform-scale > p:last-child { margin: var(--srp-space-3) 0 0; color: rgba(255,255,255,.55); font-size: var(--srp-text-sm); }
.srp-platform-context { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: clamp(2rem,7vw,8rem); padding-top: var(--srp-section-space); }
.srp-project--dark .srp-platform-context > div > p:last-child { color: rgba(255,255,255,.62); }
.srp-duty-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .7rem; margin: 0; padding: 0; list-style: none; }
.srp-duty-list li { min-height: 5rem; padding: 1rem; border: 1px solid rgba(255,255,255,.1); border-radius: 1rem; color: rgba(255,255,255,.7); background: rgba(255,255,255,.04); font-size: var(--srp-text-sm); font-weight: 700; }

.srp-platform-timeline { padding-top: var(--srp-section-space); }
.srp-platform-timeline ol { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); margin: 0; padding: 0; border-top: 1px solid rgba(255,255,255,.15); list-style: none; }
.srp-platform-timeline li { position: relative; padding: 2rem clamp(.8rem,1.5vw,1.4rem) 0 0; }
.srp-platform-timeline li::before { position: absolute; top: -.37rem; left: 0; width: .7rem; height: .7rem; border: 2px solid #11101a; border-radius: 50%; content: ""; background: #b9aeff; box-shadow: 0 0 0 1px rgba(185,174,255,.5); }
.srp-platform-timeline time { color: #b9aeff; font-size: 1.25rem; font-weight: 850; }
.srp-platform-timeline h4 { margin: .8rem 0 0; font-size: .95rem; }
.srp-platform-timeline p { margin: .55rem 0 0; color: rgba(255,255,255,.52); font-size: .78rem; }

.srp-comparison-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.srp-comparison-grid article { padding: clamp(1.4rem,3vw,2.8rem); border: 1px solid rgba(255,255,255,.11); border-radius: var(--srp-radius-md); background: rgba(255,255,255,.045); }
.srp-comparison-grid__positive { background: rgba(174,182,255,.09)!important; }
.srp-comparison-grid__eyebrow { margin: 0; color: #b9aeff; font-size: var(--srp-text-xs); font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.srp-comparison-grid h4 { margin: var(--srp-space-3) 0 0; font-size: clamp(1.35rem,1rem + .8vw,2rem); }
.srp-comparison-grid ul { display: grid; gap: .65rem; margin: var(--srp-space-4) 0 0; padding: 0; list-style: none; }
.srp-comparison-grid li { position: relative; min-height: 1.45rem; padding-left: 2rem; color: rgba(255,255,255,.66); }
.srp-comparison-grid li::before {
    position: absolute;
    top: .05rem;
    left: 0;
    display: grid;
    width: 1.4rem;
    height: 1.4rem;
    place-items: center;
    border-radius: 50%;
    font-size: .78rem;
    font-weight: 900;
    line-height: 1;
}
.srp-comparison-grid__negative li::before {
    content: "×";
    color: #ff9fa7;
    background: rgba(175, 54, 66, .22);
}
.srp-comparison-grid__positive li::before {
    content: "✓";
    color: #9de1b7;
    background: rgba(52, 142, 89, .22);
}

.srp-solution-grid { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 1rem; }
.srp-solution-grid article { grid-column: span 4; min-height: 22rem; padding: clamp(1.3rem,2.5vw,2.2rem); border: 1px solid rgba(23,21,30,.1); border-radius: var(--srp-radius-md); background: rgba(255,255,255,.58); }
.srp-solution-grid article:nth-child(4),
.srp-solution-grid article:nth-child(5) { grid-column: span 6; min-height: 18rem; }
.srp-solution-grid article > span { color: #6d59cb; font-size: .72rem; font-weight: 850; }
.srp-solution-grid h3 { margin: 1.8rem 0 0; font-size: clamp(1.35rem,1.05rem + .8vw,2rem); letter-spacing: -.035em; }
.srp-solution-grid dl { display: grid; gap: 1rem; margin: var(--srp-space-4) 0 0; }
.srp-solution-grid dl > div { display: grid; grid-template-columns: 4.4rem minmax(0,1fr); gap: .8rem; }
.srp-solution-grid dt { color: #6d6571; font-size: .67rem; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.srp-solution-grid dd { margin: 0; color: var(--srp-color-text-muted); font-size: var(--srp-text-sm); }
.srp-solution-note { display: grid; grid-template-columns: minmax(10rem,.35fr) minmax(0,1.65fr); gap: 2rem; margin-top: var(--srp-space-5); padding: clamp(1.4rem,3vw,2.6rem); border-left: 3px solid #8c72ff; color: #fff; background: #171421; }
.srp-solution-note p { max-width: 60rem; margin: 0; color: rgba(255,255,255,.62); }

.srp-lab-gallery { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.srp-lab-gallery figure { position: relative; margin: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: var(--srp-radius-md); background: #0c0b13; }
.srp-lab-gallery__wide { grid-column: 1/-1; }
.srp-lab-gallery img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.srp-lab-gallery figure:not(.srp-lab-gallery__wide) img { aspect-ratio: 4/3; }
.srp-lab-gallery figcaption { position: absolute; right: 1rem; bottom: 1rem; left: 1rem; padding: .8rem 1rem; border: 1px solid rgba(255,255,255,.12); border-radius: 1rem; color: rgba(255,255,255,.76); background: rgba(8,8,16,.74); backdrop-filter: blur(12px); font-size: var(--srp-text-sm); font-weight: 750; }
.srp-lab-content { display: grid; grid-template-columns: minmax(0,1fr) minmax(24rem,1fr); gap: clamp(2rem,7vw,8rem); padding-top: var(--srp-section-space); }
.srp-lab-content > div > p:last-child { color: rgba(255,255,255,.6); }
.srp-lab-content ul { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .7rem; margin: 0; padding: 0; list-style: none; }
.srp-lab-content li { display: flex; min-height: 5rem; align-items: center; padding: 1rem; border: 1px solid rgba(255,255,255,.1); border-radius: 1rem; color: rgba(255,255,255,.68); background: rgba(255,255,255,.04); font-size: var(--srp-text-sm); font-weight: 700; }
.srp-lab-footer { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-top: var(--srp-space-6); padding-top: var(--srp-space-5); border-top: 1px solid rgba(255,255,255,.12); }
.srp-lab-footer p { max-width: 58rem; margin: 0; color: rgba(255,255,255,.6); }
.srp-lab-footer strong { color: #fff; }

/* Raccord direct entre le Lab et le contact : aucun faux bandeau de transition. */
.srp-projects > .srp-contact {
    margin-top: 0;
    padding-top: var(--srp-section-space);
    border-top: 1px solid rgba(255,255,255,.08);
    background: radial-gradient(circle at 12% 24%, rgba(140,114,255,.12), transparent 28%), #0c0b13;
}

@media (max-width: 75rem) {
    .srp-objective-grid,
    .srp-result-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .srp-platform-timeline ol { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 2.5rem 0; }
    .srp-solution-grid article { grid-column: span 6; min-height: 18rem; }
    .srp-solution-grid article:last-child { grid-column: 1/-1; min-height: 15rem; }
}
@media (max-width: 63.9375rem) {
    .srp-projects-hero__inner,
    .srp-case-head,
    .srp-case-intro,
    .srp-role-panel,
    .srp-platform-context,
    .srp-lab-content { grid-template-columns: 1fr; }
    .srp-projects-hero__inner { gap: var(--srp-space-6); }
    .srp-project-index { grid-template-columns: repeat(2,minmax(0,1fr)); border-left: 1px solid rgba(255,255,255,.14); }
    .srp-project-index a { border-right: 1px solid rgba(255,255,255,.14); }
    .srp-platform-cover { grid-template-columns: 1fr; }
    .srp-platform-scale { min-height: 18rem; }
}
@media (max-width: 52rem) {
    .srp-filter-bar { grid-template-columns: 1fr; gap: .9rem; }
    .srp-filter-bar__label { display: flex; min-width: 0; align-items: baseline; gap: .55rem; }
    .srp-filter-rail { border-radius: 1rem; }
    .srp-role-grid,
    .srp-comparison-grid,
    .srp-before-after__grid { grid-template-columns: 1fr; }
    .srp-change-row { grid-template-columns: 1fr; gap: .8rem; }
    .srp-change-row h4 { margin-bottom: .25rem; }
    .srp-vnoise-story,
    .srp-screen-details,
    .srp-screen-details--vnoise { grid-template-columns: 1fr; }
    .srp-screen-details figure:last-child img { aspect-ratio: 16 / 10; }
    .srp-ps-list article { grid-template-columns: 1fr; gap: 1rem; }
    .srp-process-list { grid-template-columns: 1fr; }
    .srp-process-list::before { top: 0; bottom: 0; left: 1.08rem; width: 1px; height: auto; }
    .srp-process-list li { min-height: 9rem; padding: 0 0 2rem 4rem; }
    .srp-process-list li > span { position: absolute; top: 0; left: 0; }
    .srp-process-list h4 { margin-top: 0; }
    .srp-duty-list,
    .srp-lab-content ul { grid-template-columns: 1fr; }
    .srp-platform-timeline ol { grid-template-columns: 1fr; gap: 0; border-top: 0; border-left: 1px solid rgba(255,255,255,.15); }
    .srp-platform-timeline li { padding: 0 0 2.4rem 2rem; }
    .srp-platform-timeline li::before { top: .5rem; left: -.37rem; }
    .srp-solution-grid { grid-template-columns: 1fr; }
    .srp-solution-grid article,
    .srp-solution-grid article:nth-child(4),
    .srp-solution-grid article:nth-child(5),
    .srp-solution-grid article:last-child { grid-column: auto; min-height: 0; }
    .srp-solution-note { grid-template-columns: 1fr; gap: 1rem; }
}
@media (max-width: 39.9375rem) {
    .srp-projects-hero { min-height: auto; }
    .srp-projects-hero__inner { min-height: auto; padding-top: 9rem; padding-bottom: 4rem; }
    .srp-projects-hero__copy h1 { font-size: clamp(3rem,15vw,4.8rem); }
    .srp-projects-hero__lead { font-size: 1.05rem; }
    .srp-project-index { grid-template-columns: 1fr; }
    .srp-project-filters { padding-block: 1rem; }
    .srp-filter-rail { margin-inline: calc(var(--srp-gutter) * -1); padding: .25rem var(--srp-gutter); border-right: 0; border-left: 0; border-radius: 0; }
    .srp-filter-button { min-height: 2.75rem; padding-inline: .9rem; }
    .srp-case-head h2 { font-size: clamp(3rem,16vw,5rem); }
    .srp-case-head__statement { font-size: 1.15rem; }
    .srp-project-stage { min-height: 19rem; padding: .75rem; }
    .srp-browser-mockup--hero { width: 95%; margin-top: 1rem; }
    .srp-phone-mockup--stage { right: 1rem; bottom: 1rem; width: 5.7rem; }
    .srp-device-scene { min-height: 16rem; padding-right: 1rem; }
    .srp-compare-card .srp-phone-mockup { width: 4.8rem; }
    .srp-project-cover img,
    .srp-project-cover--portrait img { aspect-ratio: 4/3; }
    .srp-project-cover figcaption { position: static; max-width: none; border: 0; border-radius: 0; background: #171421; }
    .srp-role-grid { border-left: 0; }
    .srp-role-grid article { min-height: 0; border-left: 1px solid rgba(255,255,255,.1); }
    .srp-objective-grid,
    .srp-result-grid { grid-template-columns: 1fr; }
    .srp-objective-grid article,
    .srp-result-grid article { min-height: 0; }
    .srp-ps-list p { grid-template-columns: 1fr; gap: .35rem; }
    .srp-screen-details figure,
    .srp-screen-details img { min-height: 14rem; }
    .srp-solution-grid dl > div { grid-template-columns: 1fr; gap: .35rem; }
    .srp-lab-gallery { grid-template-columns: 1fr; }
    .srp-lab-gallery__wide { grid-column: auto; }
    .srp-lab-gallery img,
    .srp-lab-gallery figure:not(.srp-lab-gallery__wide) img { aspect-ratio: 4/3; }
    .srp-lab-footer { align-items: stretch; flex-direction: column; }
}