/* NAV V2 */
/* ===== Desktop Nav Buttons ===== */
.nav-desktop {
	display: flex;
	gap: 62px;
	align-items: center;
}

.nav-desktop .nav-btn {
	display: inline-flex;
	align-items: center;
	height: 43px;
	background-color: #efedea;
	padding: 0 24px;
	text-transform: uppercase;
	font-size: 15px;
	font-weight: 400;
	font-family: 'Anton', sans-serif;
	letter-spacing: 0.5px;
	color: #333;
	text-decoration: none;
	cursor: none !important;
	transition: background 0.3s ease, color 0.3s ease;
}

.nav-desktop .nav-btn:hover {
	background: #000;
	color: #fff;
}

.nav-mobile-toggle {
	display: none;
	position: relative;
	align-items: center;
	height: 43px;
	background-color: #efedea;
	margin: 12px 7px;
	padding: 0 30px;
	text-transform: uppercase;
	font-size: 15px;
	font-weight: 500;
	font-family: 'Anton', sans-serif;
	overflow: hidden;
	cursor: none !important;
	letter-spacing: 0.5px;
	border: none;
	border-radius: 0;
	z-index: 9;
}

.nav-mobile-toggle .nav-btn-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: auto;
	overflow: hidden;
	line-height: 1;
}

.nav-mobile-toggle .nav-btn-inner > * {
	position: relative;
	padding: 5px 0;
	transition: transform 0.3s;
	color: #333;
}

.nav-mobile-toggle .nav-btn-inner > *::after {
	position: absolute;
	content: attr(data-hover);
	top: 100%;
	width: 100%;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	color: #333;
}

.nav-mobile-toggle:hover .nav-btn-inner > * {
	transform: translate3d(0, -100%, 0);
}

#home-nav .nav-logo {
    width: 110px !important;
    height: auto !important;
    object-fit: contain;
    background-color: #efedea;
}


.mobile-menu {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #ffffff;
	z-index: 10000;
	display: none;
	flex-direction: column;
	opacity: 0;
	transform: translateY(-100%);
	transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.mobile-menu.open {
	display: flex;
	opacity: 1;
	transform: translateY(0);
}

/* .mobile-menu-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px;
  background-color: #000;
}

.mobile-menu-header .nav-logo {
	width: 110px;
	height: auto;
	background-color: transparent;
	padding: 5px;
} */

.mobile-menu-close {
	background: none;
	border: none;
	font-family: 'Anton', sans-serif;
	font-size: 16px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #ffffff;
	cursor: pointer;
	padding: 10px;
}


#home-nav {
position: fixed;
    top: 0;
    left: 0;
    right: 0;

    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: .5em;

    background: transparent;

    z-index: 10000;

    opacity: 0;
    pointer-events: none;
    transition: opacity .5s ease;
}

#home-nav.visible {
    opacity: 1;
    pointer-events: auto;
}

.mobile-menu-links {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 8px;
}

.mobile-menu-link {
	font-family: 'Anton', sans-serif;
	font-size: 2.4em;
	font-weight: 400;
	text-transform: uppercase;
	text-decoration: none;
	color: #333;
	letter-spacing: 0.02em;
	transition: color 0.3s ease;
	opacity: 0;
	transform: translateY(20px);
}

.mobile-menu.open .mobile-menu-link {
	opacity: 1;
	transform: translateY(0);
	transition: opacity 0.4s ease, transform 0.4s ease;
}

.mobile-menu.open .mobile-menu-link:nth-child(1) { transition-delay: 0.15s; }
.mobile-menu.open .mobile-menu-link:nth-child(2) { transition-delay: 0.22s; }
.mobile-menu.open .mobile-menu-link:nth-child(3) { transition-delay: 0.29s; }
.mobile-menu.open .mobile-menu-link:nth-child(4) { transition-delay: 0.36s; }
.mobile-menu.open .mobile-menu-link:nth-child(5) { transition-delay: 0.43s; }

.mobile-menu-link:hover {
	color: #888;
}

/* Light mode (daytime): black header bg, show white logo */
.mobile-logo-light { display: block !important; }
.mobile-logo-dark { display: none !important; }

