/* STATS SECTION */

.notch.stat-notch {
	background: var(--color-orange);
}

.stats .content, .notch.stat-notch .notch-left, .notch.stat-notch .notch-right {
	background: var(--color-dark-sand);
}

.notch.stat-notch .notch-center svg path {
	fill: var(--color-dark-sand);
}

.stats .wrap {
	padding: var(--section-padding-y) var(--spacing-wrapper) 0;
	width: 100%;
}

.video-wrapper {
	position: relative;
	width: 100%;
    cursor: pointer;
}

.video-wrapper.is-playing {
    cursor: default;
}

.video-wrapper video {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	object-position: center;
	display: block;
	background: var(--color-text-primary);
	border-radius: 15px;
}

.play-button {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	z-index: 2;
	transition: opacity 0.3s ease;
}

.play-button img {
    display: block;
	width: 2.8vw;
    height: 2.8vw;
}

.video-wrapper.is-playing .play-button {
	opacity: 0;
	pointer-events: none;
}

.stats .flex.checkered {
	flex-direction: column;
	gap: 0;
	padding: 5% var(--spacing-wrapper);
}

.heading {
	color: var(--color-sand);
}

.heading span {
	margin-right: 12px;
	font-size: var(--font-size-heading-span);
	font-weight: 400;
	text-transform: uppercase;
}

.heading h3 {
	margin: 0;
    font-size: var(--font-size-heading-h3);
    font-style: normal;
    font-weight: 300;
    line-height: 0.75;
    letter-spacing: var(--letter-spacing-heading-h3);
    text-transform: uppercase;
	transition: color 0.3s ease-out;
}

.stats .row.flex {
	justify-content: space-between;
	padding-bottom: clamp(32px, 4.2vw, 50px);
	margin-bottom: clamp(32px, 4.2vw, 50px);
	border-bottom: 1px solid var(--color-sand);
	gap: 6%;
}

.stats .row.flex:last-child {
	margin-bottom: 0;
}

.stats .row:nth-child(odd) > div:first-child {
	order: 1;
}
.stats .row:nth-child(odd) > div:last-child {
	order: 2;
	text-align: right;
}
.stats .row:nth-child(even) > div:first-child {
	order: 2;
}
.stats .row:nth-child(even) > div:last-child {
	order: 1;
	text-align: left;
}

.reveal {
	width: 22%;
	font-size: var(--font-size-text-md);
    font-style: normal;
    font-weight: 400;
    line-height: var(--line-height-text-md);
	letter-spacing: var(--letter-spacing-text-md);
	margin-top: clamp(8px, 0.7vw, 12px);
	color: var(--color-dark-sand);
	transition: color 0.3s ease-out;
}

.stats .row:hover h3 {
	color: var(--color-orange);
} 

.stats .row:hover .reveal {
	color: var(--color-sand);
}

.reveal:has(.logos-roll) {
	margin-top: 0;
}

.logos-roll {
	position: relative;
	overflow: hidden;
	height: 100%;
	width: 100%;
}

.logos-roll .roll-item {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: flex-end;
	opacity: 0;
	transform: translateY(100%);
	transition: transform 0.6s ease-in-out, opacity 0.6s ease-in-out;
	will-change: transform, opacity;
}

.logos-roll .roll-item.active {
	opacity: 1;
	transform: translateY(0);
}

.logos-roll .roll-item img {
	width: auto;
	height: 60%;
	object-fit: contain;
}


.stats .grid {
	padding: 0 var(--spacing-wrapper) var(--spacing-wrapper) var(--spacing-wrapper);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, auto);
    gap: var(--grid-gap-y) var(--grid-gap-x);
	color: var(--color-sand);
}

.stat1 p {
	width: 72%;
}

.stat2 {
    grid-column: span 3 / span 3;
	display: flex;
    justify-content: space-between;
}

.stat3 {
    grid-column: span 4 / span 4;
    grid-row-start: 2;
	display: flex;
    justify-content: space-between;
}

.stat4 {
    grid-column: span 3 / span 3;
    grid-row-start: 3;
	display: flex;
    justify-content: space-between;
}

.stat5 {
    grid-column-start: 4;
    grid-row-start: 3;
    align-content: flex-end;
}

.stats .grid p {
	margin: 0;
	font-size: var(--font-size-grid-p);
}

.h3 {
	font-size: var(--font-size-grid-h3);
	font-style: normal;
	font-weight: 400;
	line-height: 0.75; 
	text-transform: uppercase;
}

@media (max-width: 1500px) {
	.stat1 p {
		width: 90%;
	}
}

@media (max-width: 1240px) {
	.stats .row.flex {
		padding-bottom: clamp(24px, 3.2vw, 32px);
		margin-bottom: clamp(24px, 3.2vw, 32px);
	}
	.reveal {
		margin-top: 0;
	}
	.stat1 p {
		width: 100%;
	}
}

.h3 .marked {
	color: var(--color-orange);
}

.buttons {
	gap: 10px;
	color: var(--color-sand);
	justify-content: flex-end;
}
.buttons .btn {
	font-size: clamp(10px, 0.7vw, 13px);
	font-style: normal;
	font-weight: 500;
	line-height: 1;
	text-transform: uppercase;
	display: flex;
	padding: clamp(12px, 0.9vw, 17px) clamp(22px, 1.7vw, 30.814px);
	justify-content: center;
	align-items: center;
	border-radius: 37px;
	border: 1.284px solid;
	cursor: pointer;
}

.btn.white-btn {
	background-color: transparent;
	border-color: var(--color-sand);
}

.btn.orange-btn {
	background-color: var(--color-orange);
	border-color: var(--color-orange);
}

@media (max-width: 768px) {
	.stats .wrap {
		padding: var(--section-padding-y-lg) var(--spacing-wrapper) 0;
	}
	.stats .row.flex {
		flex-direction: column;
    	gap: var(--gap-fixed);
	}
	.stats .row:nth-child(even)  {
		flex-direction: column-reverse;
	}
	.heading {
		align-self: center;
	}
	.heading span {
		margin-right: 8px;
	}
	.reveal {
		width: 100%;
    	color: var(--color-sand);
	}
	.reveal:has(.logos-roll) {
		height: 68px;
	}
	.stats .row:nth-child(odd) > div:last-child,
	.stats .row:nth-child(even) > div:last-child {
		text-align: center;
	}
	.logos-roll .roll-item {
		justify-content: center;
		align-items: center;
	}
	.play-button img {
		width: 32px;
		height: 32px;
	}
	.stat1 {
		grid-column: span 3 / span 3;
		grid-row-start: 1;
	}
	.stat5 {
        grid-row-start: 3;
        grid-column: span 4 / span 4;
    }
	.stats .hide-smaller {
		display: none;
	}
	.stats .h3 {
		line-height: 1.15;
	}
}