.project-detail-page {
    --pd-bg: #080808;
    --pd-surface: #11110f;
    --pd-ivory: #f1eee8;
    --pd-muted: #aaa49b;
    --pd-gold: #b99a61;
    --pd-border: rgba(185, 154, 97, .25);
    background: var(--pd-bg);
    color: var(--pd-ivory);
}

.project-detail-page .project-detail-hero { height: min(820px, calc(100svh - 80px)); min-height: 620px; }
.project-detail-page .project-detail-hero img { filter: saturate(.82) contrast(1.04); }
.project-detail-page .project-hero-overlay {
    background: linear-gradient(90deg, rgba(5,5,5,.94) 0%, rgba(5,5,5,.68) 42%, rgba(5,5,5,.08) 78%),
        linear-gradient(0deg, rgba(5,5,5,.88), transparent 55%);
}
.project-detail-page .project-hero-content { max-width: 850px; padding: 80px 0; }
.project-detail-page .project-hero-content h1 { max-width: 780px; font-size: clamp(56px, 7.2vw, 108px); font-weight: 500; line-height: .92; letter-spacing: -.025em; text-shadow: none; }
.project-detail-page .project-hero-content .subtitle { max-width: 620px; color: #d0cbc3; font-size: 17px; line-height: 1.7; }
.project-detail-page .breadcrumb-project { padding: 0 0 18px; border-radius: 0; border-bottom: 1px solid var(--pd-border); background: transparent; backdrop-filter: none; color: var(--pd-muted); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.project-detail-page .project-badge-hero { padding: 10px 0; margin-right: 28px; border-radius: 0; background: transparent; color: #d8d2c9; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.project-detail-page .project-badge-hero i { color: var(--pd-gold); }

.project-detail-page .project-detail-content-section { padding: 110px 0 !important; background: var(--pd-bg) !important; }
.project-detail-page .project-info-card { margin: 0 0 30px; padding: clamp(32px, 5vw, 72px); border: 1px solid rgba(241,238,232,.1); border-radius: 0; background: var(--pd-surface); box-shadow: none; }
.project-detail-page .project-info-card:first-child { background: transparent; border-color: var(--pd-border); }
.project-detail-page .project-info-card .section-title { margin-bottom: 42px !important; color: var(--pd-ivory) !important; font: 500 clamp(36px, 4vw, 56px)/1 "Cormorant Garamond", serif; }
.project-detail-page .project-info-card .section-title i { display: none; }
.project-detail-page .project-info-item { min-height: 105px; padding: 22px 0; border-color: rgba(241,238,232,.1); }
.project-detail-page .project-info-item strong { color: var(--pd-gold) !important; font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.project-detail-page .project-info-item p { color: var(--pd-ivory) !important; font: 500 25px/1.3 "Cormorant Garamond", serif; }
.project-detail-page .project-info-card .lead { max-width: 900px; color: #d6d0c8 !important; font-size: clamp(19px, 2vw, 25px) !important; line-height: 1.8 !important; }

.project-detail-page .project-tour-360-cta-section {
    position: relative; min-height: 600px; display: grid; align-items: center; overflow: hidden;
    padding: 100px 0 !important; border: 0 !important;
    background: linear-gradient(90deg, rgba(5,5,5,.96) 0%, rgba(5,5,5,.82) 46%, rgba(5,5,5,.2) 100%), url('/images/tours/demo-kitchen-360.jpg') center/cover no-repeat !important;
}
.project-detail-page .project-tour-360-cta-section::after { content: "360°"; position: absolute; right: 5vw; bottom: -45px; color: rgba(241,238,232,.09); font: 500 clamp(140px, 23vw, 360px)/1 "Cormorant Garamond", serif; pointer-events: none; }
.project-detail-page .project-tour-360-cta-section .container { position: relative; z-index: 1; margin-left: max(calc((100vw - 1320px)/2), 5vw); max-width: 680px; text-align: left !important; }
.project-detail-page .project-tour-360-cta-section h2 { max-width: 620px; margin: 18px 0 24px !important; font: 500 clamp(48px, 6vw, 82px)/.98 "Cormorant Garamond", serif !important; }
.project-detail-page .project-tour-360-cta-section p { margin: 0 0 38px !important; color: #d5d0c8 !important; font-size: 16px; line-height: 1.8; }
.project-detail-page #btn-open-360-tour { border-radius: 0 !important; border-color: var(--pd-gold) !important; color: var(--pd-gold) !important; letter-spacing: .13em; }
.project-detail-page #btn-unavailable-360-tour { border-radius: 0 !important; border-color: var(--pd-gold) !important; color: var(--pd-gold) !important; letter-spacing: .13em; }
.project-detail-page .tour-360-unavailable-message { display: none; max-width: 600px; margin-top: 24px; padding: 16px 20px; border-left: 2px solid var(--pd-gold); background: rgba(8,8,8,.72); color: #ddd6cc; line-height: 1.7; }
.project-detail-page .tour-360-unavailable-message.is-visible { display: block; animation: tourNoticeIn .25s ease both; }
.project-detail-page .tour-360-unavailable-message i { margin-right: 9px; color: var(--pd-gold); }
@keyframes tourNoticeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.project-detail-page .project-editorial-gallery { padding: 120px 0 !important; background: var(--pd-bg) !important; }
.project-detail-page .project-gallery-heading { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 30px; margin-bottom: 54px; text-align: left; }
.project-detail-page .project-gallery-heading h2 { margin: 0; color: var(--pd-ivory); font: 500 clamp(48px, 6vw, 82px)/1 "Cormorant Garamond", serif; }
.project-detail-page .project-gallery-heading p { margin: 14px 0 0; color: var(--pd-muted); }
.project-detail-page .project-gallery-count { color: var(--pd-gold); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; }
.project-detail-page .gallery-grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 260px; gap: 18px; margin: 0; }
.project-detail-page .gallery-item { grid-column: span 5; position: relative; min-height: 0; border-radius: 0; box-shadow: none; background: #171715; }
.project-detail-page .gallery-item:first-child { grid-column: span 7; grid-row: span 2; }
.project-detail-page .gallery-item:nth-child(2) { grid-column: span 5; }
.project-detail-page .gallery-item:nth-child(3) { grid-column: span 5; }
.project-detail-page .gallery-item:nth-child(4),
.project-detail-page .gallery-item:nth-child(5) { grid-column: span 6; }
.project-detail-page .gallery-item img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.82); transition: transform .65s ease, filter .4s ease; }
.project-detail-page .gallery-item:hover { transform: none; }
.project-detail-page .gallery-item:hover img { transform: scale(1.035); filter: saturate(1); }
.project-detail-page .gallery-overlay { align-items: center; justify-content: center; padding: 25px; opacity: 0; background: rgba(5,5,5,.42); }
.project-detail-page .gallery-overlay i { color: var(--pd-ivory); font-size: 22px; transform: scale(.85); transition: .3s ease; }
.project-detail-page .gallery-item:hover .gallery-overlay { opacity: 1; }
.project-detail-page .gallery-item:hover .gallery-overlay i { transform: scale(1); }
.project-detail-page .project-badge { display: none; }

@media (max-width: 900px) {
    .project-detail-page .project-detail-hero { height: 680px; min-height: 0; }
    .project-detail-page .project-hero-overlay { background: linear-gradient(0deg, rgba(5,5,5,.94), rgba(5,5,5,.15)); }
    .project-detail-page .project-hero-content { padding: 48px 0; }
    .project-detail-page .gallery-grid { grid-auto-rows: 230px; }
    .project-detail-page .gallery-item, .project-detail-page .gallery-item:first-child, .project-detail-page .gallery-item:nth-child(n) { grid-column: span 6; grid-row: span 1; }
    .project-detail-page .gallery-item:first-child { grid-column: span 12; grid-row: span 2; }
}

@media (max-width: 600px) {
    .project-detail-page .project-detail-hero { height: 620px; }
    .project-detail-page .project-hero-content h1 { font-size: 48px; }
    .project-detail-page .project-detail-content-section, .project-detail-page .project-editorial-gallery { padding: 72px 0 !important; }
    .project-detail-page .project-info-card { padding: 28px 22px; }
    .project-detail-page .project-tour-360-cta-section { min-height: 620px; }
    .project-detail-page .project-tour-360-cta-section .container { margin: auto; padding: 0 24px; }
    .project-detail-page .project-gallery-heading { grid-template-columns: 1fr; }
    .project-detail-page .gallery-grid { display: block; }
    .project-detail-page .gallery-item { height: 310px; margin-bottom: 14px; }
    .project-detail-page .gallery-item:first-child { height: 430px; }
}