/* Dark mode (nighttime): white header bg, show black logo */
body:not(.tt-lightmode-on) .mobile-logo-light { display: none !important; }
body:not(.tt-lightmode-on) .mobile-logo-dark { display: block !important; }

/* Main nav logo swap */
.nav-logo-light { display: block !important; }
.nav-logo-dark { display: none !important; }

body:not(.tt-lightmode-on) .nav-logo-light { display: none !important; }
body:not(.tt-lightmode-on) .nav-logo-dark { display: block !important; }

/* Dark mode mobile menu (when clock removes tt-lightmode-on) */
body:not(.tt-lightmode-on) .mobile-menu {
	background: #000;
}

body:not(.tt-lightmode-on) .mobile-menu-header {
	background-color: rgb(0, 0, 0);
}

body:not(.tt-lightmode-on) .mobile-menu-close {
	color: #fdfdfd;
}

body:not(.tt-lightmode-on) .mobile-menu-link {
	color: #fff;
}

body:not(.tt-lightmode-on) .mobile-menu-socials a {
	color: #fff;
}

body:not(.tt-lightmode-on) .mobile-menu-ticker {
	border-top-color: rgba(255, 255, 255, 1);
	border-bottom-color: rgba(255, 255, 255, 1);
}

body:not(.tt-lightmode-on) .mobile-menu-ticker-track span {
	color: rgba(255, 255, 255, 1);
}




/* Ticker */

.mobile-menu-ticker-track {
	display: inline-flex;
	animation: tickerScroll 20s linear infinite;
}

.ticker-arrow {
	width: 14px;
	height: 14px;
	fill: currentColor;
	vertical-align: middle;
	display: inline-block;
	margin: 0 4px;
}

.mobile-menu-ticker {
	overflow: hidden;
	white-space: nowrap;
	padding: 20px 0;
	border-top: 1px solid rgba(0, 0, 0, 1);
	border-bottom: 1px solid rgba(0, 0, 0, 1);
}


.mobile-menu-ticker-track span {
	font-family: 'Anton', sans-serif;
	font-size: 1em;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: rgba(0, 0, 0, 1);
	white-space: nowrap;
}

