/* --- 1. THEME VARIABLES --- */
        :root {
            /* Brand Identity Colors */
            --brand-navy: #022e47;
            --brand-cream: #FAF8F1;
            --brand-orange: #f68f1d;
            --brand-pink: #ea3b60;
			--brand-yellow: #ffff00;
            
            /* Default LIGHT Theme Mapping */
            --bg-body: var(--brand-cream);
            --text-main: var(--brand-navy);
            --text-muted: rgba(2, 46, 71, 0.6);
            --nav-bg-scrolled: rgba(250, 248, 241, 0.95);
            --nav-mobile-bg: #FAF8F1;
            --nav-mobile-shadow: rgba(0,0,0,0.1);
            
            /* Footer is always dark */
            --footer-bg: var(--brand-navy);
            
            --vf-grad: linear-gradient(135deg, var(--brand-orange) 0%, var(--brand-orange) 65%, var(--brand-pink) 100%);
            
            --font-display: 'Bakbak One', cursive;
            --font-body: 'Work Sans';

			/* DEFAULT / DARK THEME CONFIGURATION */
    --card-bg: var(--brand-navy);
    --card-text: #ffffff;
    --card-text-muted: rgba(255, 255, 255, 0.7);
    --card-border: rgba(255, 255, 255, 0.1);
    --card-hover-border: rgba(255, 255, 255, 0.4);
    --card-avatar-border: #ffffff;
    --card-watermark: rgba(255, 255, 255, 0.05);
    --card-highlight: rgba(255, 255, 255, 0.12);
    /* Deep dark shadow for dark mode context */
    --card-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
    --card-shadow-center: 0 25px 50px rgba(0, 0, 0, 0.5);
}

/* Explicit Dark Theme Mapping (Matches default) */
html[data-theme="dark"] {
    --card-bg: var(--brand-navy);
    --card-text: #ffffff;
    --card-text-muted: rgba(255, 255, 255, 0.7);
    --card-border: rgba(255, 255, 255, 0.1);
    --card-hover-border: rgba(255, 255, 255, 0.4);
    --card-avatar-border: #ffffff;
    --card-watermark: rgba(255, 255, 255, 0.05);
    --card-highlight: rgba(255, 255, 255, 0.12);
    --card-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
    --card-shadow-center: 0 25px 50px rgba(0, 0, 0, 0.5);
}

/* LIGHT THEME CONFIGURATION */
html[data-theme="light"] {
    --card-bg: #ffffff;
    --card-text: var(--brand-navy);
    --card-text-muted: rgba(2, 46, 71, 0.7);
    --card-border: rgba(2, 46, 71, 0.06);
    --card-hover-border: rgba(2, 46, 71, 0.4);
    --card-avatar-border: var(--brand-navy);
    --card-watermark: rgba(2, 46, 71, 0.05);
    --card-highlight: rgba(2, 46, 71, 0.08);
    /* Soft, high-end navy tinted shadow for light mode context */
    --card-shadow: 0 12px 32px rgba(2, 46, 71, 0.06), 0 4px 12px rgba(2, 46, 71, 0.03);
    --card-shadow-center: 0 25px 50px rgba(2, 46, 71, 0.12), 0 10px 20px rgba(2, 46, 71, 0.08);
        }

        /* DARK THEME OVERRIDES */
        [data-theme="dark"] {
            --bg-body: #011a2a; 
            --text-main: #e6e6e6;
            --text-muted: rgba(255, 255, 255, 0.6);
            --nav-bg-scrolled: rgba(1, 26, 42, 0.95);
            --nav-mobile-bg: #022e47;
            --nav-mobile-shadow: rgba(0,0,0,0.4);
        }

        /* --- 2. GLOBAL STYLES --- */
        body {
            background-color: var(--bg-body);
            font-family: var(--font-body);
            color: var(--text-main);
            overflow-x: hidden;
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        .text-gradient {
            background: var(--vf-grad);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
		

        
        /* --- 3. AMBIENT BACKGROUND --- */
        .ambient-light {
            position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
            z-index: -1; pointer-events: none; overflow: hidden;
            background: var(--bg-body);
            transition: background-color 0.3s ease;
        }

        .orb {
            position: absolute; border-radius: 50%;
            filter: blur(80px); opacity: 0.5;
            animation: floatOrb 20s infinite ease-in-out;
        }

        .orb-1 { width: 100vw; height: 100vw; background: var(--brand-orange); top: -10%; left: -10%; opacity: 0.15;}
        .orb-2 { width: 30vw; height: 30vw; background: var(--brand-pink); bottom: 10%; right: -5%; animation-delay: -5s; opacity: 0.15;}
        .orb-3 { width: 60vw; height: 60vw; background: #ff5500; top: 40%; left: 40%; animation-delay: -10s; opacity: 0.1;}

        @keyframes floatOrb {
            0%, 100% { transform: translate(0, 0) scale(1); }
            50% { transform: translate(30px, -50px) scale(1.1); }
        }

        @keyframes floatOrb {
            0%, 100% { transform: translate(0, 0) scale(1); }
            50% { transform: translate(30px, -50px) scale(1.1); }
        }

/* Ensure cards stretch properly in Bootstrap rows */
.premium-overlay-card {
    min-height: 340px; /* Adjust this to match the height of your CTA card */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    background-color: #000; /* Fallback */
}

/* Optional: Slight float effect on the card when hovering */
.premium-overlay-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.2) !important;
}

/* Background image styling */
.premium-bg-img {
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 0;
}

/* Optional: Subtle image zoom on hover (you can remove this block if you want zero animations) */
.premium-overlay-card:hover .premium-bg-img {
    transform: scale(1.05); 
}

/* Gradient overlay so white text is always readable */
.premium-overlay {
    background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.85) 100%);
    z-index: 1;
}

/* Large aesthetic outline numbers */
.premium-num {
    font-size: 3.5rem;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.4);
    line-height: 1;
    font-family: var(--font-display, sans-serif); /* Uses your existing CSS variable if available */
}

