/* Projects listing, scoped independently from homepage project styles. */
.portfolio-page { --portfolio-navy:#061f2b; }
.portfolio-page .container { max-width:1440px; }
.portfolio-page h2 { font-size:clamp(26px,2.3vw,38px); line-height:1.2; letter-spacing:-.8px; margin:0 0 18px; }
.portfolio-page p { line-height:1.55; }
.portfolio-page .portfolio-label { display:flex; align-items:center; gap:12px; color:var(--red); font-size:11px; font-weight:700; text-transform:uppercase; margin:0 0 18px; }
.portfolio-label::before { content:''; height:3px; width:30px; background:var(--red); flex:none; }
.portfolio-page .button { min-height:46px; padding:12px 26px; gap:30px; font-size:12px; }
.portfolio-hero { height:450px; position:relative; overflow:hidden; background:var(--portfolio-navy); color:white; }
.portfolio-hero>img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 42%; }
.portfolio-hero::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,rgba(3,25,38,.98),rgba(3,25,38,.9) 32%,rgba(3,25,38,.2) 65%,transparent); }
.portfolio-hero .container { height:100%; position:relative; z-index:1; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; }
.portfolio-hero h1 { font-size:clamp(40px,3.5vw,62px); line-height:1.04; letter-spacing:-1.4px; margin:0 0 18px; font-weight:800; }
.portfolio-hero h1 span { color:var(--yellow); }
.portfolio-hero .container>p:last-child { max-width:540px; font-size:17px; margin:0; }
.portfolio-page .portfolio-hero .portfolio-label,.portfolio-page .portfolio-cta .portfolio-label { color:white; }
.portfolio-hero .portfolio-label::before,.portfolio-cta .portfolio-label::before { width:3px; height:20px; background:var(--yellow); }
.portfolio-listing { padding-top:20px; padding-bottom:30px; }
.portfolio-filters { display:flex; gap:6px; margin-bottom:20px; overflow-x:auto; padding-bottom:6px; }
.portfolio-filters[hidden],.portfolio-card[hidden],.portfolio-empty[hidden] { display:none; }
.portfolio-filters button { display:flex; align-items:center; justify-content:center; gap:16px; flex:1 0 auto; padding:18px 22px; min-height:76px; border:0; background:#f6f7f8; color:var(--ink); font:700 13px Manrope,Arial,sans-serif; cursor:pointer; }
.portfolio-filters button[aria-pressed=true] { color:white; background:var(--red); }
.portfolio-filters button:hover { box-shadow:inset 0 -3px var(--red); }
.portfolio-filters img,.portfolio-filters .icon { width:32px; height:32px; color:var(--red); object-fit:contain; flex:none; }
.portfolio-filters img { transform:scale(1.25); }
.portfolio-filters button[aria-pressed=true] .icon { color:white; }
.portfolio-filters button[aria-pressed=true] img { filter:brightness(0) invert(1); }
.portfolio-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; }
.portfolio-card { border:1px solid #edf0f2; display:flex; flex-direction:column; background:white; min-width:0; }
.portfolio-card-image { position:relative; aspect-ratio:4/3; overflow:hidden; }
.portfolio-card-image>img { width:100%; height:100%; display:block; object-fit:cover; }
.portfolio-card-image>span { position:absolute; top:16px; left:16px; background:var(--yellow); color:var(--ink); padding:8px 14px; font-size:11px; font-weight:700; }
.portfolio-card-copy { padding:20px 24px 24px; display:flex; flex-direction:column; flex:1; }
.portfolio-card h2 { font-size:23px; letter-spacing:-.5px; margin:0 0 10px; }
.portfolio-card p { color:#62676b; font-size:15px; margin:0 0 20px; }
.portfolio-card a { color:var(--red); font-weight:700; font-size:14px; margin-top:auto; align-self:flex-start; }
.portfolio-card a span { margin-left:16px; }
.portfolio-card a:hover { text-decoration:underline; text-underline-offset:4px; }
.portfolio-empty { padding:46px 32px; border:1px solid #e0e5e8; background:#fafbfc; text-align:center; }
.portfolio-empty p { max-width:650px; color:#62676b; margin:0 auto 24px; }
.portfolio-featured { background:#f3f6f7; }
.portfolio-featured>.container { display:grid; grid-template-columns:52fr 48fr; gap:64px; padding-top:28px; padding-bottom:28px; align-items:center; }
.portfolio-feature-photo { display:block; width:100%; height:440px; object-fit:cover; }
.portfolio-feature-copy>p:not(.portfolio-label) { color:#62676b; font-size:15px; }
.portfolio-feature-copy dl { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin:26px 0; }
.portfolio-feature-copy dt { font-weight:700; font-size:13px; }
.portfolio-feature-copy dd { margin:4px 0 0; color:#62676b; font-size:14px; }
.portfolio-feature-pending { height:360px; display:flex; align-items:center; justify-content:center; padding:32px; background:#e1e7ea; color:#53636e; text-align:center; font-size:12px; }
.portfolio-page .portfolio-cta { background:var(--portfolio-navy); }
.portfolio-cta .container { min-height:220px; }
.portfolio-page .portfolio-cta h2 { text-transform:none; font-size:36px; margin:0; }
.portfolio-cta p:not(.portfolio-label) { max-width:620px; }
.portfolio-cta-actions { display:flex; gap:20px; flex:none; }
@media(max-width:980px) {
 .portfolio-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
 .portfolio-filters button { padding:16px; font-size:12px; }
 .portfolio-featured>.container { gap:30px; }
 .portfolio-feature-photo { height:400px; }
 .portfolio-cta .container { flex-direction:column; align-items:flex-start; gap:24px; }
}
@media(max-width:600px) {
 .portfolio-hero { height:450px; }
 .portfolio-hero h1 { font-size:37px; letter-spacing:-1.3px; }
 .portfolio-hero .container>p:last-child { font-size:15px; }
 .portfolio-hero::after { background:linear-gradient(90deg,rgba(3,25,38,.94),rgba(3,25,38,.58)); }
 .portfolio-filters button { min-height:64px; gap:10px; }
 .portfolio-filters img,.portfolio-filters .icon { width:26px; height:26px; }
 .portfolio-grid { grid-template-columns:1fr; }
 .portfolio-empty { padding:32px 18px; text-align:left; }
 .portfolio-empty h2 { font-size:25px; }
 .portfolio-featured>.container { grid-template-columns:1fr; gap:26px; }
 .portfolio-feature-photo,.portfolio-feature-pending { height:300px; }
 .portfolio-feature-copy dl { gap:18px; }
 .portfolio-page .portfolio-cta h2 { font-size:29px; }
 .portfolio-cta-actions { gap:10px; flex-wrap:wrap; }
 .portfolio-page .portfolio-cta .button { padding:12px 18px; gap:14px; }
}