.filter-bar{display: flex;
flex-wrap: wrap;
gap: 0.6rem;
justify-content: center;
max-width: 920px;
margin: 0 auto 3rem}.filter-pill{padding: 0.55rem 1.3rem;
border-radius: 100px;
border: 1px solid rgba(137,210,217,0.25);
background: rgba(255,255,255,0.03);
color: rgba(255,255,255,0.75);
font-size: 0.85rem;
font-weight: 600;
font-family: inherit;
cursor: pointer;
transition: border-color 0.3s,background 0.3s,color 0.3s}.filter-pill:hover{border-color: var(--teal-accent);color: var(--white)}.filter-pill.active{background: linear-gradient(135deg,var(--deep-teal),var(--teal-green));
border-color: transparent;
color: var(--white);
box-shadow: 0 4px 16px rgba(20,109,104,0.35)}.project-list{display: flex;
flex-direction: column;
gap: 1.5rem}.project-row{background: rgba(255,255,255,0.03);
border: 1px solid rgba(137,210,217,0.12);
border-radius: 16px;
overflow: hidden;
transition: border-color 0.3s}.project-row[open]{border-color: rgba(137,210,217,0.32)}.project-row.is-hidden{display: none}.project-row summary{list-style: none;
cursor: pointer}.project-row summary::-webkit-details-marker{display: none}.project-row-summary{display: flex;
align-items: stretch}.project-row-media{position: relative;
width: 340px;
min-height: 230px;
flex-shrink: 0;
overflow: hidden}.project-row-media img{width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s}.project-row:hover .project-row-media img{transform: scale(1.05)}.project-tag{position: absolute;
left: 1.1rem;
bottom: -0.9rem;
display: inline-flex;
padding: 0.35rem 0.85rem;
background: var(--charcoal);
border: 1px solid rgba(137,210,217,0.3);
border-radius: 100px;
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
color: rgba(137,210,217,0.9);
white-space: nowrap}.project-tag.is-flag{background: linear-gradient(135deg,var(--deep-teal),var(--teal-green));
color: var(--white);
border-color: transparent}.project-row-preview{flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
gap: 0.6rem;
padding: 1.75rem 2.25rem}.project-row-preview h3{font-size: 1.3rem;
font-weight: 700;
color: var(--white);
line-height: 1.3}.project-row-preview p{font-size: 0.92rem;
line-height: 1.65;
color: rgba(255,255,255,0.6);
max-width: 680px}.project-row-pills{display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 0.15rem}.project-row-pill{display: inline-flex;
padding: 0.35rem 0.85rem;
border-radius: 100px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(137,210,217,0.2);
font-size: 0.74rem;
font-weight: 600;
color: rgba(255,255,255,0.68);
white-space: nowrap}.project-row-facts{flex-shrink: 0;
width: 270px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 1.1rem;
padding: 1.75rem 2.25rem;
border-left: 1px solid rgba(255,255,255,0.07)}.project-row-fact{display: flex;
align-items: flex-start;
gap: 0.75rem}.project-row-fact-icon{flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 10px;
background: rgba(137,210,217,0.1)}.project-row-fact-icon svg{width: 16px;
height: 16px;
stroke: rgb(137,210,217);
fill: none;
stroke-width: 2}.project-row-fact-text{display: flex;
flex-direction: column;
gap: 0.15rem;
min-width: 0}.project-row-fact-label{font-size: 0.64rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: rgba(255,255,255,0.4)}.project-row-fact-value{font-size: 0.85rem;
font-weight: 600;
line-height: 1.4;
color: var(--white)}.project-toggle{display: flex;
align-items: center;
gap: 0.4rem;
margin-top: 0.5rem;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
color: rgb(137,210,217)}.project-toggle svg{width: 13px;
height: 13px;
stroke: currentColor;
fill: none;
stroke-width: 2.5;
transition: transform 0.3s}.project-row[open] .project-toggle svg{transform: rotate(180deg)}.project-row-detail{padding: 1.85rem 2.25rem 2.25rem;
border-top: 1px solid rgba(255,255,255,0.08)}.project-detail-narrative{display: grid;
grid-template-columns: repeat(2,1fr);
gap: 1.5rem 2.5rem;
margin-bottom: 1.5rem}.project-detail-label{display: block;
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: rgba(137,210,217,0.75);
margin-bottom: 0.3rem}.project-detail-value{display: block;
font-size: 0.9rem;
line-height: 1.65;
color: rgba(255,255,255,0.75);
text-align: left}.project-detail-cta{display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-top: 0.4rem;
font-size: 0.85rem;
font-weight: 700;
color: rgb(137,210,217);
text-decoration: none}.project-detail-cta svg{width: 14px;height: 14px;
stroke: currentColor;fill: none;stroke-width: 2.5}.project-note{text-align: center;
max-width: 640px;
margin: 2.5rem auto 0;
font-size: 0.85rem;
line-height: 1.6;
color: rgba(255,255,255,0.4);
font-style: italic}@media (max-width: 1080px){.project-row-summary{flex-direction: column}.project-row-media{width: 100%;height: 220px;min-height: 0}.project-row-preview{padding: 1.5rem 1.5rem 1.75rem}.project-row-facts{width: auto;
flex-direction: row;
flex-wrap: wrap;
border-left: none;
border-top: 1px solid rgba(255,255,255,0.07);
padding: 1.35rem 1.5rem 1.75rem;
gap: 1.5rem 2rem}.project-row-fact{flex: 1 1 180px}.project-row-detail{padding: 1.5rem 1.5rem 1.85rem}.project-detail-narrative{grid-template-columns: 1fr}}@media (max-width: 560px){.project-row-preview h3{font-size: 1.15rem}.project-row-fact{flex: 1 1 140px}}
