.projects-hero {
	min-height: 0;
	padding: 20px 0;
	background: var(--ink-deep);
	color: white;
	text-align: center;
}

.projects-hero h1 {
	margin: 10px 0 0;
	color: var(--coral);
	font-size: clamp(42px, 6vw, 74px);
	line-height: 1;
	letter-spacing: -.06em;
	font-weight: 700;
}

.projects-hero .eyebrow { color: var(--coral); }
.projects-intro { max-width: 560px; margin: 20px auto 0; color: rgba(255,255,255,.72); font-size: 16px; line-height: 1.65; }
.projects-index { padding: 20px 0; background: var(--cream); }
.filter-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-bottom: 20px; }
.filter-button { padding: 15px 18px; border: 1px solid var(--ink); border-radius: 0 16px 0 16px; background: transparent; color: var(--ink); font: 600 12px var(--sans); cursor: pointer; transition: background .2s ease, color .2s ease; }
.filter-button:hover, .filter-button.active { background: var(--coral); border-color: var(--coral); color: white; }
.all-projects-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.project-tile { position: relative; aspect-ratio: 1; display: block; overflow: hidden; background: var(--cream); border-radius: 0 35px 0 35px; transition: transform .25s ease; }
.project-tile:hover { transform: translateY(-7px); }
.project-tile-image { position: relative; height: 100%; overflow: hidden; }
.project-tile-image img { height: 100%; object-fit: cover; filter: saturate(.78); transition: transform .5s ease; }
.project-tile:hover img { transform: scale(1.04); }
.project-tile-arrow { position: absolute; top: 15px; right: 15px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 0 14px 0 14px; background: var(--coral); color: white; font-size: 20px; }
.project-tile-info { position: absolute; z-index: 1; right: 0; bottom: 0; left: 0; min-height: 66px; padding: 9px 20px 11px; background: var(--coral); color: white; border-radius: 0 35px 0 35px; }
.project-tile-title { margin: 0; font-size: 18px; letter-spacing: -.04em; }
.project-tile-type { margin-top: 7px; color: rgba(255,255,255,.82); font: 10px var(--mono); letter-spacing: .08em; }
.project-tile.is-hidden { display: none; }

@media (max-width: 760px) {
	.projects-hero { min-height: 0; padding: 20px 0; }
	.projects-index { padding: 20px 0; }
	.all-projects-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
	.project-tile-image img { height: 100%; }
	.project-tile-info { min-height: 76px; padding: 10px 15px 12px; }
	.project-tile-title { font-size: 15px; }
}

@media (max-width: 480px) {
	.all-projects-grid { grid-template-columns: 1fr; }
	.project-tile-image img { height: 100%; }
}