.portfolio-main { padding-top: var(--space-20); }
.portfolio-hero { padding-block: var(--space-16); background: linear-gradient(to right, var(--color-bg) 0%, rgba(220, 220, 220, 0.8) 100%); position: relative; overflow: hidden; border-bottom: 1px solid var(--color-gray-800); }
.hero-container { grid-template-columns: 1fr; gap: var(--space-12); align-items: center; }
.hero-content h1 { color: var(--color-primary); margin-bottom: var(--space-6); }
.hero-content p { font-size: var(--text-lg); margin-bottom: var(--space-8); max-width: 600px; }
.hero-image img { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg), 0 0 40px rgba(201, 147, 46, 0.1); object-fit: cover; width: 100%; height: auto; max-height: 500px; }
.portfolio-gallery { padding-block: var(--space-20); }
.gallery-grid { grid-template-columns: 1fr; gap: var(--space-8); }
.portfolio-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; border-color: var(--color-gray-800); background-color: var(--color-gray-900); }
.portfolio-card:hover .card-image-wrapper img { transform: scale(1.05); }
.card-image-wrapper { width: 100%; height: 250px; overflow: hidden; border-bottom: 1px solid var(--color-gray-800); }
.card-image-wrapper img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); }
.card-content { padding: var(--space-6); flex-grow: 1; display: flex; flex-direction: column; }
.card-content h2 { font-size: var(--text-xl); margin-bottom: var(--space-3); color: var(--color-primary); }
.card-content p { margin-bottom: 0; color: var(--color-gray-300); font-size: var(--text-base); }
.portfolio-cta { padding-block: var(--space-24); background: linear-gradient(135deg, var(--color-gray-900) 0%, var(--color-bg) 100%); border-top: 1px solid var(--color-gray-800); }
.portfolio-cta .container { max-width: 800px; }
.portfolio-cta h2 { font-size: var(--text-3xl); margin-bottom: var(--space-4); color: var(--color-primary); }
.portfolio-cta p { font-size: var(--text-lg); margin-bottom: var(--space-8); color: var(--color-gray-300); }
.cta-btn { font-size: var(--text-base); padding: var(--space-4) var(--space-8); }
.cta-btn-outline { font-size: var(--text-base); padding: var(--space-4) var(--space-8); background-color: transparent; border: 1px solid var(--color-primary); color: var(--color-primary); }
.cta-btn-outline:hover { background-color: var(--color-primary); color: var(--color-bg); }
@media (min-width: 768px) {
    .hero-container { grid-template-columns: 1fr 1fr; }
    .gallery-grid { grid-template-columns: repeat(2, 1fr); }
    .portfolio-cta h2 { font-size: var(--text-4xl); }
    .portfolio-hero { padding-block: var(--space-20); }
}
@media (min-width: 1024px) {
    .gallery-grid { grid-template-columns: repeat(3, 1fr); }
    .portfolio-hero { padding-block: var(--space-24); }
}