.work-hero,
.case-hero{
	padding:170px 0 72px;
}

.work-hero-grid,
.case-hero-grid{
	display:grid;
	grid-template-columns:1fr .82fr;
	gap:80px;
	align-items:end;
}

.work-hero h1,
.case-hero h1{
	max-width:900px;
	font-size:clamp(3.6rem, 5.6vw, 6.4rem);
	line-height:.95;
	font-weight:300;
	letter-spacing:-.065em;
}

.work-hero-copy,
.case-hero-copy{
	max-width:600px;
	padding-bottom:10px;
}

.work-hero-copy span,
.case-hero-copy span{
	display:block;
	margin-bottom:22px;
	color:var(--purple-light);
	font-size:.75rem;
	font-weight:600;
	letter-spacing:.22em;
	text-transform:uppercase;
}

.work-hero-copy p,
.case-hero-copy p{
	color:var(--muted);
	font-size:1.12rem;
	line-height:1.85;
}

.work-filters{
	margin-top:46px;
}

.work-filter{
	padding:11px 18px;
	border:1px solid rgba(157,92,255,.24);
	border-radius:999px;
	background:rgba(255,255,255,.025);
	color:rgba(255,255,255,.68);
	font-size:.72rem;
	font-weight:600;
	letter-spacing:.12em;
	text-transform:uppercase;
	cursor:pointer;
	transition:background var(--ease), color var(--ease), border-color var(--ease), transform var(--ease);
    margin-bottom:8px;
    margin-right:6px;
}

.work-filter:hover,
.work-filter.is-active{
	color:#fff;
	border-color:rgba(157,92,255,.55);
	background:rgba(157,92,255,.13);
	transform:translateY(-2px);
}

.work-grid-section{
	padding:0 0 140px;
}

.work-grid{
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	gap:24px;
}

.work-card{
	position:relative;
	overflow:hidden;
	min-height:520px;
	display:flex;
	flex-direction:column;
	border:1px solid var(--line);
	border-radius:var(--card-radius);
	background:var(--card-bg);
	text-decoration:none;
	transition:transform var(--ease), border-color var(--ease), box-shadow var(--ease), background var(--ease), opacity var(--ease);
}

.work-card::before{
	content:"";
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:1px;
	background:linear-gradient(90deg, rgba(157,92,255,.35), transparent);
	z-index:3;
}

.work-card:hover{
	transform:translateY(-6px);
	border-color:rgba(157,92,255,.28);
	box-shadow:var(--card-shadow);
	background:var(--card-bg-hover);
}

.work-card.is-hidden{
	display:none;
}

@media(min-width:1101px){
	.work-card:nth-child(3n + 1):last-child{
		grid-column:2;
	}
}

.work-card-image{
	position:relative;
	overflow:hidden;
	height:300px;
	padding-top:40px;
	background:var(--surface);
	border-bottom:1px solid var(--line);
}

.work-card-image::before{
	content:"";
	position:absolute;
	top:0;
	left:0;
	right:0;
	height:40px;
	background:#111118;
	border-bottom:1px solid rgba(255,255,255,.06);
	z-index:2;
}

.work-card-image::after{
	content:"●  ●  ●";
	position:absolute;
	top:11px;
	left:18px;
	z-index:3;
	color:rgba(255,255,255,.25);
	font-size:12px;
	letter-spacing:.2em;
}

.work-card-image img{
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:top center;
	transition:transform var(--ease);
}

.work-card:hover .work-card-image img{
	transform:scale(1.025);
}

.work-card-content{
	position:relative;
	z-index:2;
	display:flex;
	flex-direction:column;
	flex:1;
	padding:34px;
}

.work-card-content > span{
	display:block;
	margin-bottom:24px;
	color:var(--purple-light);
	font-size:.72rem;
	font-weight:600;
	letter-spacing:.18em;
	text-transform:uppercase;
}

.work-card h2{
	margin-bottom:18px;
	font-size:clamp(2rem, 2.3vw, 2.8rem);
	font-weight:300;
	line-height:1;
	letter-spacing:-.055em;
}

.work-card p{
	color:var(--muted);
	line-height:1.75;
}

.work-tags{
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	margin-top:auto;
	padding-top:32px;
}

.work-tags small{
	padding:7px 10px;
	border:1px solid rgba(157,92,255,.22);
	border-radius:999px;
	color:rgba(255,255,255,.7);
	font-size:.66rem;
	letter-spacing:.08em;
	text-transform:uppercase;
}

.work-card-muted{
	justify-content:flex-end;
	background:
		radial-gradient(circle at top right, rgba(157,92,255,.18), transparent 42%),
		var(--card-bg);
}

.case-showcase{
	padding:0 0 120px;
}