@keyframes tickerScroll {
	0% { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}

/* Social links */
.mobile-menu-socials {
	display: flex;
	justify-content: center;
	gap: 24px;
	padding: 24px 20px;
}

.mobile-menu-socials a {
	font-family: 'Anton', sans-serif;
	font-size: 0.85em;
	text-transform: uppercase;
	text-decoration: none;
	color: #333;
	letter-spacing: 0.05em;
	transition: color 0.3s ease;
}

.mobile-menu-socials a:hover {
	color: #888;
}

/* ===== Responsive Toggle ===== */
@media (min-width: 769px) {
	.nav-mobile-toggle {
		display: none;
	}
	.nav-desktop {
		display: flex;
	}
	.mobile-menu {
		display: none !important;
	}
}

@media (max-width: 768px) {
	.nav-desktop {
		display: none;
	}
	.nav-mobile-toggle {
		display: inline-flex;
	}
}
/* END NAV V2 */




/* ------------------------------------------------------------- *
 * Scrolling text
/* ------------------------------------------------------------- */

.tt-scrolling-text {
	position: relative;
	display: flex;
	padding: 10px 0;
	text-transform: uppercase;
	font-family: var(--tt-alter-font);
	font-size: calc(21px + 5.5vw);
	line-height: 1;
	font-weight: bold;
	font-weight: 600;
	overflow: hidden;
}

.tt-scrt-inner {
	display: flex;
	width: fit-content;
	flex: auto;
	flex-shrink: 0;
	flex-direction: row;
}
.tt-scrt-content {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	will-change: transform;
}

/* Scrolling text separator  
============================ */
.tt-scrt-separator {
	display: flex;
	margin: 0 3vw;
}
.tt-scrt-separator > i {
	font-size: calc(16px + 3vw);
}
.tt-scrt-separator > svg {
	height: calc(20px + 2.5vw);
	fill: var(--tt-text-color);
}

/* If class "scrt-dyn-separator" and data attribute "data-opposite-direction" is enabled */
.tt-scrolling-text.scrt-dyn-separator[data-opposite-direction="true"] .tt-scrt-separator > i,
.tt-scrolling-text.scrt-dyn-separator[data-opposite-direction="true"] .tt-scrt-separator > svg {
	transform: rotate(180deg);
}

/* Dynamic separator */
.tt-scrolling-text.scrt-dyn-separator .tt-scrt-separator {
	transform: scaleX(-1); /* You can use "rotate(180deg)" instead */
	transition: transform .3s;
}
.tt-scrolling-text.scrolled-up.scrt-dyn-separator .tt-scrt-separator {
	transform: scaleX(1); /* You can use "rotate(0deg)" instead */
}


/* Crossed scrolling text  
========================== */
.tt-scrolling-text-crossed {
	display: block;
	padding-top: calc(30px + 3vw);
	padding-bottom: calc(30px + 3vw);
	overflow: hidden;
}
.tt-scrolling-text-crossed-inner {
	margin-left: -50px;
	margin-right: -50px;
}
.tt-scrolling-text-crossed .tt-scrolling-text {
	padding: 5px 0;
	background-color: var(--tt-bg-color);
}

.bg-white .tt-scrolling-text-crossed .tt-scrolling-text {
	background-color: #ededed;
}

.tt-scrolling-text-crossed .tt-scrolling-text {
	padding: 20px 0;
}
.tt-scrolling-text-crossed .tt-scrolling-text:nth-child(1) {
	transform: translateY(50%) rotate(8deg);
}
.tt-scrolling-text-crossed .tt-scrolling-text:nth-child(2) {
	transform: translateY(-50%) rotate(-8deg);
}
@media (max-width: 991px) {
	.tt-scrolling-text-crossed .tt-scrolling-text:nth-child(1) {
		transform: translateY(50%) rotate(12deg);
	}
	.tt-scrolling-text-crossed .tt-scrolling-text:nth-child(2) {
		transform: translateY(-50%) rotate(-12deg);
	}
}


/* Scrolling text reverse colors
================================= */
.tt-scrolling-text.scrt-color-reverse {
	background-color: var(--tt-text-color);
	color: var(--tt-bg-color);
}
.tt-scrolling-text.scrt-color-reverse .tt-scrt-separator > svg {
	fill: var(--tt-bg-color);
}



/* =======================================
MOVED FROM PAGES
======================================= */
    /* Home nav styling */
			#home-nav {
			position: fixed;
			top: 20px;
			left: 20px;
			right: 20px;
			z-index: 1001;
			opacity: 0;
			pointer-events: none;
			transition: opacity 0.3s ease, transform 0.3s ease;			
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		#home-nav.visible {
			opacity: 1;
			pointer-events: auto;
		}

		#home-nav .nav-logo {
			width: 110px;
			height: auto;
			cursor: none !important;
			background-color: #efedea;
			padding: 5px;
			transition: transform 0.3s ease;
			margin-top: 10px;
		}


		#home-nav .nav-logo:hover {
			transform: scale(1.1);
		}

		/* Menu wrapper - styled like other pages' submenu */
		.nav-menu-wrapper {
			position: relative;
		}

		/* Menu button - styled exactly like .tt-btn .tt-btn-secondary */
			.nav-menu-btn {
				position: relative;
				display: inline-flex;
				align-items: center;
				height: 43px;
				opacity: 1;
				background-color: #efedea;
				margin: 12px 7px;
				padding: 0 30px;
				text-transform: uppercase;
				text-align: center;
				font-size: 15px;
				font-weight: 500;
				font-family: 'Anton', sans-serif;
				overflow: hidden;
				cursor: none !important;
				letter-spacing: 0.5px;
				border: none;
				border-radius: 0px;
				z-index: 9;
			}

		/* Button inner wrapper - matches .tt-btn-inner */
		.nav-menu-btn .nav-btn-inner {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: auto;
			overflow: hidden;
			line-height: 1;
		}

		.nav-menu-btn .nav-btn-inner > * {
			position: relative;
			padding: 5px 0;
			transition: transform 0.3s;
			color: #333;
		}

		.nav-menu-btn .nav-btn-inner > *,
		.nav-menu-btn .nav-btn-inner > *::after {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100%;
		}

		.nav-menu-btn .nav-btn-inner > *::after {
			position: absolute;
			content: attr(data-hover);
			top: 100%;
			width: 100%;
			left: 0;
			padding-left: 0;
			padding-right: 0;
			color: #333;
		}

		.nav-menu-btn:hover .nav-btn-inner > *:not(.tt-btn-icon) {
			transform: translate3d(0, -100%, 0);
		}

		/* Dropdown - styled exactly like other pages' submenus */
		.nav-dropdown {
			position: absolute;
			display: block !important;
			top: 100%;
			right: 9px !important;
			width: 90px;
			padding-top: 20px;
			text-align: right;
			visibility: hidden;
			opacity: 0;
			z-index: 99999;
			transform: translate3d(0, 10px, 0);
			transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out, transform 0.3s ease-in-out;
			list-style: none;
			margin: 0;
		}


		/* Show dropdown on hover instead of click */
		.nav-menu-wrapper:hover .nav-dropdown {
			visibility: visible;
			opacity: 1;
			transform: translate3d(0, 0, 0);
			transition-delay: .1s;
		}

		/* Dropdown list - exact styling from other pages */
		/* Base dropdown styles */
		.nav-dropdown {
		position: absolute;
		display: block !important;
		top: 100%;
		right: 9px;
		width: 90px;
		padding-top: 20px;
		text-align: right;
		visibility: hidden;
		opacity: 0;
		z-index: 99999;
		transform: translate3d(0, 10px, 0);
		transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out, transform 0.3s ease-in-out;
		list-style: none;
		margin: 0;
		background-color:  #efedea;
		padding: 15px 0;
		border-radius: 0px;
		}

		/* Desktop: Show on hover */
		@media (min-width: 769px) {
		.nav-menu-wrapper:hover .nav-dropdown {
			visibility: visible;
			opacity: 1;
			transform: translate3d(0, 0, 0);
			transition-delay: .1s;
		}
		}

		/* Mobile: Show only with .show class */
		@media (max-width: 768px) {
		.nav-dropdown {
			visibility: hidden !important;
			opacity: 0 !important;
			transform: translate3d(0, 10px, 0) !important;
			transition: all 0.3s ease-in-out !important;
		}
		
		.nav-dropdown.show {
			visibility: visible !important;
			opacity: 1 !important;
			transform: translate3d(0, 0, 0) !important;
		}
		
		/* Prevent hover from interfering on mobile */
		.nav-menu-wrapper:hover .nav-dropdown:not(.show) {
			visibility: hidden !important;
			opacity: 0 !important;
		}
		}

		.nav-dropdown a {
			position: relative;
			display: block;
			padding: 8px 30px 8px 20px;
			text-decoration: none;
			font-size: 15px;
			font-weight: 400;
			line-height: 1.4;
			color: #333;
			transition: color .2s;
			cursor: none !important;
			text-transform: uppercase;
			font-family: var(--tt-alter-font, 'Anton', sans-serif);
		}

		.nav-dropdown a:hover {
			color: white;
			background: black;
		}

        /* media element aspect ratio of 9x16 */
        .aspect-9-16 {
            aspect-ratio: 9/16;
        
        }

        .aspect-9-16 figure,
        .aspect-9-16 a,
        .aspect-9-16 img,
        .aspect-9-16 video {
            height: 100%;
            width: 100%;
            object-fit: cover;
            padding: 0px;
        }


        /* equal-height side by side media elements */
        .work2-media-row {
            align-items: stretch;
        }

        .work2-media-row .tt-col-xl-4,
        .work2-media-row .tt-col-xl-8 {
            display: flex;
            flex-direction: column;
        }

        /* Make both tt-image wrappers fill their column */
        .work2-media-row .tt-col-xl-4 .tt-image,
        .work2-media-row .tt-col-xl-8 .tt-image {
            flex: 1;
            margin-bottom: 0 !important;
        }

        /* Make the inner figure/anchor/img stretch to fill */
        .work2-media-row .tt-col-xl-4 .tt-image figure,
        .work2-media-row .tt-col-xl-4 .tt-image a,
        .work2-media-row .tt-col-xl-4 .tt-image img {
            height: 100%;
            width: 100%;
            object-fit: cover;
            display: block;
        }

        /* Remove any fixed aspect ratio fighting the height */
        .work2-media-row .tt-col-xl-4 .aspect-9-16 {
            aspect-ratio: unset;
        }
        
        /* CAROUSEL items portrait mode */
        /* Default carousel item - landscape */
        .tt-cc-image-wrap {
            aspect-ratio: 16/9;
        }

        /* Portrait slides */
        .swiper-slide.is-portrait .tt-cc-image-wrap {
            aspect-ratio: 9/16;
        }

        /* Make image fill whatever the figure's ratio is */
        .tt-cc-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        /* CAROUSEL make items equal height */
        /* Set uniform height for the carousel row */
        /* All slides same height */
        #work-carousel .tt-content-carousel .swiper-slide {
            height: 600px;
            width: auto !important;
            display: flex;
        }
		

        #work-carousel .tt-content-carousel .tt-content-carousel-item,
        #work-carousel .tt-content-carousel .tt-content-carousel-item a {
            height: 100%;
        }

        #work-carousel .tt-content-carousel .tt-cc-image-wrap {
            height: 100%;
            aspect-ratio: 16/9;
            margin: 0;
        }

        #work-carousel .tt-content-carousel .swiper-slide.is-portrait .tt-cc-image-wrap {
            aspect-ratio: 9/16;
        }

        #work-carousel .tt-content-carousel .tt-cc-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        /* BORDER RADIUS for media items */
        .tt-cc-image, .tt-cc-video, .tt-content-carousel-item .tt-anim-zoomin-wrap, .tt-content-carousel-item .tt-image-parallax-wrap {
            border-radius: 0px;
            overflow: hidden;
        }

        .tt-grid[class*="ttgr-gap-"] .tt-gallery-item {
            border-radius: 0px;
        }

        .tt-npi-image {
            display: block;
            overflow: hidden;
            border-radius: 0px;
            line-height: 0;
        }

        .tt-image.tti-border-radius a.tt-image-link, .tt-image.tti-border-radius .tt-anim-zoomin-wrap, .tt-image.tti-border-radius .tt-image-parallax-wrap, .tt-image.tti-border-radius img {
            border-radius: 0px;
        }


		#page-header.ph-full .page-header-inner {
			padding-top: 0px;
			padding-bottom: 0px;
		}

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

		/* Hide on mobile */
			/* @media (max-width: 768px) {
			#home-nav {
				display: none;
			}
			} */

		/* Show dropdown on hover - DESKTOP ONLY */
		@media (min-width: 769px) {
		.nav-menu-wrapper:hover .nav-dropdown {
			visibility: visible;
			opacity: 1;
			transform: translate3d(0, 0, 0);
			transition-delay: .1s;
		}
		}

		@media (max-width: 768px) {
		/* On mobile, only show dropdown when .show class is present */
		.nav-dropdown.show {
			visibility: visible;
			opacity: 1;
			transform: translate3d(0, 0, 0);
		}
		
		}

        @media (max-width: 1199px) {
            .work2-media-row .tt-col-xl-4 .tt-image {
                min-height: 400px;
            }
        }


		/* Adjust header image positioning on mobile only for NETWORK page image*/
		@media (max-width: 768px) {

			.ph-image img {
				width: 100%;
				height: 100%;
				object-fit: cover;
				object-position: 50% 50%;
			}
			
		}


		/* ===== YouTube Playlist Carousels ===== */
 
