/**
 * ==========================================================
 * Before / After Section
 * Precision Home
 * ==========================================================
 */

.ph-project-before-after{
    position:relative;
    padding:110px 0;
    background:#fff;
    overflow:hidden;
}

.ph-project-before-after__decoration{
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        radial-gradient(circle at top right,rgba(142,59,67,.08),transparent 28%),
        radial-gradient(circle at bottom left,rgba(212,175,55,.08),transparent 28%);
}

.ph-project-before-after .ph-container{
    position:relative;
    z-index:2;
}

.ph-project-before-after__header{
    max-width:760px;
    margin:0 auto 55px;
    text-align:center;
}

.ph-project-before-after__eyebrow{
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin:0 0 18px;
    color:#8E3B43;
    font-size:15px;
    font-weight:700;
}

.ph-project-before-after__eyebrow span{
    width:44px;
    height:2px;
    background:#D4AF37;
}

.ph-project-before-after__title{
    margin:0;
    color:#15171B;
    font-size:44px;
    line-height:1.3;
    font-weight:800;
}

.ph-project-before-after__title span{
    display:block;
    color:#8E3B43;
}

.ph-project-before-after__description{
    margin:22px auto 0;
    max-width:650px;
    color:#555;
    font-size:18px;
    line-height:1.9;
}

.ph-before-after{
    max-width:1300px;
    margin:auto;
}

.ph-before-after__media{
    position:relative;
    overflow:hidden;
    border-radius:26px;
    box-shadow:0 30px 80px rgba(0,0,0,.12);
    background:#f5f5f5;
    aspect-ratio:16/9;
}

.ph-before-after__image{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    user-select:none;
    pointer-events:none;
}

.ph-before-after__after {
	position: absolute;
	inset: 0;
	overflow: hidden;
	clip-path: inset(
		0
		calc(100% - var(--ph-before-after-position))
		0
		0
	);
	will-change: clip-path;
}

.ph-before-after__after img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.ph-before-after__divider{
    position:absolute;
    top:0;
    bottom:0;
    left:var(--ph-before-after-position);
    width:2px;
    background:#fff;
    transform:translateX(-50%);
    box-shadow:0 0 25px rgba(0,0,0,.25);
}

.ph-before-after__handle{
    position:absolute;
    top:50%;
    left:50%;
    width:64px;
    height:64px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    transform:translate(-50%,-50%);
    background:#8E3B43;
    color:#fff;
    box-shadow:0 12px 35px rgba(0,0,0,.25);
}

.ph-before-after__handle svg{
    width:26px;
    height:26px;
}

.ph-before-after__label{
    position:absolute;
    top:22px;
    z-index:5;
    padding:10px 18px;
    border-radius:40px;
    color:#fff;
    font-size:14px;
    font-weight:700;
    backdrop-filter:blur(10px);
    background:rgba(21,23,27,.55);
}

.ph-before-after__label--before{
    left:22px;
}

.ph-before-after__label--after{
    right:22px;
}

.ph-before-after__range{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    opacity:0;
    cursor:ew-resize;
    z-index:20;
}

.ph-project-before-after__hint{
    margin:28px 0 0;
    text-align:center;
    color:#777;
    font-size:15px;
}

/* ===========================
   Tablet
=========================== */

@media(max-width:991px){

.ph-project-before-after{
    padding:90px 0;
}

.ph-project-before-after__title{
    font-size:36px;
}

.ph-project-before-after__description{
    font-size:17px;
}

}

/* ===========================
   Mobile
=========================== */

@media(max-width:767px){

.ph-project-before-after{
    padding:70px 0;
}

.ph-project-before-after__header{
    margin-bottom:35px;
}

.ph-project-before-after__title{
    font-size:28px;
}

.ph-project-before-after__description{
    font-size:15px;
    line-height:1.9;
}

.ph-before-after__media{
    border-radius:18px;
    aspect-ratio:4/3;
}

.ph-before-after__handle{
    width:52px;
    height:52px;
}

.ph-before-after__label{
    top:14px;
    padding:8px 14px;
    font-size:12px;
}

.ph-before-after__label--before{
    left:14px;
}

.ph-before-after__label--after{
    right:14px;
}

.ph-project-before-after__hint{
    font-size:13px;
}

}