header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; }
body { padding-top: 70px; }
main { max-width: 1200px; margin: 2rem auto; padding: 0 2rem; }
.project-hero { background: linear-gradient(135deg, #1e3a5f 0%, #2d4a70 100%); color: #fff; padding: 3rem 2rem; border-radius: 12px; margin-bottom: 2rem; }
.project-hero h1 { margin: 0 0 0.5rem 0; font-size: 32px; }
.project-hero p { margin: 0; opacity: 0.9; }
.project-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 2rem; margin-bottom: 2rem; }
.project-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 2rem; }
.project-card h2 { font-size: 18px; font-weight: 700; color: #1e3a5f; margin-top: 0; }
.info-row { display: flex; justify-content: space-between; padding: 0.75rem 0; border-bottom: 1px solid #e5e7eb; }
.info-label { font-weight: 600; color: #1e3a5f; }
.info-value { color: #666; }
.status-badge { display: inline-block; padding: 4px 12px; border-radius: 12px; font-size: 12px; font-weight: 600; text-transform: capitalize; }
.status-active { background: #d1fae5; color: #065f46; }
.status-completed { background: #d1fae5; color: #065f46; }
.status-planning { background: #fef3c7; color: #78350f; }
.status-on-hold { background: #fecaca; color: #7f1d1d; }
.back-link { display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 2rem; color: #0891b2; text-decoration: none; font-weight: 600; }
.back-link:hover { color: #06b6d4; }
@media (max-width: 768px) { .project-grid { grid-template-columns: 1fr; } }