/* ==========================================================================
   sl-projects.css — Projects page only.
   Everything shared with another page lives in sl-global.css; this file is
   only what is unique here. Every selector is scoped under
   body.sl-page .sl-site .sl-page-projects so it cannot reach Astra or Elementor.
   ========================================================================== */

body.sl-page .sl-site .sl-page-projects .sl-link-btn-dark {
	color: var(--sl-lime-dark);
}
body.sl-page .sl-site .sl-page-projects .sl-hero-projects {
	background: var(--sl-ink);
	min-height: clamp(340px, 38vw, 520px);
	padding: clamp(64px, 8vw, 120px) clamp(20px, 5vw, 56px) clamp(50px, 6vw, 96px);
}
body.sl-page .sl-site .sl-page-projects .sl-proj-stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(14px, 2.4vw, 32px);
	margin-top: clamp(20px, 2.6vw, 34px);
	padding-top: clamp(20px, 2.6vw, 30px);
	border-top: 1px solid rgba(255, 255, 255, .12);
	width: 100%;
}
body.sl-page .sl-site .sl-page-projects .sl-proj-stat b {
	display: block;
	font-size: clamp(28px, 3.4vw, 46px);
	font-weight: 800;
	letter-spacing: -.03em;
	line-height: 1;
	color: var(--sl-lime);
	font-variant-numeric: tabular-nums;
}
body.sl-page .sl-site .sl-page-projects .sl-proj-stat span {
	display: block; margin-top: 7px; font-size: 13.5px; line-height: 1.45; color: rgba(255, 255, 255, .55);
}
body.sl-page .sl-site .sl-page-projects .sl-founder-note {
	margin: clamp(18px, 2.4vw, 28px) 0 0; font-size: 14.5px; color: rgba(255, 255, 255, .5);
}
body.sl-page .sl-site .sl-page-projects .sl-cases {
	background: var(--sl-paper); padding: clamp(48px, 6vw, 96px) clamp(20px, 5vw, 56px);
}
body.sl-page .sl-site .sl-page-projects .sl-cases-sub {
	margin: clamp(20px, 2.6vw, 30px) 0 0; max-width: 720px; font-size: 16px; line-height: 1.65; color: rgba(10, 10, 11, .6); text-wrap: pretty;
}
body.sl-page .sl-site .sl-page-projects .sl-anon-note {
	font-size: 13.5px; color: rgba(10, 10, 11, .45);
}
body.sl-page .sl-site .sl-page-projects .sl-case-shot-wide img {
	border-radius: 14px;
}
body.sl-page .sl-site .sl-page-projects .sl-craft-close {
	margin: clamp(20px, 2.6vw, 30px) 0 0; max-width: 720px; font-size: 15.5px; line-height: 1.65; color: rgba(10, 10, 11, .6);
}
body.sl-page .sl-site .sl-page-projects .sl-chip-scroll {
	position: relative; margin-top: clamp(22px, 3vw, 34px);
}
body.sl-page .sl-site .sl-page-projects .sl-filter-chips {
	display: flex; flex-wrap: wrap; gap: 9px;
}
body.sl-page .sl-site .sl-page-projects .sl-chip {
	min-height: 44px;
	padding: 11px 20px;
	border-radius: 999px;
	border: 1px solid rgba(10, 10, 11, .18);
	background: transparent;
	font: inherit;
	font-size: 14.5px;
	font-weight: 700;
	color: rgba(10, 10, 11, .68);
	cursor: pointer;
	white-space: nowrap;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}
