/* Video Section */
.video-section {
	position: relative;
	padding: 80px 0;
	overflow: visible;
	background: transparent;
}

/* Container - Properly Contained */
.video-section-container {
	max-width: 1600px;
	margin: 0 auto;
	padding: 0 40px 0 20px;
	display: grid;
	grid-template-columns: 1.2fr 0.8fr;
	gap: 20px;
	position: relative;
	align-items: center;
}

/* Left Column: Content Box */
.video-content {
	padding: 32px 50px;
	position: relative;
	display: flex;
	flex-direction: column;
	z-index: 1;
	color: #fff;
	display: grid;
	align-items: center;
	padding: 80px 0;
}

.video-content .section-content {
	padding-right: 30px;
	max-width: 600px;
}

.video-content .section-content .content-button {
	color: #fff;
}

/* Pseudo-element: Background extends to left edge */
.video-content {
	border-radius: 0 20px 20px 0;
	background: url("data:image/svg+xml,%3Csvg width='339' height='414' viewBox='0 0 339 414' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_1989_5574' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='339' height='414'%3E%3Cpath d='M0 0H319C330.046 0 339 8.9543 339 20V394C339 405.046 330.046 414 319 414H0V0Z' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_1989_5574)'%3E%3Cellipse cx='474.087' cy='67' rx='460.298' ry='459' fill='url(%23paint0_linear_1989_5574)' fill-opacity='0.1'/%3E%3Crect x='339' y='414' width='177' height='414' rx='20' transform='rotate(-180 339 414)' fill='url(%23paint1_linear_1989_5574)'/%3E%3C/g%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_1989_5574' x1='312.983' y1='210.354' x2='156.389' y2='392.063' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='white' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='white'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint1_linear_1989_5574' x1='516' y1='631.5' x2='339' y2='631.5' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23262626' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23262626'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E"), var(--black, #262626);;
	background-repeat: no-repeat;
	background-position: top right;
	background-size: auto 100%;
}
.video-content::before {
	content: '';
	position: absolute;
	top: 0;
	right: 99%;
	bottom: 0;
	left: -9999px;
	background: var(--black, #262626);
	z-index: -2;
}

/* Decorative circle */
.video-section .section-content::before {
	content: '';
	position: absolute;
	right: -100px;
	top: 50%;
	transform: translateY(-50%);
	width: 400px;
	height: 400px;
	background: radial-gradient(circle, rgba(255,255,255,0.03) 0%, transparent 70%);
	border-radius: 50%;
	z-index: -1;
	pointer-events: none;
}

/* Eyebrow badge - appears before any heading */
.video-section .section-content > p:has(+ h1),
.video-section .section-content > p:has(+ h2),
.video-section .section-content > p:has(+ h3),
.video-section .section-content > p:has(+ h4),
.video-section .section-content > p:has(+ h5),
.video-section .section-content > p:has(+ h6) {
	display: inline-block;
	background: linear-gradient(260deg, #ff7b7b 0%, #ff5c5c 100%);
	color: white;
	padding: 8px 18px;
	border-radius: 10px;
	font-size: 16px;
	font-weight: 600;
	margin-bottom: 10px;
	letter-spacing: -0.32px;
	width: fit-content;
	text-transform: capitalize;
	line-height: 1;
}

/* Headings */
.video-section .section-content h1,
.video-section .section-content h2,
.video-section .section-content h3,
.video-section .section-content h4,
.video-section .section-content h5,
.video-section .section-content h6 {
	font-size: 38px;
	color: white;
	line-height: 1.2;
	font-family: var(--font-inter, 'Inter', sans-serif);
}

/* Italic brand name */
.video-section .section-content h1 em,
.video-section .section-content h1 i,
.video-section .section-content h2 em,
.video-section .section-content h2 i,
.video-section .section-content h3 em,
.video-section .section-content h3 i,
.video-section .section-content h4 em,
.video-section .section-content h4 i,
.video-section .section-content h5 em,
.video-section .section-content h5 i,
.video-section .section-content h6 em,
.video-section .section-content h6 i {
	font-weight: 300;
	font-style: italic;
	opacity: 0.7;
	font-family: var(--font-eiko, 'Ppeiko', sans-serif);
	color: white;
	-webkit-text-stroke-width: 0;
}

/* Description paragraphs */


/* Right Column: Video */
.video-embed {
	background: #f5f5f5;
	border-radius: 20px;
	position: relative;
	overflow: hidden;
	height: 100%;
	max-height: 400px;
	cursor: pointer;
}

/* Banner video height adjustment */
.video-section.is-banner .video-embed {
	height: 450px;
}

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

.video-thumbnail {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	cursor: pointer;
}

.video-thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Video overlay gradient */
.video-thumbnail::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.1) 100%);
	pointer-events: none;
}

/* Play button - Higher specificity to avoid !important */
.video-section .video-embed .video-wrapper .video-thumbnail .video-play-button {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 73px;
	height: 73px;
	border: none;
	padding: 0;
	background: transparent;
	background-color: transparent;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.3s ease;
}

.video-section .video-embed .video-wrapper .video-thumbnail .video-play-button:hover {
	transform: translate(-50%, -50%) scale(1.05);
	background: transparent;
	background-color: transparent;
}

.video-section .video-embed .video-wrapper .video-thumbnail .video-play-button:focus {
	background: transparent;
	background-color: transparent;
	outline: none;
}

.video-section .video-embed .video-wrapper .video-thumbnail .video-play-button:active {
	background: transparent;
	background-color: transparent;
}

/* SVG circle with blur effect */
.video-play-button svg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