/* Playlist section wrapper */
.yt-playlist-section {
	padding: 40px 0;
}
 
/* Playlist title row */
.yt-playlist-row-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-bottom: 24px;
	padding: 0 30px;
}
 
.yt-playlist-row-title {
	font-family: 'Anton', sans-serif;
	font-size: 1.6em;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin: 0;
	line-height: 1;
}
 
.yt-playlist-row-count {
	font-size: 0.8em;
	opacity: 0.4;
	margin-left: 12px;
}
 
.yt-playlist-row-link {
	font-size: 0.8em;
	opacity: 0.4;
	text-decoration: none;
	color: inherit;
	transition: opacity 0.3s ease;
	white-space: nowrap;
}
 
.yt-playlist-row-link:hover {
	opacity: 1;
}
 
/* Carousel slide sizing */
.yt-playlist-section .tt-content-carousel .swiper-slide {
	height: auto;
}

.tt-content-carousel-item {
    margin-left: 0vw !important;
    margin-right: 0vw !important;
}
 
/* Thumbnail */
/* Thumbnail */
.yt-slide-thumb {
	position: relative;
	aspect-ratio: 16/9;
	overflow: hidden;
	background: #111;
	cursor: pointer;
}

.yt-slide-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
	display: block;
}

.yt-slide-thumb:hover img {
	transform: scale(1.05);
}