body.sl-page .sl-site .sl-page-projects .sl-chip:hover {
	border-color: var(--sl-ink); color: var(--sl-ink);
}
body.sl-page .sl-site .sl-page-projects .sl-chip.sl-is-on {
	background: var(--sl-ink); border-color: var(--sl-ink); color: var(--sl-lime);
}
body.sl-page .sl-site .sl-page-projects .sl-case-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	margin-top: clamp(20px, 2.6vw, 30px);
	align-items: start;
}
body.sl-page .sl-site .sl-page-projects .sl-case-context {
	font-size: 15px; line-height: 1.6; color: rgba(10, 10, 11, .64); text-wrap: pretty;
}
body.sl-page .sl-site .sl-page-projects .sl-case-tags {
	display: flex; flex-wrap: wrap; gap: 7px; margin-top: 2px;
}
body.sl-page .sl-site .sl-page-projects .sl-case-tags i {
	font-style: normal;
	font-size: 12.5px;
	padding: 6px 12px;
	border-radius: 999px;
	border: 1px solid rgba(10, 10, 11, .14);
	color: rgba(10, 10, 11, .6);
}
body.sl-page .sl-site .sl-page-projects .sl-case-open {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 10px;
	padding-top: 14px;
	border-top: 1px solid rgba(10, 10, 11, .09);
	width: 100%;
	font-size: 14.5px;
	font-weight: 700;
	color: var(--sl-ink);
}
body.sl-page .sl-site .sl-page-projects .sl-case-open .sl-chev {
	font-style: normal; transition: transform .3s var(--sl-ease);
}
body.sl-page .sl-site .sl-page-projects .sl-case.sl-is-open .sl-case-open .sl-chev {
	transform: rotate(180deg);
}
body.sl-page .sl-site .sl-page-projects .sl-case.sl-is-open .sl-case-open {
	color: var(--sl-lime-dark);
}
body.sl-page .sl-site .sl-page-projects .sl-case-body {
	max-height: 0;
	overflow: hidden;
	transition: max-height .3s ease;
}
body.sl-page .sl-site .sl-page-projects .sl-case.sl-is-open .sl-case-body {
	max-height: 3200px;
}
body.sl-page .sl-site .sl-page-projects .sl-case-body-inner {
	padding: 0 clamp(24px, 2.6vw, 34px) clamp(24px, 2.6vw, 34px);
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(16px, 2.2vw, 28px);
}
body.sl-page .sl-site .sl-page-projects .sl-case-block h3 {
	margin: 0 0 9px;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: rgba(10, 10, 11, .45);
}
body.sl-page .sl-site .sl-page-projects .sl-case-block p {
	margin: 0; font-size: 15px; line-height: 1.7; color: rgba(10, 10, 11, .72); text-wrap: pretty;
}
body.sl-page .sl-site .sl-page-projects .sl-case-block ul {
	margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column;
}
body.sl-page .sl-site .sl-page-projects .sl-case-block li {
	position: relative;
	padding: 8px 0 8px 20px;
	font-size: 15px;
	line-height: 1.6;
	color: rgba(10, 10, 11, .72);
}
body.sl-page .sl-site .sl-page-projects .sl-case-block li::before {
	content: "✦"; position: absolute; left: 0; color: var(--sl-lime-dark); font-size: 12px; top: 10px;
}
body.sl-page .sl-site .sl-page-projects .sl-case-shot {
	grid-column: 1 / -1; margin: 0;
}
body.sl-page .sl-site .sl-page-projects .sl-case-shot img {
	width: 100%;
	display: block;
	border-radius: 14px;
	border: 1px solid rgba(10, 10, 11, .1);
	background: #fff;
}
body.sl-page .sl-site .sl-page-projects .sl-case-shot figcaption {
	margin-top: 9px; font-size: 13px; color: rgba(10, 10, 11, .45);
}
body.sl-page .sl-site .sl-page-projects .sl-case-shot img,
body.sl-page .sl-site .sl-page-projects .sl-craft-item img {
	cursor: zoom-in;
}
body.sl-page .sl-site .sl-page-projects .sl-case-shot img:hover,
body.sl-page .sl-site .sl-page-projects .sl-craft-item img:hover {
	opacity: .92;
}
body.sl-page .sl-site .sl-page-projects .sl-cases-empty {
	margin: 24px 0 0; font-size: 16px; color: rgba(10, 10, 11, .6);
}
body.sl-page .sl-site .sl-page-projects .sl-craft {
	background: var(--sl-paper); padding: clamp(48px, 6vw, 96px) clamp(20px, 5vw, 56px);
}
body.sl-page .sl-site .sl-page-projects .sl-craft-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
	margin-top: clamp(24px, 3vw, 40px);
}
body.sl-page .sl-site .sl-page-projects .sl-craft-item {
	margin: 0;
	background: var(--sl-white);
	border: 1px solid rgba(10, 10, 11, .09);
	border-radius: clamp(16px, 1.8vw, 22px);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform .35s var(--sl-ease), box-shadow .35s ease;
}
body.sl-page .sl-site .sl-page-projects .sl-craft-item:hover {
	transform: translateY(-6px); box-shadow: 0 20px 46px rgba(10, 10, 11, .1);
}
body.sl-page .sl-site .sl-page-projects .sl-craft-item img {
	width: 100%; height: 300px; object-fit: cover; object-position: top center; display: block; background: #fff;
}
body.sl-page .sl-site .sl-page-projects .sl-craft-tall {
	grid-row: span 2;
}
body.sl-page .sl-site .sl-page-projects .sl-craft-tall img {
	height: 640px;
}
body.sl-page .sl-site .sl-page-projects .sl-craft-item figcaption {
	padding: 18px 20px; border-top: 1px solid rgba(10, 10, 11, .08);
}
body.sl-page .sl-site .sl-page-projects .sl-craft-item figcaption b {
	display: block; font-size: 15px; font-weight: 700; letter-spacing: -.01em;
}
body.sl-page .sl-site .sl-page-projects .sl-craft-item figcaption span {
	display: block; margin-top: 3px; font-size: 13.5px; color: rgba(10, 10, 11, .5);
}
@media (max-width: 1024px) {
	body.sl-page .sl-site .sl-page-projects .sl-cases,
	body.sl-page .sl-site .sl-page-projects .sl-craft {
		padding: 56px 28px;
	}
	body.sl-page .sl-site .sl-page-projects .sl-proj-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	body.sl-page .sl-site .sl-page-projects .sl-case-grid {
		grid-template-columns: 1fr;
	}
	body.sl-page .sl-site .sl-page-projects .sl-craft-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	body.sl-page .sl-site .sl-page-projects .sl-craft-tall {
		grid-row: auto;
	}
	body.sl-page .sl-site .sl-page-projects .sl-craft-tall img {
		height: 300px;
	}
}

