/* Power Projects — Before & After Gallery */
.ppg-root{
	font-family:'Jost',Helvetica,Arial,sans-serif;
	width:100%;
}

/* Heading */
.ppg-head{ text-align:center; margin-bottom:30px; }
.ppg-eyebrow{
	font-size:12px; letter-spacing:5px; text-transform:uppercase;
	color:var(--ppg-accent,#EC7427); font-weight:600; margin-bottom:12px;
}
.ppg-title{
	font-family:Georgia,'Times New Roman',serif;
	font-size:36px; font-weight:600; margin:0 0 8px; line-height:1.15; color:inherit;
}
.ppg-title em{ color:var(--ppg-accent,#EC7427); font-style:italic; }
.ppg-sub{ color:#555; font-weight:300; max-width:520px; margin:0 auto; font-size:15px; }

/* Filter buttons */
.ppg-filter{
	display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:30px;
}
.ppg-filter-btn{
	font-family:inherit; cursor:pointer;
	border:1px solid rgba(120,120,120,.35); background:transparent; color:inherit;
	font-size:12px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase;
	padding:10px 22px; border-radius:999px;
	transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.ppg-filter-btn:hover{ border-color:var(--ppg-accent,#EC7427); color:var(--ppg-accent,#EC7427); }
.ppg-filter-btn.is-active{
	background:var(--ppg-accent,#EC7427); border-color:var(--ppg-accent,#EC7427); color:#fff;
}

/* Grid */
.ppg-grid{
	display:grid;
	grid-template-columns:repeat(var(--ppg-cols,3),minmax(0,1fr));
	gap:var(--ppg-gap,24px);
}
.ppg-card{ display:flex; flex-direction:column; }
.ppg-item-title{
	font-family:Georgia,'Times New Roman',serif;
	font-size:18px; font-weight:600; margin:14px 0 0; text-align:center; color:inherit;
}

/* Slider */
.ppg-wrap{
	position:relative; width:100%;
	aspect-ratio:var(--ppg-ratio,3 / 2);
	border-radius:var(--ppg-radius,14px);
	overflow:hidden;
	box-shadow:0 12px 34px rgba(0,0,0,.14);
	user-select:none; touch-action:none; cursor:ew-resize;
	container-type:inline-size;            /* lets the before image stay full width */
}
.ppg-wrap:focus-visible{ outline:3px solid var(--ppg-accent,#EC7427); outline-offset:3px; }
.ppg-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.ppg-before-layer{ position:absolute; inset:0; width:50%; height:100%; overflow:hidden; z-index:3; }
.ppg-before-layer .ppg-img{ width:100cqw; max-width:none; }  /* full wrapper width, never squished */

.ppg-tag{
	position:absolute; bottom:14px;
	font-size:10px; letter-spacing:2px; text-transform:uppercase; font-weight:600;
	padding:5px 11px; border-radius:6px; color:#fff; z-index:5;
}
.ppg-tag-after{ right:14px; background:var(--ppg-accent,#EC7427); }
.ppg-tag-before{ left:14px; background:rgba(17,17,17,.78); }

.ppg-handle{
	position:absolute; top:0; left:50%; width:3px; height:100%;
	background:var(--ppg-accent,#EC7427); transform:translateX(-50%); z-index:4;
}
.ppg-knob{
	position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
	width:40px; height:40px; border-radius:50%;
	background:var(--ppg-accent,#EC7427); box-shadow:0 4px 14px rgba(0,0,0,.35);
	display:flex; align-items:center; justify-content:center; color:#fff; font-size:15px;
}

/* Responsive */
@media (max-width:880px){ .ppg-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){
	.ppg-grid{ grid-template-columns:1fr; }
	.ppg-title{ font-size:28px; }
}
@media (prefers-reduced-motion:reduce){
	.ppg-filter-btn{ transition:none; }
}