.case-browser{
	position:relative;
	overflow:hidden;
	max-height:680px;
	padding-top:40px;
	border:1px solid var(--line);
	border-radius:28px;
	background:var(--surface);
}

.case-browser::before{
	content:"";
	position:absolute;
	top:0;
	left:0;
	right:0;
	height:40px;
	background:#111118;
	border-bottom:1px solid rgba(255,255,255,.06);
	z-index:2;
}

.case-browser::before{
	content:attr(data-browser-url);
	position:absolute;
	top:0;
	left:0;
	right:0;
	height:40px;
	display:flex;
	align-items:center;
	justify-content:center;
	background:#111118;
	border-bottom:1px solid rgba(255,255,255,.06);
	z-index:2;
	color:rgba(255,255,255,.28);
	font-size:11px;
	font-weight:500;
	letter-spacing:.02em;
}

.case-browser::after{
	content:"●  ●  ●";
	position:absolute;
	top:11px;
	left:18px;
	z-index:3;
	color:rgba(255,255,255,.25);
	font-size:12px;
	letter-spacing:.2em;
}

.case-browser img{
	width:100%;
	height:640px;
	object-fit:cover;
	object-position:top center;
}

.case-details{
	padding:0 0 140px;
}

.case-details-grid{
	display:grid;
	grid-template-columns:1fr 420px;
	gap:80px;
	align-items:start;
}

.case-story{
	display:grid;
	gap:70px;
}

.case-story h2{
	margin:20px 0 24px;
	font-size:clamp(2.8rem, 4vw, 5rem);
}

.case-story p:not(.section-label){
	max-width:820px;
	color:var(--muted);
	font-size:1.1rem;
	line-height:1.9;
}

.case-sidebar{
	position:sticky;
	top:130px;
	padding:34px;
	border:1px solid var(--line);
	border-radius:var(--card-radius);
	background:var(--card-bg);
}

.case-sidebar h3{
	margin-bottom:28px;
	color:var(--purple-light);
	font-size:.86rem;
	font-weight:600;
	letter-spacing:.18em;
	text-transform:uppercase;
}

.case-meta-item{
	padding:15px 0;
	border-bottom:1px solid var(--line);
}

.case-meta-item:first-of-type{
	border-top:1px solid var(--line);
}

.case-meta-item span{
	display:block;
	margin-bottom:7px;
	color:rgba(255,255,255,.35);
	font-size:.7rem;
	letter-spacing:.14em;
	text-transform:uppercase;
}

.case-meta-item p{
	color:rgba(255,255,255,.84);
	line-height:1.55;
}

.case-sidebar .btn-primary{
	width:100%;
	margin-top:32px;
}

.case-gallery{
	padding:0 0 140px;
}

.case-gallery-header{
	max-width:760px;
	margin-bottom:42px;
}

.case-gallery-header h2{
	margin-top:20px;
	font-size:clamp(2.8rem, 4vw, 5rem);
	font-weight:300;
	line-height:1;
	letter-spacing:-.06em;
}

.case-gallery-grid{
	display:grid;
	grid-template-columns:repeat(2, 1fr);
	gap:24px;
}

.case-browser-small{
	max-height:none;
	border-radius:24px;
}

.case-browser-small img{
	height:420px;
}

.case-feature{
	padding:0 0 140px;
}

.case-browser-feature{
	margin-top:40px;
}

.case-feature .case-gallery-header{
	max-width:850px;
}

.case-feature .case-gallery-header p:last-child{
	max-width:620px;
	color:var(--text-muted);
	line-height:1.7;
	margin-top:18px;
}

.case-subkicker{
	display:block;
	margin-top:10px;

	font-size:.72rem;
	font-weight:600;

	letter-spacing:.18em;
	text-transform:uppercase;

	color:rgba(255,255,255,.45);
}

@media(max-width:1100px){
	.work-hero-grid,
	.case-hero-grid,
	.case-details-grid{
		grid-template-columns:1fr;
	}

	.work-grid{
		grid-template-columns:1fr 1fr;
	}

	.case-sidebar{
		position:relative;
		top:auto;
	}
}

@media(max-width:700px){
	.work-hero,
	.case-hero{
		padding:150px 0 72px;
	}

	.work-hero-grid,
	.case-hero-grid{
		gap:34px;
	}

	.work-grid{
		grid-template-columns:1fr;
	}

	.work-card{
		min-height:auto;
	}

	.work-card-image{
		height:260px;
	}

	.case-browser img{
		height:420px;
	}

	.case-story{
		gap:52px;
	}

	.case-gallery{
	padding:0 0 90px;
	}

	.case-gallery-grid{
		grid-template-columns:1fr;
	}

	.case-browser-small img{
		height:340px;
	}
}