@media (max-width: 768px) {
	body.sl-page .sl-site .sl-page-projects .sl-hero-projects {
		min-height: 0; padding: 54px 20px 44px;
	}
	body.sl-page .sl-site .sl-page-projects .sl-cases,
	body.sl-page .sl-site .sl-page-projects .sl-craft {
		padding: 40px 20px;
	}
	body.sl-page .sl-site .sl-page-projects .sl-proj-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px;
	}
	body.sl-page .sl-site .sl-page-projects .sl-chip-scroll {
		margin-left: -20px; margin-right: -20px;
	}
	body.sl-page .sl-site .sl-page-projects .sl-chip-scroll::after {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		width: 44px;
		pointer-events: none;
		background: linear-gradient(to right, rgba(244, 244, 240, 0), var(--sl-paper));
	}
	body.sl-page .sl-site .sl-page-projects .sl-filter-chips {
		flex-wrap: nowrap;
		overflow-x: auto;
		padding: 0 20px 4px;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	body.sl-page .sl-site .sl-page-projects .sl-filter-chips::-webkit-scrollbar {
		display: none;
	}
	body.sl-page .sl-site .sl-page-projects .sl-case-body-inner {
		grid-template-columns: 1fr; padding: 0 20px 22px; gap: 18px;
	}
	body.sl-page .sl-site .sl-page-projects .sl-case.sl-is-open .sl-case-body {
		max-height: 5200px;
	}
	body.sl-page .sl-site .sl-page-projects .sl-craft-grid {
		grid-template-columns: 1fr;
	}
	body.sl-page .sl-site .sl-page-projects .sl-craft-item img,
	body.sl-page .sl-site .sl-page-projects .sl-craft-tall img {
		height: 240px;
	}
	body.sl-page .sl-site .sl-page-projects .sl-craft-item:hover {
		transform: none; box-shadow: none;
	}
}