.portfolio-page{background:#0d0d0b;color:#efe9dc;overflow-x:hidden}
.portfolio-page .site-header{background:#0d0d0b;border-bottom:1px solid rgba(239,233,220,.1)}
.portfolio-hero{min-height:52vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:170px 24px 60px;background:radial-gradient(circle at 50% 30%,rgba(183,144,65,.2),transparent 45%),#0d0d0b}
.portfolio-hero .section-kicker{color:#d3ad63}
.portfolio-hero h1{font-family:var(--serif);font-size:clamp(3.2rem,6vw,5.6rem);font-weight:500;line-height:.95;letter-spacing:-.05em;margin:18px 0 24px}
.portfolio-hero h1 em{color:#d3ad63;font-weight:500;font-style:italic}
.portfolio-hero p{max-width:560px;color:#c8c2b7;line-height:1.75;font-size:1.02rem}
.portfolio-grid-section{padding-top:10px}
.portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.portfolio-card{position:relative;overflow:hidden;aspect-ratio:4/3;background:#1d1d1a}
.portfolio-card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.portfolio-card:hover img{transform:scale(1.05)}
.portfolio-card h3{position:absolute;left:0;right:0;bottom:0;margin:0;padding:22px 20px;background:linear-gradient(to top,rgba(8,8,6,.92),transparent);color:#f2eddf;font-family:var(--serif);font-size:1.45rem;font-weight:500;letter-spacing:-.02em}
.portfolio-page .footer{background:#0c0c0b}
@media(max-width:1220px) and (min-width:851px){.portfolio-page .nav-wrap{gap:12px;padding:0 24px}.portfolio-page .nav-links{gap:6px;font-size:9.5px}.portfolio-page .nav-cta{padding:10px 12px;font-size:9.5px}.portfolio-page .real-brand{width:150px;height:50px}}
@media(max-width:860px){.portfolio-grid{grid-template-columns:repeat(2,1fr)}.portfolio-hero{padding-top:130px}}
@media(max-width:560px){.portfolio-grid{grid-template-columns:1fr}}