/* Active Nav State (Scroll-Spy) */
.nav-cluster a.is-active {
    color: var(--ink-obsidian);
}

.nav-cluster a.is-active::after {
    transform: scaleX(1);
}

/* Interactive Case Zoom Trigger */
.case-media {
    cursor: zoom-in;
    position: relative;
}

.case-card {
    transform-style: preserve-3d;
    will-change: transform;
}

/* Architectural Case Lightbox Modal */
.case-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(17, 17, 19, 0.86);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.case-lightbox.open {
    opacity: 1;
    visibility: visible;
}

.lightbox-frame {
    position: relative;
    max-width: 1080px;
    width: 100%;
    background: var(--bg-bone);
    border: 1px solid var(--ink-obsidian);
    padding: 16px;
    transform: translateY(16px) scale(0.98);
    transition: transform 0.35s var(--ease-luxury);
}

.case-lightbox.open .lightbox-frame {
    transform: translateY(0) scale(1);
}

.lightbox-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--rule-hairline);
}

.lightbox-title {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink-obsidian);
}

.lightbox-close {
    width: 34px;
    height: 34px;
    background: var(--ink-obsidian);
    color: #FFFFFF;
    border: none;
    font-family: var(--font-mono);
    font-size: 1.1rem;
    cursor: pointer;
    transition: background-color 0.2s;
}

.lightbox-close:hover {
    background: var(--signal-orange);
}

.lightbox-img {
    width: 100%;
    max-height: 76vh;
    object-fit: contain;
    display: block;
    background: #EAE7DF;
}

@media (max-width: 600px) {
    .case-lightbox { padding: 12px; }
    .lightbox-frame { padding: 12px; }
    .lightbox-title { font-size: 0.88rem; }
    .lightbox-close { width: 44px; height: 44px; flex-shrink: 0; }
    .lightbox-img { max-height: 70svh; }
}