.masthead-copy > span,
.masthead-headline > p,
.masthead-cta > a{
	opacity: 0;
}
@media (min-width: 1400px) {
	.text-xxl-74 {
		font-size: 4.625rem !important;
	}
}

.intro-graphic {
	position: relative;
	width: calc(100vw * 0.35);
	max-width: 566px;
	height: 100%;
	float: inline-end;
	background: url(https://www.ttec.com/sites/default/files/2026-04/thumb-hp-intro-graphic-v2.webp) 50% 50% / cover;

	@media (min-width: 992px) {
		width: calc(100vw * 0.325);
	}
}
.inline-intro-graphic {
    float: inline-end;
    width: calc(100% * 1.3);
    max-width: 670px;
}
/* Logo marquee animations */
.logo-marquee {
	--gap: 6rem;
	--speed: 60s;
	--logo-width: 140px;
	width: 100%;
	padding: 1rem 0;
	background: #fff;

    @medi (min-width: 768px) {
        --gap: 10rem;
    }
}

.logo-marquee__viewport {
	overflow: hidden;
	position: relative;
}

/* Optional soft fade on edges */
.logo-marquee__viewport::before,
.logo-marquee__viewport::after {
	content: "";
	position: absolute;
	top: 0;
	width: 100px;
	height: 100%;
	z-index: 2;
	pointer-events: none;
}

.logo-marquee__viewport::before {
	left: 0;
	background: linear-gradient(to right, #fff, transparent);
}

.logo-marquee__viewport::after {
	right: 0;
	background: linear-gradient(to left, #fff, transparent);
}

.logo-marquee__track {
	display: flex;
	align-items: center;
	gap: var(--gap);
	width: max-content;
	animation: scroll-marquee var(--speed) linear infinite;
}

.logo-marquee__item {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
}

.logo-marquee__item img {
	width: var(--logo-width);
	height: auto;
	display: block;
	object-fit: contain;
	opacity: 0.9;
	transition: opacity 0.2s ease;
}

.logo-marquee__item img:hover {
	opacity: 1;
}

@keyframes scroll-marquee {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(calc(-50% - (var(--gap) / 2)));
	}
}

/* Pause on hover
    .logo-marquee__viewport:hover .logo-marquee__track {
        animation-play-state: paused;
    }
    */
/* Accessibility: reduce motion */
@media (prefers-reduced-motion: reduce) {
	.logo-marquee__track {
		animation: none;
	}
}

wistia-player[media-id="wtte2nxjmx"] {
	height: 100%;
}

.fs-4-5vw {
	font-size: min(4.2vw, 87px);
}

.ratio-1x1-5 {
	--bs-aspect-ratio: 150%;
}

.ratio-third-column-stat-image {
	--bs-aspect-ratio: 79.5%;
}

.fs-1-8vw {
	font-size: min(1.8vw, 35px);
}

.masthead {
	height: 650px;
	display: flex;
	flex-direction: column;
	align-items: center;

    @media (min-width: 768px) {
        height: 550px;
        justify-content: center;
    }

    @media (min-width: 992px) {
        .h-lg-auto {
            height: auto !important;
        }
    }

    @media (min-width: 1600px) {
        height: 650px;
    }
}

[data-animation-heading] > div,
[data-animation-copy],
[data-animation-cta] {
	visibility: hidden;
}

.btn-light-blue-4 {
	--bs-btn-color: var(--ttec-contrast-blue);
	--bs-btn-bg: var(--ttec-light-blue-4);
	--bs-btn-border-color: var(--ttec-light-blue-4);
	--bs-btn-hover-color: var(--ttec-contrast-blue);
	--bs-btn-hover-bg: var(--ttec-light-blue-4);
	--bs-btn-hover-border-color: var(--ttec-light-blue-4);
	--bs-btn-focus-shadow-rgb: 0, 0, 0;
	--bs-btn-active-color: var(--ttec-contrast-blue);
	--bs-btn-active-bg: var(--ttec-light-blue-4);
	--bs-btn-active-border-color: var(--ttec-light-blue-4);
	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--bs-btn-disabled-color: #000;
	--bs-btn-disabled-bg: #0495ff;
	--bs-btn-disabled-border-color: #0495ff;
}

.services-button {
	color: var(--ttec-brand-blue);
	transition: color 0.5s ease;

	&:hover {
		color: var(--ttec-dark-blue-1);
	}
}

@media (max-width: 991.9px) {
    .extend-mobile-bg {
        position: relative;

        & > * {
            position: relative;
        }
    }
    .extend-mobile-bg::before {
        content: "";
        position: absolute;
        top: 0;
        right: -100vw;
        width: 200vw;
        height: 100%;
        z-index: 0;
        background: inherit;
    }
}