.projects-listing {--projects-listing-background: #FCFCF8;background: var(--projects-listing-background);overflow: hidden;}
.projects-listing__body {margin-top: 48px;}
.projects-listing .section-heading + .projects-listing__body {margin-top: 56px;}
.projects-listing__filters {display: flex;flex-wrap: nowrap;align-items: center;justify-content: flex-start;gap: 10px;margin: 0 0 44px;overflow-x: auto;overflow-y: hidden;padding-bottom: 2px;cursor: grab;scrollbar-width: none;-ms-overflow-style: none;-webkit-overflow-scrolling: touch;}
.projects-listing__filters::-webkit-scrollbar { display: none; }
.projects-listing__filter {position: relative;display: inline-flex;flex: 0 0 auto;align-items: center;justify-content: center;min-height: 40px;padding: 8px 14px;border: 1px solid rgba(0, 0, 0, .1);border-radius: 6px;background: var(--color-white);color: #000;font: inherit;font-size: 16px;font-weight: 400;line-height: 1.3;cursor: pointer;white-space: nowrap;transition: color .25s ease, background-color .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;}
.projects-listing__filter:hover, .projects-listing__filter:focus-visible{border-color: var(--color-theme); background: var(--color-theme); color: #000; transform: translateY(-1px);}
.projects-listing__filter.is-active {border-color: var(--color-theme);background: var(--color-theme);color: #000;box-shadow: 0 8px 20px rgba(189, 210, 59, .25);font-weight: 500;}
.projects-listing__filter:focus-visible {outline: 3px solid rgba(189, 210, 59, .35);outline-offset: 2px;z-index: 1;}
.projects-listing__items {display: grid;grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 -10px;gap: 30px 0;}
.projects-listing__items-col {padding: 0 10px;}
.projects-listing__image {display: block;overflow: hidden;aspect-ratio: 1.35 / 1;border-radius: 8px;background: #f3f3f3;text-decoration: none;}
.projects-listing__image img {display: block;width: 100%;height: 100%;object-fit: cover;transition: transform .45s ease;will-change: transform;}
.projects-listing__image .projects-listing__placeholder-image {object-fit: none;padding: 36px;}
.projects-listing__image:hover img, .projects-listing__image:focus-visible img {transform: scale(1.06);}
.projects-listing__image:focus-visible {outline: 3px solid var(--color-theme);outline-offset: 3px;}
.projects-listing__content {padding-top: 18px;}
.projects-listing__meta {margin: 0 0 12px;color: #000;font-size: 14px;font-weight: 500;line-height: 1.2;letter-spacing: .5px;text-transform: uppercase;}
.projects-listing__title {margin: 0;color: #000;font-size: clamp(24px, 1.8vw, 32px);font-weight: 700;line-height: 1.12;letter-spacing: 0;}
.projects-listing__title a {color: inherit;text-decoration: none;transition: color .25s ease;}
.projects-listing__title a:hover, .projects-listing__title a:focus-visible {color: var(--color-theme);}
.projects-listing__description {margin-top: 14px;color: rgba(0, 0, 0, .78);font-size: 16px;line-height: 1.5;}
.projects-listing__description p {margin: 0;}
.projects-listing__button {width: max-content;margin-top: 20px;}
.projects-listing__items-col.is-hidden {display: none;}
.projects-listing__card.is-filtering-in {animation: projectsListingFade .28s ease both;}
@keyframes projectsListingFade {from {opacity: 0;transform: translateY(10px);} to {opacity: 1;transform: translateY(0);}}
@media (max-width: 991px) {
	.projects-listing__body, .projects-listing .section-heading + .projects-listing__body {margin-top: 38px;}
	.projects-listing__filters {justify-content: flex-start;margin-bottom: 34px;}
	.projects-listing__filter {font-size: 15px;}
	.projects-listing__items {grid-template-columns: repeat(2, minmax(0, 1fr));}
}
@media (max-width: 767px) {
	.projects-listing__body, .projects-listing .section-heading + .projects-listing__body {margin-top: 30px;}
	.projects-listing__filters {margin-inline: calc(var(--container-padding, 20px) * -1);padding-inline: var(--container-padding, 20px);}
	.projects-listing__filter {padding: 8px 12px;font-size: 14px;}
	.projects-listing__image {aspect-ratio: 1.18 / 1;}
	.projects-listing__meta {font-size: 12px;}
	.projects-listing__description {font-size: 15px;}
}
@media (max-width: 575px) {
	.projects-listing__items {grid-template-columns: minmax(0, 1fr);}
}