/* Description styling - permanently visible now */
.premium-desc {
    font-size: 0.95rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.85) !important;
}
		
		/* --- Dynamic Hero Image Frame --- */
		.hero-image-wrapper {
			position: relative;
			width: 100%;
			max-width: 400px;
			aspect-ratio: 1 / 1;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.dynamic-blob-frame {
			position: relative;
			width: 100%;
			height: 150%;
			overflow: hidden;
			z-index: 2;
			/* Complex border-radius to create an organic, non-basic shape */
			border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
			/* Gentle morphing animation */
			animation: morphing-blob 8s ease-in-out infinite;
			box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
		}

		.blob-image {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

		/* A gradient decoration behind the frame to make the shape pop */
		.blob-decoration {
			position: absolute;
			top: -5%;
			left: -5%;
			width: 110%;
			height: 110%;
			background: linear-gradient(135deg, var(--vf-pink, #ff2a70), #ff7a00);
			border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
			z-index: 1;
			opacity: 0.3;
			animation: morphing-blob-reverse 10s ease-in-out infinite;
			filter: blur(15px);
		}

		/* Animations for the organic pattern shapes */
		@keyframes morphing-blob {
			0% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
			50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
			100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
		}

		@keyframes morphing-blob-reverse {
			0% { border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; }
			50% { border-radius: 70% 30% 50% 50% / 30% 30% 70% 70%; }
			100% { border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; }
		}
		
		/* --- HERO PRIMARY BUTTON --- */
.btn-glow {
    background: var(--vf-grad); /* Make sure --vf-grad is defined with your orange-to-pink specs */
    color: white !important;
    padding: 16px 32px;
    border-radius: 100px;
    font-family: var(--font-body); /* Work Sans */
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 1px;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    border: none;
    box-shadow: 0 10px 20px rgba(246, 143, 29, 0.3); /* Verafede Orange shadow */
}

.btn-glow:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(234, 59, 96, 0.4); /* Shifts to Verafede Pink shadow */
}

/* --- HERO SECONDARY BUTTON (Outline) --- */
.btn-outline-glow {
    background: transparent;
    color: #f68f1d !important; /* Verafede Primary Orange */
    border: 2px solid #f68f1d;
    padding: 14px 30px; /* Reduced by 2px to account for the border and match the exact height of btn-glow */
    border-radius: 100px;
    font-family: var(--font-body); /* Work Sans */
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 1px;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.btn-outline-glow:hover {
    background: #f68f1d;
    color: white !important;
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(246, 143, 29, 0.4);
}
		

		/* --- Background Glows --- */
		.hero-glow-1, .hero-glow-2 {
			position: absolute;
			border-radius: 50%;
			filter: blur(80px);
			z-index: 0;
			opacity: 0.15;
		}
		.hero-glow-1 {
			top: -10%; left: -5%; width: 400px; height: 400px;
			background: var(--vf-pink, #ff2a70);
		}
		.hero-glow-2 {
			bottom: -10%; right: -5%; width: 300px; height: 300px;
			background: #ff7a00;
		}

		/* --- Pulse Indicator --- */
		.status-dot {
			width: 10px; height: 10px;
			background-color: #00ff88;
			border-radius: 50%;
			display: inline-block;
			box-shadow: 0 0 0 rgba(0, 255, 136, 0.7);
			animation: status-pulse 2s infinite;
		}
		@keyframes status-pulse {
			0% { box-shadow: 0 0 0 0 rgba(0, 255, 136, 0.7); }
			70% { box-shadow: 0 0 0 10px rgba(0, 255, 136, 0); }
			100% { box-shadow: 0 0 0 0 rgba(0, 255, 136, 0); }
		}
		/* --- DYNAMIC THEME TEXT --- */
		.theme-text-dynamic {
			color: #022e47; /* Verafede Navy Blue for Light Mode */
			transition: color 0.3s ease;
		}

		[data-theme="dark"] .theme-text-dynamic {
			color: rgba(255, 255, 255, 0.7); /* Soft white for Dark Mode */
		}


		/* --- Floating Glassmorphism Cards --- */
		.glass-panel {
			background: rgba(255, 255, 255, 0.05);
			backdrop-filter: blur(10px);
			-webkit-backdrop-filter: blur(10px);
			border: 1px solid rgba(255, 255, 255, 0.1);
			border-radius: 15px;
			box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
		}

		.floating-card {
			position: absolute;
			z-index: 5;
			padding: 12px 18px;
			animation: float 20s ease-in-out infinite;
		}

		.card-top-right {
			top: 5%; right: -15%;
			display: flex; align-items: center; gap: 15px;
			animation-delay: 0s;
		}

		.card-top-right .stat-icon {
			width: 40px; height: 40px;
			border-radius: 50%;
			background: rgba(255, 42, 112, 0.2);
			color: var(--vf-pink, #ff2a70);
			display: flex; align-items: center; justify-content: center;
			font-size: 1.2rem;
		}

		.card-bottom-left {
			bottom: 15%; left: -10%;
			padding: 10px 20px;
			border-radius: 30px;
			animation-delay: 2s; /* Offset animation so they float out of sync */
		}

		@keyframes float {
			0% { transform: translateY(0px); }
			50% { transform: translateY(-15px); }
			100% { transform: translateY(0px); }
		}

		/* Ensure the wrapper doesn't crop the floating elements out on mobile */
		@media (max-width: 991px) {
			.card-top-right { right: -5%; top: -5%; }
			.card-bottom-left { left: 0%; bottom: 5%; }
		}
		
		/* --- 7. HERO SECTION (STYLED FOR INNOVATION) --- */
		.hero-section {
			min-height: 100vh;
			display: flex;
			align-items: center;
			position: relative;
			padding-top: 100px;
			z-index: 2; /* Keep above ambient orbs */
		}

		/* "EST. 2017" Badge */
		.hero-badge {
			display: inline-block;
			font-family: var(--font-display);
			color: var(--text-main); 
			letter-spacing: 3px;
			font-size: 0.85rem;
			padding: 8px 16px;
			border-radius: 50px;
			background: rgba(246, 143, 29, 0.1); /* Subtle brand orange tint */
			border: 1px solid rgba(246, 143, 29, 0.3);
			backdrop-filter: blur(5px);
		}

		/* Massive, Bold Display Typography */
		.hero-title {
			font-family: var(--font-display);
			font-size: clamp(3rem, 6vw, 5.5rem); /* Responsive scaling */
			line-height: 0.8;
			letter-spacing: -0.01em; /* Emulating the -40 letter spacing from brand guidelines */
			margin-bottom: 1.5rem;
			text-transform: uppercase;
			color: var(--text-main);
			text-shadow: 0 10px 30px rgba(0,0,0,0.05);
		}
		
		.section-title {
			font-family: var(--font-display);
			font-size: clamp(2.5rem, 5vw, 5rem); 
			line-height: 0.9; 
			letter-spacing: 0.03em; 
			margin-bottom: 1.5rem;
			text-transform: uppercase;
			color: var(--text-main);
			text-shadow: 0 10px 30px rgba(0,0,0,0.05);
		}

		/* Theme-aware Lead Text */
		.hero-lead {
			font-family: var(--font-body);
			font-size: 1.15rem;
			font-weight: 700;
		}

		/* Theme-aware Outline Button */
		.btn-modern-outline {
			border: 2px solid var(--text-main);
			color: var(--text-main);
			font-family: var(--font-body);
			font-weight: 600;
			text-transform: uppercase;
			font-size: 0.9rem;
			transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
		}

		.btn-modern-outline:hover {
			background: var(--text-main);
			color: var(--bg-body);
			transform: translateY(-2px);
			box-shadow: 0 10px 20px rgba(0,0,0,0.1);
		}

		/* --- HORIZONTAL SCROLL GALLERY --- */
		.horizontal-scroll-section {
			height: 300vh; /* Creates the "runway" for the user to scroll down */
			position: relative;
			background: transparent;
			z-index: 10;
		}

		.horizontal-sticky-container {
			position: sticky;
			top: 0;
			height: 100vh;
			width: 100%;
			overflow: hidden;
			display: flex;
			align-items: center;
		}

		/* The track that moves left and right */
		.horizontal-track {
			display: flex;
			gap: 8vw; /* Spacing between exhibits */
			padding: 0 10vw; /* Initial offset so it starts nicely indented */
			width: max-content;
			will-change: transform; /* Hardware acceleration for smooth scrolling */
			align-items: center;
		}

		/* The Title Slide (First Item) */
		.gallery-title-slide {
			width: 40vw;
			min-width: 400px;
			flex-shrink: 0;
		}

		/* The Exhibit Slides */
		.gallery-slide {
			width: 55vw; /* Takes up most of the screen width */
			max-width: 800px;
			min-width: 350px;
			height: 65vh;
			position: relative;
			flex-shrink: 0;
		}

		/* The Picture Frame */
		.gallery-card {
			width: 100%;
			height: 100%;
			position: relative;
			overflow: hidden;
			box-shadow: 0 30px 60px rgba(0,0,0,0.3);
			border-radius: 32px;
		}
		html[data-theme="light"] .gallery-card { box-shadow: 0 20px 40px rgba(0,0,0,0.08); }


		/* The Overlapping Plaque */
		.gallery-plaque {
			position: absolute;
			bottom: -2rem; /* Hangs slightly off the bottom */
			left: -3rem; /* Hangs slightly off the left */
			background: var(--theme-card-bg, rgba(20, 20, 20, 0.7));
			backdrop-filter: blur(25px);
			border: 1px solid var(--theme-card-border, rgba(255, 255, 255, 0.05));
			padding: 3rem;
			width: 80%;
			max-width: 450px;
			box-shadow: 0 20px 40px rgba(0,0,0,0.2);
			z-index: 5;
			border-radius: 24px;
		}

		html[data-theme="light"] .gallery-plaque {
			background: rgba(255, 255, 255, 0.85);
			box-shadow: 0 10px 30px rgba(0,0,0,0.05);
		}

		.gallery-card {
			width: 100%;
			height: 100%;
			position: relative;
			overflow: hidden;
			box-shadow: 0 30px 60px rgba(0,0,0,0.3);
	
			/* Museum Matting (Frame border) */
			padding: 1.5rem; 
			background: var(--theme-frame-bg, #1a1a1a);
			border: 1px solid var(--theme-frame-border, rgba(255, 255, 255, 0.08));
			border-radius: 8px; /* Subtle modern rounding */
		}

		/* Light Mode Overrides for the Frame */
		html[data-theme="light"] .gallery-card { 
			box-shadow: 0 20px 40px rgba(0,0,0,0.08); 
			--theme-frame-bg: #ffffff; /* Crisp white frame matting */
			--theme-frame-border: rgba(0, 0, 0, 0.1);
		}

		/* Inner wrapper to keep the image edges sharp inside the frame */
		.gallery-img-wrapper {
			width: 100%;
			height: 100%;
			overflow: hidden;
			position: relative;
			border-radius: 20px; 
		}

		/* The image scales inside the wrapper */
		.gallery-img {
			width: 100%;
			height: 100%;
			background-size: cover;
			background-position: center;
			transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
		}

		.gallery-slide:hover .gallery-img {
			transform: scale(1.05); /* Subtle zoom on hover */
		}
		
		/* --- gallery section SUB-TEXT (Aligns with Rules 2.3, 2.4, 2.8) --- */
		.gal-sub-text {
			font-family: var(--font-body); /* Work Sans */
			font-size: 1.1rem;
			font-weight: 600 !important; 
			line-height: 0.7 !important; 
			max-width: 400px;
		}

		/* --- THE SERVICE BUTTON --- */
		.service-btn {
			display: inline-flex;
			align-items: center;
			gap: 12px;
			margin-top: 2rem;
			padding: 12px 28px;
			border: 1px solid var(--brand-orange);
			border-radius: 50px;
			color: var(--brand-orange);
			text-decoration: none;
			font-weight: 600;
			font-size: 0.85rem;
			letter-spacing: 1px;
			text-transform: uppercase;
			position: relative;
			overflow: hidden;
			z-index: 1;
			transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
			border-radius: 50px;
		}

		.service-btn i {
			transition: transform 0.4s ease;
		}

		.service-btn:hover i {
			transform: translateX(4px); /* Arrow shoots forward slightly */
		}

		/* --- HIGHLIGHT REEL: STICKY WALLET STACK --- */
		.works-stack-section {
			position: relative;
			z-index: 10;
		}

		.card-stack-container {
			position: relative;
			padding-bottom: 10vh; /* Gives room for the final card to scroll */
		}

		.stacked-card {
			position: sticky;
			/* The CSS variable --card-index staggers the sticky top position */
			top: calc(12vh + (var(--card-index) * 20px)); 
			height: 75vh;
			width: 100%;
			border-radius: 32px;
			overflow: hidden;
			margin-bottom: 15vh; /* Space between cards before they stack */
			box-shadow: 0 -15px 40px rgba(0, 0, 0, 0.5);
			border: 1px solid rgba(255, 255, 255, 0.1);
			transform-origin: top center;
			background: #111;
		}

		/* Ensure cards stack visually in the right order */
		.stacked-card:nth-child(1) { z-index: 1; }
		.stacked-card:nth-child(2) { z-index: 2; }
		.stacked-card:nth-child(3) { z-index: 3; }
		.stacked-card:nth-child(4) { z-index: 4; }

		.stacked-img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
		}

		.stacked-card:hover .stacked-img {
			transform: scale(1.05);
		}		

		.stacked-overlay {
			position: absolute;
			inset: 0;
			background: linear-gradient(180deg, rgba(10,10,10,0) 0%, rgba(10,10,10,0.4) 40%, rgba(10,10,10,0.95) 100%);
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			padding: 3rem;
		}

		.stacked-category {
			display: inline-block;
			padding: 8px 18px;
			background: var(--brand-orange, #ff5e00);
			color: white;
			font-size: 0.8rem;
			font-weight: 700;
			letter-spacing: 2px;
			text-transform: uppercase;
			border-radius: 50px;
			margin-bottom: 1rem;
			align-self: flex-start;
		}

		.stacked-title {
			font-family: var(--font-display);
			font-size: clamp(2.5rem, 5vw, 4.5rem); /* Responsive fluid typography */
			color: white;
			line-height: 1;
			margin-bottom: 1rem;
			text-transform: uppercase;
		}

		.stacked-desc {
			color: rgba(255, 255, 255, 0.8);
			font-size: 1.1rem;
			max-width: 600px;
			margin-bottom: 2rem;
			line-height: 1.6;
		}

		.stacked-footer {
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-top: 1px solid rgba(255,255,255,0.1);
			padding-top: 1.5rem;
		}

		.stacked-btn {
			color: white;
			text-decoration: none;
			font-size: 0.9rem;
			font-weight: 600;
			text-transform: uppercase;
			letter-spacing: 1px;
			display: inline-flex;
			align-items: center;
			gap: 10px;
			transition: color 0.3s ease;
		}

		.stacked-btn:hover {
			color: var(--brand-pink, #ff1493);
		}

		.stacked-btn i {
			background: white;
			color: black;
			width: 35px;
			height: 35px;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			border-radius: 50%;
			transition: transform 0.3s ease, background 0.3s ease;
		}

		.stacked-btn:hover i {
			transform: rotate(-45deg);
			background: var(--brand-pink, #ff1493);
			color: white;
		}

			@media (max-width: 768px) {
				.stacked-overlay { padding: 2rem; }
				.stacked-card { height: 60vh; }
			}
			

		/* --- VOICES OF IMPACT: COMPLETE SCROLL SNAP CAROUSEL --- */
		.testimonials-section {
			position: relative;
			overflow: hidden;
		}

		/* Ambient Background Glow */
		.testimonials-glow {
			position: absolute;
			top: 50%; left: 50%;
			transform: translate(-50%, -50%);
			width: 60vw; height: 60vh;
			background: radial-gradient(circle, rgba(255, 20, 147, 0.08) 0%, rgba(0, 0, 0, 0) 70%);
			z-index: 0;
			pointer-events: none;
		}

		/* The Carousel Wrapper & Buttons */
		.carousel-wrapper {
			position: relative;
			width: 100%;
			padding: 0 10px; 
		}

		.carousel-nav-btn {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			z-index: 10;
			background: rgba(20, 20, 20, 0.9);
			border: 1px solid rgba(255, 20, 147, 0.5); /* Brand pink border */
			color: white;
			width: 55px; height: 55px;
			border-radius: 50%;
			display: inline-flex;
			align-items: center; justify-content: center;
			cursor: pointer;
			transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
			backdrop-filter: blur(10px);
			box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
		}

		.carousel-nav-btn:hover {
			background: var(--brand-pink, #ff1493);
			border-color: var(--brand-pink, #ff1493);
			transform: translateY(-50%) scale(1.15);
			box-shadow: 0 15px 30px rgba(255, 20, 147, 0.3);
		}

		/* Pin to the far edges */
		.carousel-nav-btn.prev-btn { left: -15px; }
		.carousel-nav-btn.next-btn { right: -15px; }

		/* The Scrollable Track */
		.testimonial-track {
			display: flex;
			gap: 24px;
			overflow-x: auto;
			padding: 2rem 1rem 4rem 1rem; 
			scroll-snap-type: x mandatory;
			scroll-behavior: smooth;
			-webkit-overflow-scrolling: touch; /* Smooth iOS scrolling */
			scrollbar-width: none; 
			-ms-overflow-style: none;  
		}

		.testimonial-track::-webkit-scrollbar { display: none; }

		/* Individual Cards inside the track */
.testimonial-card {
    background: var(--card-bg) !important;
    border-radius: 24px;
    padding: 40px;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--card-border) !important;
    box-shadow: var(--card-shadow) !important; 
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    opacity: 0.5;
    transform: scale(0.85);
}

.testimonial-card .quote-icon-bg {
    position: absolute;
    top: -20px;
    right: 20px;
    font-size: 140px;
    font-family: var(--font-display, sans-serif);
    color: var(--card-watermark) !important;
    line-height: 1;
    z-index: 0;
    pointer-events: none;
}

.testimonial-card > * {
    position: relative;
    z-index: 1;
}

.testimonial-card .stars {
    color: var(--brand-yellow, #ffff00) !important;
    margin-bottom: 24px;
    font-size: 0.85rem;
    letter-spacing: 3px;
}

.testimonial-card .testimonial-text {
    font-size: 1.15rem;
    line-height: 1.6;
    margin-bottom: 30px;
    color: var(--card-text) !important;
}

.testimonial-card .testimonial-text strong {
    font-weight: 700;
    color: var(--card-text) !important;
    background: var(--card-highlight) !important;
    padding: 0 6px;
    border-radius: 4px;
}

.testimonial-card .client-info {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid var(--card-border) !important;
}

.testimonial-card .client-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--card-avatar-border) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.testimonial-card .client-info h6 {
    color: var(--card-text) !important;
    margin-bottom: 4px;
    font-size: 1rem;
    font-weight: 700;
}

.testimonial-card .client-info small {
    color: var(--card-text-muted) !important;
}


/* ==========================================================================
   3. RESPONSIVE BEHAVIOR, CENTER MATRIX & HOVER EFFECTS
   ========================================================================== */

/* Ensure desktop snapping works beautifully with the center detection */
@media (min-width: 768px) {
    .testimonial-card {
        flex: 0 0 380px;
        scroll-snap-align: center; 
    }
}

/* The active/centered card styling */
.testimonial-card.is-center {
    opacity: 1;
    transform: scale(1) translateY(-10px);
    box-shadow: var(--card-shadow-center) !important;
    border-color: var(--card-hover-border) !important;
}

/* Stagger animations so they bob up and down organically */
.testimonial-card:nth-child(even) { 
    animation-delay: -3s; 
}

/* Clean hover state */
.testimonial-card:hover {
    border-color: var(--card-hover-border) !important; 
    transform: translateY(-5px);
}

/* Nuclear fallback block to prevent slider scripts or generic theme overrides */
.testimonial-card,
html[data-theme="light"] .testimonial-card,
html[data-theme="dark"] .testimonial-card {
    background: var(--card-bg) !important;
}

		/* Typography & Layout inside the card */
		.quote-icon-bg {
			position: absolute;
			top: -10px; right: 20px;
			font-family: var(--font-display, sans-serif);
			font-size: 8rem; line-height: 1;
			color: rgba(255, 255, 255, 0.03);
			z-index: -1;
			transition: color 0.4s ease;
		}

		.testimonial-card:hover .quote-icon-bg { color: rgba(255, 20, 147, 0.08); }

		.testimonial-text {
			color: rgba(255, 255, 255, 0.7);
			font-size: 1.05rem; line-height: 1.7; margin-bottom: 2rem; flex-grow: 1;
		}

		.testimonial-text strong {
			color: white; font-weight: 600; border-bottom: 1px solid var(--brand-pink, #ff1493);
		}

		.client-info {
			display: flex; align-items: center; gap: 15px;
			border-top: 1px solid rgba(255, 255, 255, 0.05); padding-top: 1.5rem;
		}

		.client-avatar {
			width: 50px; height: 50px; border-radius: 50%; object-fit: cover;
			padding: 2px; background: linear-gradient(135deg, var(--brand-pink, #ff1493), var(--brand-orange, #ff5e00));
		}
		
		/* --- SUBTEXT SEPARATOR --- */
/* Desktop: Vertical line on the left */
.subtext-separator {
    border-left: 3px solid #ea3b60; /* Verafede Pink */
    padding-left: 1.5rem;
}

/* Mobile: Switches to a horizontal line on the top */
@media (max-width: 767.98px) {
    .subtext-separator {
        border-left: none;
        border-top: 3px solid #ea3b60;
        padding-left: 0;
        padding-top: 1.5rem;
        margin-top: 1rem;
    }
}

		/* --- INTERNSHIP CARD DECK SECTION --- */

		.internship-section {
			padding: 100px 0;
			overflow: hidden; /* Prevents horizontal scroll when cards fan out */
		}

		/* The Button Styling */
		.btn-apply-big {
			display: inline-flex;
			align-items: center;
			gap: 15px;
			padding: 1rem 2.5rem;
			background: linear-gradient(135deg, var(--brand-pink, #ff1493), var(--brand-orange, #ff5e00));
			color: white;
			font-weight: 600;
			font-size: 0.9rem;
			text-transform: uppercase;
			letter-spacing: 2px;
			border-radius: 50px;
			text-decoration: none;
			transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
			box-shadow: 0 10px 20px rgba(255, 20, 147, 0.2);
		}

		.btn-apply-big:hover {
			transform: translateY(-5px);
			box-shadow: 0 15px 30px rgba(255, 20, 147, 0.4);
			color: white;
		}
		
.flex-cards-container {
    display: flex;
    gap: 15px;
    height: 400px; /* Forces uniform height */
    width: 100%;
}

.flex-card {
    position: relative;
    flex: 1; /* Closed state */
    border-radius: 20px;
    background-size: cover;
    background-position: center;
    transition: flex 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    overflow: hidden;
    cursor: pointer;
    display: flex;
    align-items: flex-end;
}

/* Hover State: Panel expands rapidly */
.flex-card:hover, .flex-card.active {
    flex: 4; /* Expanded state */
}

.flex-card-content {
    padding: 30px;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    width: 100%;
    min-width: 250px; /* Keeps text from squishing when closed */
}

.flex-card .card-num {
    font-family: var(--font-display); /* Bakbak One */
    font-size: 2rem;
    color: #f68f1d; /* Primary Orange */
    opacity: 0.8;
}

/* Hide the text info when panel is closed */
.flex-card .card-info {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease;
    white-space: normal;
}

/* Reveal the text info when expanded */
.flex-card:hover .card-info, .flex-card.active .card-info {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.2s; /* Waits for the panel to open slightly before showing text */
}

.flex-card .card-head {
    font-family: var(--font-display); /* Bakbak One */
    font-size: 1.5rem;
    line-height: 1.1;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.flex-card .card-body-text {
    font-family: var(--font-body); /* Work Sans */
    font-size: 0.95rem;
    margin: 0;
    line-height: 1.4;
}

/* Mobile Fallback: Stack them vertically on phones */
@media (max-width: 991.98px) {
    .flex-cards-container {
        flex-direction: column;
        height: 600px; /* Taller on mobile to fit them vertically */
    }
}

/* ==========================================================
   2. SWIPE-FILL INTERACTIVE BUTTON
   ========================================================== */
.btn-swipe-fill {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 16px 40px;
    background: transparent;
    color: #022e47 !important; /* Verafede Navy */
    font-family: var(--font-body); /* Work Sans */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    border: 2px solid #ea3b60; /* Verafede Pink outline */
    border-radius: 100px;
    overflow: hidden;
    z-index: 1;
    transition: color 0.4s ease, border-color 0.4s ease;
}

/* Dark mode fallback for the text */
[data-theme="dark"] .btn-swipe-fill {
    color: white !important;
}

/* The hidden gradient background block */
.btn-swipe-fill::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0%; /* Starts at 0 width (invisible) */
    height: 100%;
    /* Rule 4: 65% Orange, 35% Pink Gradient */
    background: linear-gradient(to right, #f68f1d 0%, #f68f1d 65%, #ea3b60 100%);
    transition: width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: -1;
}

/* Hover Effect: Gradient sweeps across */
.btn-swipe-fill:hover {
    color: white !important;
    border-color: transparent; /* Hides the original border */
}

.btn-swipe-fill:hover::before {
    width: 100%; /* Sweeps the gradient to the right */
}

.btn-swipe-fill .btn-icon {
    transition: transform 0.4s ease;
}

.btn-swipe-fill:hover .btn-icon {
    transform: translateX(5px); /* Arrow nudges right */
}

		/* --- THE STACK CONTAINER --- */
		.stack-container {
			position: relative;
			width: 100%;
			max-width: 380px; 
			height: 500px; /* Fixed height so the absolute cards have a boundary */
			margin: 0 auto;
			/* Optional: helps cards look a bit more 3D as they rotate */
			perspective: 1000px; 
			cursor: pointer;
		}

		/* Base Card Styling */
		.stack-card {
			position: absolute;
			top: 0; left: 0;
			width: 100%; height: 100%;
			border-radius: 24px;
			overflow: hidden;
			background-color: #111;
			border: 1px solid rgba(255, 255, 255, 0.1);
			box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
			/* Ultra smooth bounce for the fan effect */
			transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.6s ease;
			transform-origin: bottom center; /* Makes them fan from the bottom like holding a hand of cards */
		}

		/* Background Image & Dark Overlay */
		.card-bg-layer {
			position: absolute;
			inset: 0;
			background-size: cover;
			background-position: center;
			z-index: 1;
		}

		.card-bg-layer::after {
			content: '';
			position: absolute;
			inset: 0;
			/* Gradient goes dark at the top for the title, and dark at the bottom for the text */
			background: linear-gradient(180deg, rgba(10,10,10,0.8) 0%, rgba(10,10,10,0.2) 40%, rgba(10,10,10,0.95) 100%);
		}

		/* Card Content Layout */
		.card-content-wrapper {
			position: relative;
			z-index: 2;
			padding: 2.5rem;
			height: 100%;
			display: flex;
			flex-direction: column;
		}

		.card-head {
			font-family: var(--font-display, sans-serif);
			font-size: 2rem;
			line-height: 1.1;
			color: white;
			letter-spacing: 1px;
		}

		.card-body-text {
			color: rgba(255, 255, 255, 0.8);
			font-size: 1.05rem;
			line-height: 1.6;
			margin-top: auto; /* Pushes the text to the bottom */
			margin-bottom: 1rem;
		}

		.card-num {
			font-family: var(--font-display, sans-serif);
			font-size: 4rem;
			line-height: 0.8;
			color: rgba(255, 255, 255, 0.1);
			align-self: flex-end;
		}

		/* --- THE STACK MECHANICS (Resting State) --- */
		/* Creating a messy, unorganized stack look */
		.card-1 { z-index: 3; transform: rotate(-3deg) translateY(0); }
		.card-2 { z-index: 2; transform: rotate(2deg) translateX(10px) translateY(5px); }
		.card-3 { z-index: 1; transform: rotate(6deg) translateX(20px) translateY(15px); }


		/* --- THE HOVER SPREAD (Fixed: Cards stay in their lanes!) --- */

			@media (min-width: 992px) {
				/* 1. Fan the deck out when the mouse enters the container */
				.stack-container:hover .card-1 {
				transform: translateX(-110px) rotate(-12deg) translateY(0px);
				box-shadow: -15px 15px 30px rgba(0, 0, 0, 0.5);
			}
			
			.stack-container:hover .card-2 {
				transform: translateX(0px) rotate(0deg) translateY(-20px);
				box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
			}
			.stack-container:hover .card-3 {
				transform: translateX(110px) rotate(12deg) translateY(0px);
				box-shadow: 15px 15px 30px rgba(0, 0, 0, 0.5);
			}

			/* 2. THE MAGIC: Pop up the specific card being hovered, keeping its X-axis position! */
			.stack-container:hover .card-1:hover {
				/* Notice translateX(-110px) matches the spread position above */
				transform: translateX(-110px) rotate(0deg) scale(1.08) translateY(-40px) !important;
				z-index: 10 !important;
				box-shadow: 0 30px 60px rgba(255, 20, 147, 0.3);
				border-color: var(--brand-pink, #ff1493);
			}
    
			.stack-container:hover .card-2:hover {
				transform: translateX(0px) rotate(0deg) scale(1.08) translateY(-50px) !important;
				z-index: 10 !important;
				box-shadow: 0 30px 60px rgba(255, 20, 147, 0.3);
				border-color: var(--brand-pink, #ff1493);
			}

			.stack-container:hover .card-3:hover {
				/* Notice translateX(110px) matches the spread position above */
				transform: translateX(110px) rotate(0deg) scale(1.08) translateY(-40px) !important;
				z-index: 10 !important;
				box-shadow: 0 30px 60px rgba(255, 20, 147, 0.3);
				border-color: var(--brand-pink, #ff1493);
			}
		}

        /* 1. TITLE STYLING */
.internship-title-tight {
    font-family: 'Bakbak One', sans-serif;
    line-height: 0.9 !important; /* As requested */
    letter-spacing: -0.001em;    /* Rule 2.7 */
    text-transform: uppercase;
}

/* 2. SUB-TEXT STYLING (Warning: 0.7 will cause text overlap) */
.subtext-ultra-tight {
    font-family: 'Work Sans', sans-serif;
    font-weight: 600 !important;   /* Rule 2.4/2.8 */
    line-height: 1 !important;   /* As requested */
    font-size: 1.1rem;
    max-width: 500px;
}

/* 3. NEW BUTTON DESIGN: "The Career Launcher" */
.btn-apply-branded {
    display: inline-flex;
    align-items: center;
    gap: 20px;
    padding: 10px 10px 10px 32px; /* Asymmetric padding for the icon circle */
    background: #022e47; /* Verafede Navy */
    color: white !important;
    text-decoration: none;
    border-radius: 100px;
    font-family: 'Work Sans', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    border: 1px solid rgba(255,255,255,0.1);
}

.btn-apply-branded .icon-circle {
    width: 45px;
    height: 45px;
    background: var(--vf-grad); /* Verafede Orange-Pink Gradient */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.4s ease;
}

.btn-apply-branded:hover {
    background: #033a5a;
    transform: translateX(5px);
    box-shadow: 0 10px 25px rgba(2, 46, 71, 0.3);
}

.btn-apply-branded:hover .icon-circle {
    transform: rotate(-45deg);
}

/* Dark Mode adjustment for the button */
[data-theme="dark"] .btn-apply-branded {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}
		
		/* --- BRAND LOGO THEME ADAPTATION --- */
		/* Set a uniform height so it fits cleanly in the navbar */
		.brand-logo {
			height: 70px; /* Adjust this value if you want the logo bigger or smaller */
			width: auto;
		object-fit: contain;
		}

		/* Default (Light Theme) Settings */
		.logo-light {
			display: block;
		}
		.logo-dark {
			display: none;
		}

		/* Dark Theme Settings */
		/* Targets the images when your JS adds data-theme="dark" to the html tag */
		html[data-theme="dark"] .logo-light {
			display: none;
		}
		html[data-theme="dark"] .logo-dark {
			display: block;
		}
		
		@media (max-width: 991px) {
		/* Allow native horizontal swiping on mobile */
			.horizontal-sticky-container {
				position: relative !important;
				height: auto !important;
			}
			.horizontal-track {
				display: flex;
				overflow-x: auto;
				scroll-snap-type: x mandatory;
				padding-bottom: 2rem;
				-webkit-overflow-scrolling: touch;
				gap: 20px;
			}
			.gallery-slide {
				scroll-snap-align: center;
				flex: 0 0 85vw; /* Make cards fit mobile screen width */
				margin-right: 0 !important;
			}
		}

		.testimonial-card.is-center {
			opacity: 1;
			transform: scale(1);
			box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
			border-color: rgba(255, 20, 147, 0.3);
		}

/* ==========================================================
   1. STATIC DETAIL CARDS (Left Side)
   ========================================================== */
.static-detail-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    background-color: #022e47; /* Fallback color */
    flex: 1; /* Ensures all 3 cards stretch to fill the column equally */
    display: flex;
    align-items: center;
    min-height: 140px; /* Base height for horizontal layout */
}

/* Image background locked at 30% opacity so text is readable */
.static-detail-card .card-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0.25; 
    z-index: 1;
}

.static-card-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 30px;
    padding: 25px 30px;
    width: 100%;
    color: white;
}

.card-num-large {
    font-family: var(--font-display); /* Bakbak One */
    font-size: 3.5rem;
    color: #f68f1d; /* Verafede Orange */
    line-height: 1;
}

.card-text-block {
    flex: 1;
}

.card-title-tight {
    font-family: var(--font-display);
    font-size: 1.4rem;
    text-transform: uppercase;
    margin-bottom: 5px;
    line-height: 1.1;
    letter-spacing: 1px;
}

.card-desc-clean {
    font-family: var(--font-body); /* Work Sans */
    font-size: 0.95rem;
    line-height: 1.4;
    margin: 0;
    opacity: 0.9;
}

/* ==========================================================
   1. FADED IMAGE FEATURE CARDS (Left Side)
   ========================================================== */
.faded-image-card {
    background-color: white; /* Light mode default */
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05); /* Soft aesthetic shadow */
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

/* Dark Mode Adaptation */
[data-theme="dark"] .faded-image-card {
    background-color: #041f2e; /* Slightly lighter navy than main background */
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

/* The Image Wrapper with the Aesthetic Fade Mask */
.image-wrapper-faded {
    position: relative;
    width: 100%;
    height: 180px; /* Static height for consistency */
    overflow: hidden;
    
    /* THE MAGIC FADE (Adjust the % to control the spread) */
    -webkit-mask-image: linear-gradient(to top, transparent 0%, black 60%);
    mask-image: linear-gradient(to top, transparent 0%, black 60%);
}

.image-wrapper-faded img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

/* Optional: Slight image zoom on card hover to feel alive */
.faded-image-card:hover .image-wrapper-faded img {
    transform: scale(1.05);
}

.card-content-faded {
    padding: 25px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.card-num-aesthetic {
    font-family: var(--font-display);
    font-size: 2.2rem;
    color: #f68f1d;
    line-height: 1;
    margin-bottom: 10px;
    opacity: 0.8;
}

.card-title-faded {
    font-family: var(--font-display);
    font-size: 1.15rem;
    text-transform: uppercase;
    color: #022e47; /* Verafede Navy (light mode) */
    margin-bottom: 8px;
    line-height: 1.1;
    letter-spacing: 1px;
}

[data-theme="dark"] .card-title-faded {
    color: white;
}

.card-desc-faded {
    font-family: var(--font-body);
    font-size: 0.9rem;
    line-height: 1.4;
    color: #4a5a6b; /* Muted text */
    margin: 0;
    font-weight: 500;
}

[data-theme="dark"] .card-desc-faded {
    color: rgba(255,255,255,0.7);
}

/* ==========================================================
   REQUIREMENT PILL (Card 03)
   ========================================================== */
.aesthetic-pill {
    background-color: rgba(246, 143, 29, 0.1); /* Soft orange background */
    color: #f68f1d; /* Verafede Orange text */
    border: 1px solid rgba(246, 143, 29, 0.3);
    padding: 6px 12px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
}

/* Dark mode adaptation (Optional, if you want it to pop more on dark backgrounds) */
[data-theme="dark"] .aesthetic-pill {
    background-color: rgba(246, 143, 29, 0.15);
    border-color: rgba(246, 143, 29, 0.4);
}

/* ==========================================================
   THE AESTHETIC SUPER BUTTON (Right Side UI)
   ========================================================== */
.super-button-card {
    background: #021a29; /* Very deep, rich navy */
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    text-decoration: none;
    overflow: hidden; /* Keeps the glow inside */
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.4s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

/* 1. The Ambient Glow Effect */
.aesthetic-glow-orb {
    position: absolute;
    bottom: -50px;
    right: -50px;
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(234, 59, 96, 0.25) 0%, rgba(2, 26, 41, 0) 70%);
    border-radius: 50%;
    z-index: 1;
    transition: all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 2. Top UI: Micro Label & Pulse */
.micro-label {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
}

.pulse-dot {
    width: 8px;
    height: 8px;
    background-color: #f68f1d; /* Orange indicator */
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(246, 143, 29, 0.7);
    animation: pulse-orange 2s infinite;
}

@keyframes pulse-orange {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(246, 143, 29, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(246, 143, 29, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(246, 143, 29, 0); }
}

/* 3. Middle UI: Typography Art */
.aesthetic-headline {
    font-family: var(--font-display);
    font-size: 4rem;
    line-height: 0.9;
    color: white;
    letter-spacing: -1px;
}

/* The Hollow Text Effect */
.text-outline-hover {
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.8);
    transition: all 0.4s ease;
}

.aesthetic-subtext {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.5;
    max-width: 90%;
}

/* 4. Bottom UI: Sleek Action Bar */
.action-text-bold {
    font-family: var(--font-body);
    font-size: 1.1rem;
    font-weight: 700;
    color: white;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: color 0.3s ease;
}

.aesthetic-arrow-box {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
    backdrop-filter: blur(5px); /* Glassmorphism touch */
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

/* ==========================================================
   THE HOVER INTERACTIONS (Brings it to life)
   ========================================================== */
.super-button-card:hover {
    transform: translateY(-8px);
    border-color: rgba(234, 59, 96, 0.3); /* Soft pink border */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 30px rgba(234, 59, 96, 0.1);
}

/* Orb swells and brightens */
.super-button-card:hover .aesthetic-glow-orb {
    transform: scale(1.5);
    background: radial-gradient(circle, rgba(234, 59, 96, 0.4) 0%, rgba(2, 26, 41, 0) 70%);
}

/* Hollow text fills with gradient */
.super-button-card:hover .text-outline-hover {
    color: #ea3b60; /* Fills in Pink */
    -webkit-text-stroke: 1.5px #ea3b60;
}

/* Arrow box highlights and shoots forward */
.super-button-card:hover .aesthetic-arrow-box {
    background: white;
    color: #ea3b60;
    transform: rotate(-45deg) scale(1.1);
    border-color: white;
}

/* Mobile Adjustments */
@media (max-width: 1199.98px) {
    .aesthetic-headline { font-size: 3.2rem; }
}
@media (max-width: 991.98px) {
    .super-button-card { min-height: 400px; padding: 40px !important; }
}

/* ==========================================================
   FADED IMAGE BACKGROUND FOR SUPER BUTTON
   ========================================================== */
.button-bg-faded {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    /* Fades the image out as it goes down, blending into the dark navy */
    -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 85%);
    mask-image: linear-gradient(to bottom, black 0%, transparent 85%);
    opacity: 0.35; /* Keeps the background dark enough for text readability */
    transition: opacity 0.5s ease;
    pointer-events: none; /* Prevents the image from interfering with clicks */
}

.button-bg-faded img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Enhancing the hover state to make the image react */
.super-button-card:hover .button-bg-faded {
    opacity: 0.6; /* Image brightens slightly on hover */
}

.super-button-card:hover .button-bg-faded img {
    transform: scale(1.08); /* Slow, premium zoom effect */
}

/* ==========================================================
   MOBILE RESPONSIVENESS (Phones & Tablets)
   ========================================================== */

/* Tablet & Smaller Laptops */
@media (max-width: 1199.98px) {
    .aesthetic-headline { font-size: 3.2rem; }
}

@media (max-width: 991.98px) {
    /* Super Button drops below the 3 feature cards */
    .super-button-card { 
        min-height: 400px; 
        padding: 40px !important; 
    }
}

/* Mobile Phones */
@media (max-width: 767.98px) {
    /* 1. Scale down the massive headers so words don't break */
    .display-3.headline-spicy { font-size: 2.8rem !important; }
    .aesthetic-headline { font-size: 2.5rem; line-height: 1; }
    
    /* 2. Adjust the 3 Faded Image Cards so they don't take up too much vertical space */
    .image-wrapper-faded { 
        height: 140px; /* Shorter image height on mobile */
    }
    .card-content-faded { 
        padding: 20px 15px; /* Tighter padding */
    }
    .card-num-aesthetic { 
        font-size: 1.8rem; 
    }
    .card-title-faded { 
        font-size: 1.1rem; 
    }
    
    /* 3. Optimize the Super Button Card for thumbs */
    .super-button-card { 
        padding: 30px 20px !important; 
        min-height: 350px; 
    }
    .aesthetic-glow-orb {
        width: 150px; /* Smaller ambient glow so it doesn't overwhelm the small card */
        height: 150px;
    }
    
    /* 4. Scale down the action button at the bottom */
    .action-text-bold { 
        font-size: 1rem; 
    }
    .aesthetic-arrow-box { 
        width: 45px; 
        height: 45px; 
        font-size: 1rem; 
    }
}

/* Extra Small Phones */
@media (max-width: 575.98px) {
    .display-3.headline-spicy { font-size: 2.3rem !important; }
    .aesthetic-headline { font-size: 2.2rem; }
}

.landscape-hero-wrapper {
    width: 100%;
    height: auto; /* Let the container grow to fit the whole image */
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1); 
}

.landscape-hero-wrapper img {
    width: 100%; /* Stretches from left to right margin */
    height: auto; /* Scales the height proportionally so nothing is cut off */
    display: block; /* Removes the tiny white gap browsers sometimes add under images */
}

/* Dark mode adaptation for the shadow */
[data-theme="dark"] .landscape-hero-wrapper {
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
}

/* Mobile Responsiveness for the Image */
@media (max-width: 991.98px) {
    .landscape-hero-wrapper {
        height: 300px;
    }
}

@media (max-width: 767.98px) {
    .landscape-hero-wrapper {
        height: 220px; /* Shorter on phones so they get to the text faster */
    }
}
		
		/* --- BRAND LOGO THEME ADAPTATION --- */
		/* Set a uniform height so it fits cleanly in the navbar */
		.brand-logo {
			height: 70px; /* Adjust this value if you want the logo bigger or smaller */
			width: auto;
		object-fit: contain;
		}

		/* Default (Light Theme) Settings */
		.logo-light {
			display: block;
		}
		.logo-dark {
			display: none;
		}

		/* Dark Theme Settings */
		/* Targets the images when your JS adds data-theme="dark" to the html tag */
		html[data-theme="dark"] .logo-light {
			display: none;
		}
		html[data-theme="dark"] .logo-dark {
			display: block;
		}
		
		/* --- GLOBAL SECTION SUBTITLE RULE --- */
		.hero-lead,
		.partners-title-wrapper p,
		.gallery-title-slide p,
		.testimonials-section > .container > div:first-child p,
		.internship-section .subtitle-text {
			font-weight: 600 !important;
			letter-spacing: 0.05em !important;
			font-size: 1.1rem !important; /* Unifies the text size */
			line-height: 1.4 !important;  /* Gives it that premium breathing room */
		}
		
		/* --- ADAPTIVE MOBILE LAYOUT --- */
		@media (max-width: 991.98px) {
		/* Reveal hidden elements immediately */
			.partners-title-wrapper,
				[style*="opacity: 0"] {
				opacity: 1 !important;
				transform: none !important;
			}
			
			/* 1. Horizontal Scroll Section Reset */
			.horizontal-sticky-container {
				height: auto !important;
				position: relative !important;
			}
			
			.horizontal-track {
				display: flex;
				flex-direction: column;
				width: 100% !important;
				transform: none !important;
				gap: 2rem;
			}
			
			.gallery-title-slide, 
			.gallery-slide {
				width: 100% !important;
				margin-right: 0 !important;
				padding-right: 0 !important;
			}

			/* 2. Highlight Reel Stack Reset */
			.card-stack-container {
				height: auto !important;
				display: flex;
				flex-direction: column;
				gap: 2rem;
			}
			
			.stacked-card {
				position: relative !important;
				top: auto !important;
				transform: none !important;
				opacity: 1 !important;
				margin-bottom: 0 !important;
			}

			/* 3. Internship Card Stack Reset */
			.internship-section .stack-container {
				height: auto !important;
				display: flex;
				flex-direction: column;
				gap: 1.5rem;
				margin-top: 2.5rem;
			}
			
			.internship-section .stack-card {
				position: relative !important;
				top: auto !important;
				transform: none !important;
				opacity: 1 !important;
			}
		}
		
		/* --- MOBILE GALLERY CARD FIX --- */
		@media (max-width: 991.98px) {
		.gallery-slide {
			display: flex !important;
			flex-direction: column !important;
			align-items: center !important;
		}
    
		.gallery-card {
			width: 100% !important;
			position: relative !important;
			z-index: 1 !important;
		}
    
		.gallery-plaque {
			position: relative !important;
			width: 90% !important; /* Keeps it slightly inset for a premium card look */
			margin-top: -40px !important; /* Pulls the description up to overlap the image */
			z-index: 2 !important; /* Ensures it sits on top of the image */
			left: auto !important;
			right: auto !important;
			bottom: auto !important;
			transform: none !important;
			padding: 2rem !important;
		}
	}
		/* --- ADAPTIVE MOBILE LAYOUT --- */
		@media (max-width: 991.98px) {
		/* Reveal hidden elements immediately */
		.partners-title-wrapper,
		[style*="opacity: 0"] {
			opacity: 1 !important;
			transform: none !important;
		}
	
		/* 1. Horizontal Scroll Section Reset */
		.horizontal-sticky-container {
			height: auto !important;
			position: relative !important;
		}
		.horizontal-track {
			display: flex;
			flex-direction: column;
			width: 100% !important;
			transform: none !important;
			gap: 2rem;
		}
		.gallery-title-slide, 
		.gallery-slide {
			width: 100% !important;
			margin-right: 0 !important;
			padding-right: 0 !important;
		}

		/* 2. Highlight Reel Stack Reset */
		.card-stack-container {
			height: auto !important;
			display: flex;
			flex-direction: column;
			gap: 2rem;
		}
		.stacked-card {
			position: relative !important;
			top: auto !important;
			transform: none !important;
			opacity: 1 !important;
			margin-bottom: 0 !important;
		}

		/* 3. Internship Card Stack Reset */
		.internship-section .stack-container {
			height: auto !important;
			display: flex;
			flex-direction: column;
			gap: 1.5rem;
			margin-top: 2.5rem;
		}
		.internship-section .stack-card {
			position: relative !important;
			top: auto !important;
			transform: none !important;
			opacity: 1 !important;
		}
	}
		@media (max-width: 991.98px) {
		.carousel-wrapper {
			display: block !important;
			height: auto !important;
			overflow: hidden !important;
		}
    
		.testimonial-track {
			display: block !important;
			width: 100% !important;
			transform: none !important; /* Stops the JS from sliding it */
		}
    
		.testimonial-card {
			display: block !important;
			width: 100% !important;
			margin-bottom: 1.5rem !important; /* Adds space between the stacked cards */
			opacity: 1 !important; /* Forces them to show */
			position: relative !important;
			left: 0 !important;
			transform: none !important;
			box-sizing: border-box !important;
		}
	}

		/* --- MOBILE FULL-WIDTH BUTTON FIX --- */
		@media (max-width: 991.98px) {
		/* Targets main section buttons and forces them to stretch edge-to-edge */
		a[class*="btn"]:not(.stack-card a):not(.stacked-card a):not(.gallery-slide a):not(.testimonial-card a) {
			display: flex !important;
			width: 100% !important;
			justify-content: center !important;
			align-items: center !important;
			white-space: nowrap !important;
			box-sizing: border-box !important;
			margin-left: 0 !important;
			margin-right: 0 !important;
		}
	}
		/* --- MOBILE HERO SECTION CLEANUP --- */
		@media (max-width: 991.98px) {
		/* 1. Center the entire text block for a balanced look */
		.hero-section .col-lg-7 {
			text-align: center !important;
			padding-top: 2rem !important;
		}

		/* 2. Center the top badges */
		.hero-section .mb-4.d-flex {
			justify-content: center !important;
		}

		/* 3. Make the title responsive and remove manual line breaks */
		.hero-title {
			font-size: clamp(2.5rem, 8vw, 3.5rem) !important;
			line-height: 1.1 !important;
		}
		.hero-title br {
			display: none !important; /* Lets the text wrap naturally on phones */
		}

		/* 4. Center the lead paragraph */
		.hero-lead {
			margin-left: auto !important;
			margin-right: auto !important;
		}

		/* 5. Stack the buttons vertically and make them full width */
		.hero-section .d-flex.flex-wrap.gap-3 {
			flex-direction: column !important;
			width: 100% !important;
			gap: 1rem !important;
		}
		.hero-section .d-flex.flex-wrap.gap-3 a {
			width: 100% !important; /* Forces edge-to-edge buttons */
			margin: 0 !important;
		}

		/* 6. Contain the image and floating cards so they don't cause horizontal scrolling */
		.hero-image-wrapper {
			max-width: 100vw !important;
			margin-top: 1rem !important;
			transform: scale(0.9) !important; /* Scales the blob down slightly */
		}
    
		.floating-card {
			transform: scale(0.85) !important; /* Shrinks the glass cards so they fit */
		}
		.card-top-right {
			top: -10px !important;
			right: 0 !important;
		}
		.card-bottom-left {
			bottom: -10px !important;
			left: 0 !important;
		}
	}

		/* --- MOBILE HIGHLIGHT REEL CLEANUP --- */
		@media (max-width: 991.98px) {
			/* 1. Center the Header & Badge */
			.works-stack-section .row.mb-5 {
				text-align: center !important;
				display: flex;
				flex-direction: column;
			}
			.works-stack-section .badge {
				margin-left: auto;
				margin-right: auto;
				display: inline-flex;
			}

			/* 2. Fix the Title (Remove awkward breaks) */
			.headline-spicy {
				font-size: clamp(2.5rem, 8vw, 3rem) !important;
				line-height: 1.1 !important;
			}
			.headline-spicy br {
				display: none !important; /* Lets text flow naturally */
			}

			/* 3. Make the Header Button Full-Width */
			.works-stack-section .col-lg-4 {
				margin-top: 1.5rem !important;
				text-align: center !important;
				width: 100% !important;
			}
			.works-stack-section .btn-pulse {
				width: 100% !important;
				display: flex !important;
				justify-content: center !important;
				box-sizing: border-box !important;
			}

			/* 4. Clean up Card Containers & Overlay Padding */
			.stacked-card {
				border-radius: 16px !important;
				overflow: hidden !important;
				min-height: 420px !important; /* Ensures enough room for the text so it doesn't overlap the top */
			}
			.stacked-overlay {
				padding: 1.5rem !important; /* Gives the text inside premium breathing room */
				display: flex !important;
				flex-direction: column !important;
				justify-content: flex-end !important; /* Pushes content neatly to the bottom */
			}

			/* 5. Standardize Card 4's massive inline styles to match the rest */
			.stacked-card .stacked-title {
				font-size: 1.75rem !important; 
				line-height: 1.2 !important;
				margin-bottom: 0.5rem !important;
			}
			.stacked-card .stacked-title br {
				display: none !important;
			}
			.stacked-card .stacked-desc {
				font-size: 1rem !important; 
				line-height: 1.5 !important;
				margin-bottom: 0 !important;
			}
    
			/* 6. Fix Card Buttons and the oversized 4th card icon */
			.stacked-card .stacked-footer {
				margin-top: 1.5rem !important;
				align-items: center !important;
			}
			.stacked-card .stacked-btn {
				font-size: 1rem !important; 
			}
			.stacked-card .stacked-btn i {
			width: auto !important;
				height: auto !important;
				background: transparent !important;
				font-size: 1rem !important;
				padding: 0 !important;
				margin-left: 0.5rem !important;
			}
		}
		
		/* --- MOBILE INTERNSHIP SECTION CLEANUP --- */
		@media (max-width: 991.98px) {
			/* 1. Center the Header Content */
			.internship-section .col-lg-6 {
				text-align: center !important;
				margin-bottom: 3rem !important; /* Adds breathing room before the cards */
			}

			/* 2. Standardize Title Size to match Highlight Reel exactly */
			.internship-section .headline-spicy {
				font-size: clamp(2.5rem, 8vw, 3rem) !important;
				line-height: 1.1 !important;
			}
			.internship-section .headline-spicy br {
				display: none !important; /* Allows natural wrapping */
			}

		/* 3. Center the Subtitle */
			.internship-section .subtitle-text {
				margin-left: auto !important;
				margin-right: auto !important;
			}

			/* 4. Make the Apply Button Full-Width */
			.internship-section .btn-apply-big {
				margin-top: 1rem !important;
			}

			/* 5. Unstack the cards safely into a native vertical column */
			.internship-section .stack-container {
				height: auto !important;
				display: flex !important;
				flex-direction: column !important;
				gap: 1.5rem !important;
			}
			.internship-section .stack-card {
				position: relative !important;
				width: 100% !important;
				transform: none !important;
				opacity: 1 !important;
				height: auto !important;
				min-height: 250px !important;
				border-radius: 16px !important;
				overflow: hidden !important;
			}

			/* 6. Force mobile cards to always show details (Bypass hover) */
			.internship-section .card-content-wrapper {
				padding: 1.5rem !important;
			}
			.internship-section .card-body-text {
				opacity: 1 !important; /* Makes description instantly visible */
				transform: none !important;
				display: block !important;
				margin-top: 1rem !important;
				font-size: 0.95rem !important;
			}
			.internship-section .card-num {
				position: relative !important;
				margin-top: 1rem !important;
			}
		}

/* --- BRAND PARTNERS WRAPPER --- */
.brand-partners-wrapper {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    position: relative;
    padding: 0; 
    margin: 40px 0; 
}

/* --- SEPARATOR STYLING --- */
.brand-separator {
    width: 100%;
    display: block;
    height: auto;
    object-fit: cover;
    position: relative;
    z-index: 5;
    margin: -1px 0; /* Prevents tiny transparent gaps between images and backgrounds */
}


/* --- MARQUEE CONTAINER & TRACK --- */
.logo-marquee-container {
    width: 100%;
    position: relative;
    padding: 20px 0; 
    mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}

.logo-marquee-track {
    display: flex;
    align-items: center;
    width: max-content; 
    animation: marqueeSlide 60s linear infinite; 
}

.logo-marquee-track:hover {
    animation-play-state: paused;
}

/* =========================================
   INDIVIDUAL LOGOS (BULLETPROOF THEME ADAPTIVE)
   ========================================= */

.marquee-item {
    padding: 0 70px; 
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* --- LIGHT MODE (DEFAULT) - STRICTLY BLACK --- */
.marquee-item .brand-logo {
    height: 200px; 
    width: auto;
    object-fit: contain;
    /* !important forces the logo to be pure black, ignoring old CSS */
    filter: brightness(0) !important; 
    opacity: 1;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.marquee-item:hover .brand-logo {
    opacity: 1; 
    transform: scale(1.15); 
    /* Keeps it black but adds the orange glow */
    filter: brightness(0) drop-shadow(0px 0px 20px rgba(255, 107, 0, 0.9)) !important; 
}


/* --- DARK MODE OVERRIDES - STRICTLY WHITE --- */
/* (Added Bootstrap's data-bs-theme just in case you are using it) */
.dark-mode .marquee-item .brand-logo,
[data-theme="dark"] .marquee-item .brand-logo,
[data-bs-theme="dark"] .marquee-item .brand-logo {
    /* !important forces the logo to be pure white */
    filter: brightness(0) invert(1) !important; 
    opacity: 1;
}

.dark-mode .marquee-item:hover .brand-logo,
[data-theme="dark"] .marquee-item:hover .brand-logo,
[data-bs-theme="dark"] .marquee-item:hover .brand-logo {
    opacity: 1;
    transform: scale(1.15);
    /* White logo with orange glow */
    filter: brightness(0) invert(1) drop-shadow(0px 0px 30px rgba(255, 107, 0, 0.9)) !important; 
}

/* Hover Effect: Orange Glow and Scale */
.marquee-item:hover .brand-logo {
    opacity: 1; 
    transform: scale(1.30); 
    /* Keeps the logo white but adds a vibrant orange neon shadow */
    filter: brightness(0) invert(1) drop-shadow(0px 0px 30px rgba(255, 107, 0, 0.9)) drop-shadow(0px 0px 10px rgba(255, 165, 0, 0.6)); 
}

/* --- ANIMATION LOOP --- */
@keyframes marqueeSlide {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* --- MOBILE ADJUSTMENTS --- */
@media (max-width: 768px) {
    .brand-content-bg {
        padding: 50px 0 30px 0;
    }
    .marquee-item {
        padding: 0 40px;
    }
    .marquee-item .brand-logo {
        height: 110px; /* Adjusted for mobile view */
    }
}

/* Hide cloned carousel items on mobile layouts */
@media (max-width: 767px) {
    .is-clone {
        display: none !important;
    }
}

/* Container adjustments to accommodate a tall phone on the right */
.hero-image-wrapper {
    position: relative;
    max-width: 320px; /* keeps phone centered on col-lg-5 */
    margin: 0 auto;
}

/* The Phone Mockup Structure */
.vf-phone-mockup {
    width: 100%;
    position: relative;
    z-index: 1;
}

.phone-bezel {
    position: relative;
    width: 100%;
    padding-top: 177.77%; /* Strict 9:16 aspect ratio (standard smartphone) */
    background: #111; /* Dark frame color */
    border-radius: 36px;
    box-shadow: 
        0 0 0 3px #333, /* Inner metal ring */
        0 15px 50px rgba(0,0,0,0.5); /* Outer shadow for depth */
    overflow: hidden;
    border: 8px solid #111; /* The main black bezel thickness */
}

/* Creating the Screen Container within the bezel */
.phone-screen {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 28px;
    background: #000;
    overflow: hidden;
}

/* The Instagram Iframe styling to fill the screen completely */
.ig-video-embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    border: 0;
    object-fit: cover; /* ensures video fills space without distortion */
}

/* Repositioning your floating cards to fit the taller phone profile */
.card-top-right {
    top: 10% !important; /* adjusted down slightly to meet the phone bezel */
    right: -20% !important; /* pushed out for dramatic overlap */
}

.card-bottom-left {
    bottom: 15% !important; /* adjusted up to meet the frame */
    left: -20% !important; /* pushed out for depth */
}

/* Verafede 10th anniversary asset handling (if kept) */
.verafede-10th {
    z-index: 0; /* place behind the phone */
}

.iphone-frame {
  position: relative;
  display: inline-block;   /* wrap to video size */
  border: 10px solid #000; /* bezel */
  border-radius: 60px;
  background: #000;
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(0,0,0,0.3);
  transform: scale(1.2);   /* increase size by 20% */
  transform-origin: center; /* scale from center */
}


/* Optional: speaker slit detail */
.iphone-frame::before {
  content: "";
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 8px;
  background: #222;
  border-radius: 4px;
}

/* Reuse the CSS classes from the About Us section if they aren't in a global stylesheet yet */
    .fade-left-to-right {
        -webkit-mask-image: linear-gradient(to right, transparent 0%, black 40%);
        mask-image: linear-gradient(to right, transparent 0%, black 40%);
    }

    .hero-img-cover {
        object-fit: cover; 
        width: 100%;
        height: 100%;
    }

    @media (min-width: 992px) {
        .hero-right-bleed {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            width: 50vw; /* Takes up exactly half the screen width */
            z-index: 1;
        }
    }


	/* --- OBB INTRO OVERLAY STYLES --- */
.hero-obb-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #022E47; /* Fallback to Brand Navy to keep layout dark during load */
    z-index: 99; /* Higher priority layer to block text contents safely */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), 
                visibility 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.obb-video-element {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures video stays full-screen without cropping abnormalities */
}

/* Faded video state triggered by Javascript */
.hero-obb-overlay.fade-out {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* --- TEXT REVEAL POP-UP TIMING --- */
.hero-reveal-container {
    opacity: 0;
    transform: translateY(40px); /* Pushes content downwards initially */
    transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Active state triggered by Javascript */
.hero-reveal-container.is-visible {
    opacity: 1;
    transform: translateY(0); /* Moves content smoothly into view position */
}

/* --- GEOMETRIC CARD BACKGROUNDS --- */

/* Base settings for all patterns */
.geo-pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Subtle zoom effect on hover for interactivity */
.premium-overlay-card:hover .geo-pattern {
    transform: scale(1.08);
}

/* Ensure the overlay sits between the pattern and the text */
.premium-overlay {
    z-index: 2;
    background: linear-gradient(to top, rgba(2, 46, 71, 0.9) 0%, rgba(2, 46, 71, 0.2) 100%);
}


/* CARD 1: Dynamic Angles (Represents flexibility/tailoring) */
.geo-pattern-1 {
    background-color: var(--brand-navy);
    background-image: 
        linear-gradient(45deg, rgba(246, 143, 29, 0.05) 25%, transparent 25%, transparent 75%, rgba(246, 143, 29, 0.05) 75%, rgba(246, 143, 29, 0.05)),
        linear-gradient(-45deg, rgba(246, 143, 29, 0.05) 25%, transparent 25%, transparent 75%, rgba(246, 143, 29, 0.05) 75%, rgba(246, 143, 29, 0.05));
    background-size: 60px 60px;
}

.geo-pattern-1::before {
    content: "";
    position: absolute;
    top: 0; right: 0; width: 100%; height: 100%;
    background: linear-gradient(135deg, rgba(246, 143, 29, 0.25) 0%, transparent 60%);
    clip-path: polygon(100% 0, 0 0, 100% 100%);
}


/* CARD 2: Structural Grid (Represents career foundation) */
.geo-pattern-2 {
    background-color: var(--brand-navy);
    background-image: 
        linear-gradient(rgba(250, 248, 241, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(250, 248, 241, 0.08) 1px, transparent 1px);
    background-size: 30px 30px;
    background-position: center center;
}

.geo-pattern-2::after {
    content: "";
    position: absolute;
    bottom: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to top, rgba(234, 59, 96, 0.25), transparent);
}


/* CARD 3: Interconnected Nodes (Represents mentorship/networking) */
.geo-pattern-3 {
    background-color: var(--brand-navy);
    background-image: radial-gradient(rgba(234, 59, 96, 0.25) 2px, transparent 2px);
    background-size: 24px 24px;
}

.geo-pattern-3::before {
    content: "";
    position: absolute;
    top: -20%; left: -20%; width: 140%; height: 140%;
    background: radial-gradient(circle at 80% 20%, rgba(246, 143, 29, 0.3) 0%, transparent 50%);
}