/* ===== Home Page CSS Rules ===== */

/* HubSpot form styling lives in js/ts-hubspot-forms.js — the forms render
   inside same-origin iframes, so page CSS (like a .hs-button rule here)
   never reaches them. */

/* ===== Hero Section ===== */

.ts-hero-start {
	padding-top: 445px;
}

.ts-hero-end {
	padding-top: 80px;
}

#ts-home-hero .overlay {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: linear-gradient(180deg, rgb(34 34 34 / 58%) 0%, rgba(255, 255, 255, 0) 50%);
    background: linear-gradient(180deg, rgba(34, 34, 34, 1) 0%, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0) 75%, rgb(34 34 34 / 89%) 100%)
}

/* ===== About Home ===== */

/* "featuring the aLL-Pro Corner™" caption over the before/after media */
.ts-ba-caption {
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
	letter-spacing: 0.05em;
}

/* ===== Before/After slider styles moved to css/ts-before-after.css ===== */

/* ===== Visualizer ===== */

.ts-mosaic-v2 .ts-m-cell,
.ts-mosaic-v2 .ts-m-card {
	height: 100%;
}

.ts-mosaic-v2 .ts-m-cell img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s ease;
}

.ts-mosaic-v2 .ts-m-cell:hover img {
	transform: scale(1.05);
}

.ts-mosaic-v2 .ts-m-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.7);
}

.ts-mosaic-v2 .ts-m-right {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.ts-mosaic-v2 .ts-m-right-top,
.ts-mosaic-v2 .ts-m-right-bottom {
	overflow: hidden;
	position: relative;
}

.ts-mosaic-v2 .ts-m-right-top {
	height: 490px;
}

.ts-mosaic-v2 .ts-m-right-bottom {
	height: 350px;
}

.ts-mosaic-v2 .ts-m-right img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s ease;
}

.ts-mosaic-v2 .ts-m-right-top:hover img,
.ts-mosaic-v2 .ts-m-right-bottom:hover img {
	transform: scale(1.05);
}

.ts-inset-border {
	position: absolute;
    top: 30px;
    left: 40px;
    height: calc(100% - 60px);
    width: calc(100% - 80px);
    border: 1px solid var(--ts-gold);
}

#ts-home-visualizer .ts-inset-border {
    left: 30px;
    width: calc(100% - 60px);
}

@media (max-width: 1200px) {

	.ts-mosaic-v2 .ts-m-right-top {
		height: 50%;
	}

	.ts-mosaic-v2 .ts-m-right-bottom {
		height: 100%;
	}
}

@media (max-width: 992px) {
	.ts-hero-start {
		padding-top: 250px;
	}
	
	.ts-mosaic-v2 .ts-m-cell,
    .ts-mosaic-v2 .ts-m-card {
	    height: 420px;
    }

	/* Lift the vertical labels (home-about "A DREAM COME TRUE...", contact "TALK TO US")
	   so they sit horizontally above the heading instead of as a rotated column beside it. */
	#ts-home-about .d-flex.gap-0,
	#ts-contact .d-flex.gap-0 {
		flex-direction: column;
	}

	#ts-home-about .ts-vertical,
	#ts-contact .ts-vertical {
		writing-mode: horizontal-tb;
		/* !important beats the rotate(180deg) GSAP bakes inline via .ts-fade-start */
		transform: none !important;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		border-left: 0;
		border-bottom: 1px solid var(--ts-gold);
	}
}