/* Play triangle icon */
.video-play-button .play-triangle {
	position: relative;
	z-index: 1;
	display: block;
	width: 0;
	height: 0;
	border-left: 18px solid #ffffff;
	border-top: 11px solid transparent;
	border-bottom: 11px solid transparent;
	margin-left: 4px;
}

/* Video iframe container */
.video-iframe-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.video-iframe-container iframe {
	width: 100%;
	height: 100%;
	border: none;
}

/* Light background variations */
.video-section.bg-white .section-content h1,
.video-section.bg-white .section-content h2,
.video-section.bg-white .section-content h3,
.video-section.bg-white .section-content h4,
.video-section.bg-white .section-content h5,
.video-section.bg-white .section-content h6 {
	color: #ffff;
}

.video-section.bg-white .section-content p {
	color: #666;
}

/* Merge with previous section */
.video-section[data-previous-colour] {
	padding-top: 0;
}

/* Responsive */

@media (max-width: 1440px) {
	.video-section-container {
		padding: 0 40px 0 20px;
	}

	.video-embed {
		height: 280px;
	}

	.video-section.is-banner .video-embed {
		height: 420px;
	}
}

@media (max-width: 1200px) {
	.video-section-container {
		grid-template-columns: 1.1fr 0.9fr;
		gap: 20px;
		padding: 0 30px 0 20px;
	}

	.video-content {
		padding: 28px 40px;
	}

	.video-embed {
		height: 260px;
	}

	.video-section.is-banner .video-embed {
		height: 380px;
	}

	.video-section .section-content h1,
	.video-section .section-content h2,
	.video-section .section-content h3,
	.video-section .section-content h4,
	.video-section .section-content h5,
	.video-section .section-content h6 {
		font-size: 32px;
	}

}

@media (max-width: 1024px) {
	.video-section {
		padding: 60px 0;
	}

	.video-section-container {
		grid-template-columns: 1fr;
		padding: 0 20px;
		gap: 30px;
	}

	.video-content {
		padding: 30px 40px;
	}


	.video-section .section-content h1,
	.video-section .section-content h2,
	.video-section .section-content h3,
	.video-section .section-content h4,
	.video-section .section-content h5,
	.video-section .section-content h6 {
		font-size: 32px;
	}

	.video-embed {
		width: 100%;
		max-width: 600px;
		height: 320px;
		border-radius: 16px;
		margin: 0 auto;
	}

	.video-section.is-banner .video-embed {
		height: 380px;
		max-width: 100%;
	}
}

@media (max-width: 768px) {
	.video-section {
		padding: 50px 0;
	}

	.video-section-container {
		padding: 0 16px;
		gap: 24px;
	}

	.video-content {
		padding: 26px 32px;
	}

	.video-section .section-content h1,
	.video-section .section-content h2,
	.video-section .section-content h3,
	.video-section .section-content h4,
	.video-section .section-content h5,
	.video-section .section-content h6 {
		font-size: 30px;
	}

	.video-section .section-content p {
		max-width: 100%;
	}

	.video-embed {
		height: 280px;
		max-width: 500px;
	}

	.video-section.is-banner .video-embed {
		height: 340px;
	}

	.video-content {
		padding: 45px 0;
	}

	.video-section .section-content::before {
		display: none;
	}

	.video-content::before {
		background-image: unset;
	}

	.video-content .content-buttons {
		justify-content: flex-start;
	}
}

@media (max-width: 768px) {
	.video-play-button {
		width: 65px;
		height: 65px;
	}

	.video-play-button .play-triangle {
		border-left-width: 16px;
		border-top-width: 10px;
		border-bottom-width: 10px;
	}
}

@media (max-width: 640px) {
	.video-section {
		padding: 40px 0;
	}

	.video-section-container {
		padding: 0 16px;
		gap: 20px;
	}

	.video-content {
		padding: 24px 24px;
	}


	.video-section .section-content {
		gap: 14px;
	}

	.video-section .section-content > p:has(+ h1),
	.video-section .section-content > p:has(+ h2),
	.video-section .section-content > p:has(+ h3),
	.video-section .section-content > p:has(+ h4),
	.video-section .section-content > p:has(+ h5),
	.video-section .section-content > p:has(+ h6) {
		font-size: 14px;
		padding: 10px 14px;
	}

	.video-section .section-content h1,
	.video-section .section-content h2,
	.video-section .section-content h3,
	.video-section .section-content h4,
	.video-section .section-content h5,
	.video-section .section-content h6 {
		font-size: 26px;
	}



	.video-embed {
		width: 100%;
		height: 250px;
		border-radius: 12px;
	}

	.video-section.is-banner .video-embed {
		height: 300px;
	}

	.video-play-button {
		width: 60px;
		height: 60px;
	}

	.video-play-button .play-triangle {
		border-left-width: 14px;
		border-top-width: 9px;
		border-bottom-width: 9px;
	}
}

@media (max-width: 480px) {
	.video-section {
		padding: 32px 0;
	}

	.video-content {
		padding: 20px 20px;
	}



	.video-embed {
		height: 220px;
	}

	.video-section.is-banner .video-embed {
		height: 260px;
	}

	.video-play-button {
		width: 55px;
		height: 55px;
	}

	.video-play-button .play-triangle {
		border-left-width: 12px;
		border-top-width: 8px;
		border-bottom-width: 8px;
		margin-left: 3px;
	}
}

@media (max-width: 375px) {
	.video-content {
		padding: 18px 16px;
	}


	.video-embed {
		height: 200px;
	}

	.video-section.is-banner .video-embed {
		height: 240px;
	}

	.video-play-button {
		width: 50px;
		height: 50px;
	}
}