.case-summary {
    display:grid;
    grid-template-columns:1.5fr 1fr;
    gap:10%;
}
.case-summary h2 {
    font-size:30px;
    margin-bottom:25px;
}
.case-summary p {
    line-height: 1.9;
    color:var(--muted);
}
.case-summary dl {
    margin:0;
    border-top:1px solid var(--line);
}
.case-summary dl>div {
    display:flex;
    justify-content:space-between;
    gap:20px;
    padding:18px 0;
    border-bottom:1px solid var(--line);
    font-size:16px;
}
.case-summary dt {
    color:var(--muted);
}
.case-summary dd {
    margin:0;
}
.project-points {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
    margin:55px 0;
}
.case-service-tags {
    margin-top: 24px;
}
.case-service-tags a {
    display: inline-block;
    background: var(--paper);
    color: var(--navy);
    padding: 5px 13px;
    font-size: 14px;
    border: 1px solid var(--line);
}
.case-service-tags a:hover,
.case-service-tags a:focus-visible {
    background: var(--orange);
    color: white;
}
.project-points>div {
    display:flex;
    gap:20px;
    padding:25px;
    background:var(--paper);
    align-items:center;
}
.project-points span {
    font:30px Arial,sans-serif;
    color:var(--orange);
}
.project-points h3 {
    font-size:18px;
}
.project-gallery {
    columns:2;
    column-gap:25px;
}
.comparison-gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 25px;
    columns: auto;
}
.comparison-caption {
    padding: 12px 15px;
    background: var(--paper);
    color: var(--ink);
    font-size: 14px;
}
@media (max-width: 600px) {
    .comparison-gallery { grid-template-columns: 1fr; }
}
.gallery-item {
    display:block;
    position:relative;
    margin-bottom:25px;
    break-inside:avoid;
    background:var(--paper);
}
.gallery-item img {
    width:100%;
    height:auto;
}
.gallery-item>span {
    position:absolute;
    bottom:0;
    right:0;
    background:var(--navy);
    color:#fff;
    font-size:13px;
    padding:9px 15px;
}
.gallery-item b {
    color:var(--orange);
    margin-left:20px;
}
.project-bottom {
    display:flex;
    justify-content:space-between;
    gap:25px;
    align-items:center;
    margin-top:65px;
}
.project-bottom h2 {
    font-size:27px;
    margin-bottom:15px;
}
.project-bottom p {
    color:var(--muted);
    font-size:16px;
}
.lightbox {
    border:0;
    background:#1e2529f7;
    color:#fff;
    width:100vw;
    max-width:none;
    height:100dvh;
    max-height:none;
    padding:60px 75px;
    margin:0;
}
.lightbox::backdrop {
    background:#1e2529;
}
.lightbox[open] {
    display:flex;
    align-items:center;
    justify-content:center;
}
.lightbox figure {
    text-align:center;
}
.lightbox figure img {
    max-width:calc(100vw - 160px);
    max-height:calc(100dvh - 155px);
    object-fit:contain;
    margin:auto;
}
.lightbox figcaption {
    color:#cbd0d2;
}
.lightbox button {
    position:absolute;
    border:1px solid #ffffff40;
    background:#352d2b;
    color:white;
    width:45px;
    height:45px;
    font-size:25px;
}
.lightbox-close {
    right:22px;
    top:18px;
}
.lightbox-prev {
    left:15px;
    top:50%;
}
.lightbox-next {
    right:15px;
    top:50%;
}
.lightbox-original {
    position:absolute;
    bottom:20px;
    font-size:14px;
    color:#fff;
    border-bottom:1px solid #ffffff60;
}
@media(max-width:700px) {
    .case-summary {
        grid-template-columns:1fr;
        gap:30px;
    }
    .case-summary h2 {
        font-size:25px;
    }
    .project-points {
        grid-template-columns:1fr;
        gap:10px;
        margin:35px 0;
    }
    .project-points>div {
        padding:15px 20px;
    }
    .project-gallery {
        columns:1;
    }
    .project-bottom {
        display:block;
    }
    .project-bottom .button {
        margin-top:25px;
    }
    .lightbox {
        padding:65px 15px 110px;
    }
    .lightbox figure img {
        max-width:calc(100vw - 30px);
        max-height:calc(100dvh - 200px);
    }
    .lightbox-prev,.lightbox-next {
        top:auto!important;
        bottom:50px;
    }
    .lightbox-prev {
        left:25px;
    }
    .lightbox-next {
        right:25px;
    }
    .lightbox figcaption {
        font-size:13px;
    }
}