/* Title overlay at bottom of card */
.yt-slide-title-overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 50px 12px 12px;
	background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0) 100%);
	pointer-events: none;
}

.yt-slide-title-overlay h4 {
	font-size: 0.8em;
	font-weight: 500;
	line-height: 1.3;
	margin: 0;
	color: white;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
 
/* Play icon */
.yt-slide-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0.8);
	width: 50px;
	height: 50px;
	background: rgba(0, 0, 0, 0.75);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.3s ease, transform 0.3s ease;
	pointer-events: none;
}
 
.yt-slide-play::after {
	content: '';
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 9px 0 9px 16px;
	border-color: transparent transparent transparent white;
	margin-left: 3px;
}
 
.yt-slide-thumb:hover .yt-slide-play {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}
 
/* Episode badge */
.yt-slide-ep {
	position: absolute;
	bottom: 8px;
	left: 8px;
	background: rgba(0, 0, 0, 0.8);
	color: white;
	padding: 3px 10px;
	font-size: 0.7em;
	font-weight: 600;
	letter-spacing: 0.05em;
}

 
/* Loading / Error states */
.yt-row-loading {
	padding: 40px;
	text-align: center;
	opacity: 0.3;
	font-size: 0.9em;
}
 
.yt-row-error {
	padding: 40px;
	text-align: center;
	opacity: 0.4;
	font-size: 0.9em;
}
 
