.project-catalog-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 32px 24px !important;
    max-width: 1080px;
    margin: 28px auto 0;
}

.project-catalog-item {
    display: block;
    color: #393536;
    text-align: center;
    text-decoration: none;
}

.project-catalog-item img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 0 !important;
}

.project-catalog-item h3 {
    margin: 18px 0 10px;
    color: #393536;
    font-size: 20px;
    line-height: 1.3;
}

.project-catalog-item span {
    color: #0477ba;
    font-size: 14px;
    font-weight: 600;
}

.project-detail-page {
    margin: 0;
    background: #fff;
    color: #393536;
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
}

.project-detail-page *,
.project-detail-page *::before,
.project-detail-page *::after {
    box-sizing: border-box;
}

.project-detail-page .navbar {
    position: fixed;
    inset: 0 0 auto;
    width: 100%;
    z-index: 1000;
    background: #f7f8fa;
}

.project-detail-page .navbar-content,
.project-detail-page .social-links {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.project-detail-page .social-links {
    gap: 20px;
}

.project-detail-page .navbar a {
    color: #393536;
    text-decoration: none;
}

.project-detail-page .nav-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.project-detail-page .nav-menu > li > a {
    display: block;
    padding: 8px 12px;
}

.project-detail-page .dropdown {
    position: relative;
}

.project-detail-page .dropdown-content {
    position: absolute;
    top: 100%;
    right: 0;
    display: none;
    background: #fff;
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}

.project-detail-page .dropdown:hover .dropdown-content,
.project-detail-page .dropdown:focus-within .dropdown-content {
    display: block;
}

.project-detail-page .dropdown-content a {
    display: block;
    padding: 12px 18px;
}

.project-detail-page .mobile-menu-toggle,
.project-detail-page .sidebar-close {
    border: 0;
    background: transparent;
    color: #393536;
    font-size: 22px;
    cursor: pointer;
}

.project-detail-page .mobile-sidebar {
    position: fixed;
    top: 0;
    height: 100vh;
    z-index: 1002;
    background: #fff;
    overflow-y: auto;
}

.project-detail-page .sidebar-header {
    display: flex;
    justify-content: space-between;
    padding: 16px 20px;
}

.project-detail-page .sidebar-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.project-detail-page .sidebar-link {
    color: #393536;
    text-decoration: none;
    padding: 12px 20px;
}

.project-detail-page .mobile-sidebar-overlay {
    position: fixed;
    inset: 0;
    z-index: 1001;
    background: rgba(0,0,0,0.45);
    opacity: 0;
    visibility: hidden;
}

.project-detail-page .mobile-sidebar-overlay.active {
    opacity: 1;
    visibility: visible;
}

.project-detail-page .back-arrow {
    display: block;
    text-align: center;
    font-size: 13px;
    text-decoration: none;
    color: #657078;
    margin-bottom: 20px;
}

.project-detail-heading {
    margin: 0;
    text-align: center;
    font-family: 'Bebas Neue', sans-serif;
    font-weight: 400;
    line-height: 1.2;
}

.project-detail-content {
    max-width: 1080px;
    padding: 0 24px;
    margin: 0 auto 64px;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 48px;
}

.project-photo-wrap {
    position: relative;
}

.project-photo-wrap > img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    background: #f5f7f8;
}

.project-photo-wrap > button {
    position: absolute;
    top: calc(50% - 22px);
    width: 44px;
    height: 44px;
    border: 1px solid #d4dadd;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
}

.project-photo-wrap > button[data-project-step="-1"] { left: 8px; }
.project-photo-wrap > button[data-project-step="1"] { right: 8px; }

#projectCounter {
    display: block;
    text-align: center;
    font-size: 12px;
    margin: 8px 0;
    color: #657078;
}

#projectThumbnails {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

#projectThumbnails button {
    padding: 0;
    border: 2px solid transparent;
    background: #fff;
    cursor: pointer;
}

#projectThumbnails button[aria-pressed="true"] { border-color: #0477ba; }
#projectThumbnails img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.project-summary h2 { margin: 0 0 20px; font-size: 20px; }
.project-summary p { color: #657078; line-height: 1.8; }
.project-summary .provisional-note { font-size: 13px; }
.project-summary a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 12px 22px;
    margin-top: 12px;
    gap: 10px;
    color: #fff;
    background: #393536;
    border-radius: 4px;
    text-decoration: none;
    font-size: 14px;
}

.project-detail-page .footer {
    background: #393536;
    color: #fff;
    text-align: center;
    padding: 32px 24px;
    font-size: 16px;
}

.project-detail-page .footer p { margin: 0 0 16px; }
.project-detail-page .footer a { color: inherit; }
.project-detail-page [hidden] { display: none !important; }
.project-missing { padding: 140px 24px 60px; text-align: center; }

@media (min-width: 769px) {
    .project-detail-page .mobile-sidebar,
    .project-detail-page .mobile-sidebar-overlay { display: none; }
}

@media (max-width: 768px) {
    .project-catalog-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
    .project-detail-content { grid-template-columns: 1fr; gap: 28px; }
}