.projects-hero{min-height:62vh}
.project-filters{display:flex;gap:8px;flex-wrap:wrap}
.filter-btn{padding:8px 12px;border-radius:999px;border:1px solid rgba(0,0,0,.18);background:#fff;color:#111;font:600 13px/1 "Google Sans",sans-serif;cursor:pointer;transition:.25s}
.filter-btn.is-active,.filter-btn:hover{background:#111;color:#fff;border-color:#111}
.projects-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.project-card{background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:18px;overflow:hidden;box-shadow:0 14px 30px rgba(0,0,0,.08);transition:.3s}
.project-card:hover{transform:translateY(-4px);border-color:rgba(0,0,0,.45)}
.project-card a{display:block;color:inherit}
.project-card img,.project-card iframe,.project-color{width:100%;aspect-ratio:16/10;display:block;object-fit:cover;border:0}
.project-meta{display:flex;gap:8px;flex-wrap:wrap;padding:12px 14px 4px}
.project-meta span{font-size:.72rem;font-weight:700;letter-spacing:.04em;color:#111;background:rgba(0,0,0,.06);border:1px solid rgba(0,0,0,.2);border-radius:999px;padding:4px 8px}
.project-card h3{margin:0;padding:0 14px 16px;font:700 1.15rem/1.25 "Google Sans",sans-serif}
.project-desc{margin:0;padding:0 20px 10px;color:rgba(0,0,0,.62);font-size:.94rem;line-height:1.45;overflow:hidden; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; height: 25vh;}

.project-link{display:inline-flex;margin:0 14px 16px;font:700 .92rem/1 "Google Sans",sans-serif;color:#111}
.project-card.is-hidden{display:none}
.cta-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
@media (max-width:960px){.projects-grid{grid-template-columns:1fr}
.project-desc{margin:0;padding:0 20px 10px;color:rgba(0,0,0,.62);font-size:.94rem;line-height:1.45;overflow:scroll; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; height: 35vh;}
}
/* ── cost block ── */
.cost-block {
background: whitesmoke;
border: 0.5px solid var(--border);
border-radius: 8px;
padding: 10px 12px;
margin-left: auto;
width: 95%;
margin-right: auto;
margin-bottom: 12px;
}
.cost-unit-label {
font-family: var(--font-mono);
font-size: 9px;
color: var(--muted);
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 10px;
}

.bar-row { margin-bottom: 8px; }
.bar-row:last-child { margin-bottom: 0; }
.bar-meta {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 4px;
}

h2{
    font-weight: 800;
}
.bar-source {
font-family: var(--font-mono);
font-size: 10px;
color: var(--muted);
}
.bar-price {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
color: var(--muted2);
}
.bar-price.moxo-price { color: var(--accent); }

.bar-track {
background: var(--surface2);
border-radius: 99px;
height: 6px;
overflow: hidden;
}
.bar-fill {
height: 100%;
border-radius: 99px;
width: 0;
transition: width 1.1s cubic-bezier(0.4, 0, 0.2, 1);
}
.bar-official-fill { background: var(--official-fill); }
.bar-moxo-fill     { background: var(--accent); }

/* saving pill */
.saving-pill {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 10px;
}
.pill {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 500;
padding: 3px 9px;
border-radius: 99px;
background: var(--accent-dim);
color: var(--accent);
border: 0.5px solid var(--accent-mid);
}
.saved-amt {
font-family: var(--font-mono);
font-size: 10px;
color: var(--muted);
}

/* visit link */
.project-link {
display: inline-block;
margin-top: auto;
padding: 7px 14px;
background: transparent;
border: 0.5px solid var(--border2);
border-radius: 6px;
color: var(--muted2);
font-family: var(--font-mono);
font-size: 11px;
text-decoration: none;
transition: border-color 0.15s, color 0.15s;
align-self: flex-start;
}
.project-link:hover {
border-color: var(--accent-mid);
color: var(--accent);
}

/* divider */
.card-divider {
height: 0.5px;
background: var(--border);
margin: 12px 0;
}

@media (max-width: 560px) {
.summary-strip { grid-template-columns: repeat(2, 1fr); }
.grid { grid-template-columns: 1fr; }
}