/* ===== Video Modal ===== */
.yt-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.4s ease, visibility 0.4s ease;
}
 
.yt-modal.active {
	opacity: 1;
	visibility: visible;
}
 
.yt-modal-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.92);
}
 
.yt-modal-content {
	position: relative;
	width: 90%;
	max-width: 1000px;
	z-index: 1;
}
 
.yt-modal-close {
	position: absolute;
	top: -45px;
	right: 0;
	background: none;
	border: none;
	color: white;
	font-size: 2.2em;
	cursor: pointer;
	opacity: 0.6;
	transition: opacity 0.3s ease;
	line-height: 1;
	padding: 0;
}
 
.yt-modal-close:hover {
	opacity: 1;
}
 
.yt-modal-player {
	aspect-ratio: 16/9;
	background: #000;
	width: 100%;
}
 
.yt-modal-player iframe {
	width: 100%;
	height: 100%;
	border: none;
}

#sound-toggle {
	position: absolute;
	bottom: 80px;
	left: 40px;
	z-index: 10;
	background: rgba(0, 0, 0, 0.6);
	border: none;
	color: white;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	cursor: pointer;
	font-size: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.3s ease;
}

#sound-toggle:hover {
	background: rgba(0, 0, 0, 0.85);
}

/* Center the Network intro text */
.tt-section .tt-anim-fadeinup h1 {
	text-align: center !important;
	max-width: 900px;
	margin: 0 auto !important;
}
 /* END Center the Network intro text */

/* ===== Responsive ===== */
@media (max-width: 768px) {
	.yt-playlist-section .tt-content-carousel .swiper-slide {
		width: 85vw !important;
	}
 
	.yt-playlist-row-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
		padding: 0 20px;
	}
 
	.yt-playlist-row-title {
		font-size: 1.3em;
	}
 
	.yt-modal-content {
		width: 95%;
	}
 
	.yt-modal-close {
		top: -40px;
		font-size: 1.8em;
	}
}

	/* Mobile video sizing */
	.video-mobile {
		display: none;
	}

	@media (max-width: 768px) {
		.video-desktop {
			display: none;
		}
		.video-mobile {
			display: block;
		}
	}

	@media (max-width: 768px) {
	.ph-video .video-mobile {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	.ph-video .video-mobile .tt-embed-item {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}
 
/* ===== Light mode ===== */
body.tt-lightmode-on .yt-slide-ep {
	background: rgba(0, 0, 0, 0.7);
}