/* --- 1. THEME VARIABLES --- */
        :root {
            /* Brand Identity Colors */
            --brand-navy: #022e47;
            --brand-cream: #FAF8F1;
            --brand-orange: #f68f1d;
            --brand-pink: #ea3b60;
            
            /* Default LIGHT Theme Mapping */
            --bg-body: var(--brand-cream);
            --text-main: var(--brand-navy);
            --text-muted: rgba(2, 46, 71, 0.7);
            --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', sans-serif;
        }

        /* DARK THEME OVERRIDES */
        [data-theme="dark"] {
            --bg-body: #011a2a; 
            --text-main: #e6e6e6;
            --text-muted: rgba(255, 255, 255, 0.7);
            --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;
        }

        h1, h2, h3, h4, h5, h6 {
            font-family: var(--font-display);
            text-transform: uppercase;
            font-weight: 600;
        }

        .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); }
        }

        /* BRAND LOGO THEME ADAPTATION */
        .brand-logo { height: 70px; width: auto; object-fit: contain; }
        .logo-light { display: block; }
        .logo-dark { display: none; }
        html[data-theme="dark"] .logo-light { display: none; }
        html[data-theme="dark"] .logo-dark { display: block; }

        /* --- VIEWPORT MANAGEMENT --- */
.agency-focus {
    box-sizing: border-box;
}

/* Force absolute hero background to strictly scale with the 100vh section window */
.hero-right-bleed {
    position: absolute;
    top: 0;
    right: 0;
    width: 50vw;
    height: 100vh;
    overflow: hidden;
    z-index: 1;
}

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

/* --- THE DIGITAL THREAD (Interactive Timeline) --- */
.genz-thread-wrapper {
    position: relative;
    padding-left: 3.5rem; /* Forces strict left alignment for all content */
}

/* The Glowing Track */
.thread-line {
    position: absolute;
    left: 15px; /* Centers the line under the nodes */
    top: 10px;
    bottom: 45px; /* Ends cleanly at the baseline of the final node icon */
    width: 2px;
    background: linear-gradient(180deg, var(--brand-orange) 0%, var(--brand-pink) 50%, transparent 100%);
    opacity: 0.4;
    border-radius: 2px;
}

/* Individual Content Blocks - Height Optimized */
.thread-block {
    position: relative;
    padding-bottom: 1.5rem; /* Reduced from 2.5rem to guarantee screen fit */
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.thread-block:last-child {
    padding-bottom: 0;
}

.thread-block:hover {
    transform: translateX(8px); /* Satisfying nudge right on hover */
}

/* The Icons / Nodes on the line */
.thread-node {
    position: absolute;
    left: -3.5rem; /* Pulls node perfectly over the thread line */
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    z-index: 2;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.fs-7 { font-size: 0.8rem; }

.bg-orange-glow { background: var(--brand-orange); }
.bg-pink-glow { background: var(--brand-pink); }
.bg-navy-glow { background: var(--brand-navy); }

.thread-block:hover .thread-node {
    transform: scale(1.15);
    box-shadow: 0 0 15px currentColor;
}

/* Typography inside the thread */
.thread-title {
    font-family: var(--font-body);
    font-weight: 800;
    font-size: 30px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-main);
    margin-bottom: 0.25rem;
}

.thread-desc {
    font-size: 19px;
    line-height: 1;
    font-weight: 535;
    color: var(--text-muted);
    padding-left: 1.5rem; /* Shifts every line in the paragraph to the right */
}

/* Stats Glass Blocks */
.thread-stat-glass {
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
    transition: background 0.3s ease;
}

.thread-block:hover .thread-stat-glass {
    background: rgba(255, 255, 255, 0.6);
}

.stat-number {
    font-family: var(--font-display);
    font-size: 2.2rem; /* Adjusted down slightly for screen safety */
}

.stat-label {
    font-family: var(--font-body);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    display: block;
    margin-top: 2px;
}

/* --- DARK THEME OVERRIDES --- */
[data-theme="dark"] .bg-navy-glow { background: rgba(255,255,255,0.2); }
[data-theme="dark"] .thread-stat-glass {
    background: rgba(2, 46, 71, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* --- CRITICAL RESPONSIVE BREAKPOINT --- */
/* Core UI Safety Guard: On tablets and mobile phones, switch back to fluid natural heights. 
   This prevents long content from ever breaking or colliding on small, narrow viewports. */
@media (max-width: 991px) {
    .agency-focus, 
    .hero-right-bleed {
        height: auto !important;
        min-height: 100vh;
    }
    .agency-focus {
        padding: 100px 0 60px 0 !important;
    }
}

    
		
		/* --- 7. HERO SECTION (RESTORED & STYLED) --- */
        .hero-section {
            min-height: 100vh;
            display: flex;
            align-items: center;
            position: relative;
            padding-top: 100px; /* Offset for fixed nav */
        }
		
		/* --- 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;
		}

        .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%);
    }

    /* Ensures the image fills the entire area from top to bottom */
    .hero-img-cover {
        object-fit: cover; 
        width: 100%;
        height: 100%;
    }

    /* Positions the image on the right half of the screen, bleeding to the edge */
    @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;
        }
    }

        .vf-stat-box {
        background: rgba(128, 128, 128, 0.05); /* Subtle background for both light/dark themes */
        border: 1px solid rgba(128, 128, 128, 0.1);
        backdrop-filter: blur(4px);
        transition: transform 0.3s ease, border-color 0.3s ease;
    }
    .vf-stat-box:hover {
        transform: translateY(-3px);
        border-color: rgba(232, 62, 140, 0.3);
    }
    .text-vf-gradient {
        background: linear-gradient(90deg, #f68f1d, #e83e8c);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }
		
		/* =========================================
           AGENCY FOCUS (Home)
           ========================================= */
        .agency-focus {
            min-height: 100vh;
            display: flex; flex-direction: column; justify-content: center;
            position: relative; padding: 100px 0; z-index: 1;
        }

        .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 */
    
    /* ADD THIS LINE to create space below the navbar */
    margin-top: 4rem; /* Adjust this value (e.g., 2rem, 100px, 10vh) to fit your design */
    
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    color: var(--text-main);
    text-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

        /* =========================================
   AGENCY FOCUS SECTION
========================================= */

/* --- Focus Tag & Headline --- */
.focus-tag-line {
    width: 40px;
    height: 2px;
    background-color: #f68f1d;
    margin-right: 15px;
}

.focus-tag-text {
    letter-spacing: 2px;
    color: #f68f1d;
    font-size: 0.85rem;
}

.focus-headline-gradient {
    font-size: 1.9em; /* Crank this up to increase the text size/height */
    line-height: 0.8; /* Squeezes the line spacing extremely tight */
    display: inline-block; /* Helps the browser respect the tight line height on a span */
}

.focus-mission-text {
    line-height: 1.2;
	font-weight: 600;
	font-family: var(--font-body);
	font-size: 1.15rem;
	letter-spacing: 0.5px;
}

/* Force the paragraph AND any bold tags inside it to 600 in dark mode */
html[data-theme="dark"] .focus-mission-text,
html[data-theme="dark"] .focus-mission-text b {
    font-weight: 600 !important;
}

/* --- Services Glass Box --- */
.services-highlight-box {
    background: rgba(128, 128, 128, 0.05);
    border: 1px solid rgba(128, 128, 128, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* Required for Safari */
}

.services-highlight-border {
    height: 4px;
    background: linear-gradient(90deg, #e83e8c, #f68f1d, #d4af37);
}

.services-highlight-title {
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 1px;
}

/* --- Service List Icons & Typography --- */
.service-icon {
    width: 40px;
    height: 40px;
}

/* Brand Colors mapped to Icon Backgrounds */
.service-icon.icon-pink {
    background: rgba(232, 62, 140, 0.1);
    color: #e83e8c;
}

.service-icon.icon-orange {
    background: rgba(246, 143, 29, 0.1);
    color: #f68f1d;
}

.service-icon.icon-gold {
    background: rgba(212, 175, 55, 0.1);
    color: #d4af37;
}

.service-name {
    letter-spacing: -0.5px;
}

/* LIGHT MODE (Default) */
.vf-svc-card {
    background: #ffffff; 
    border: 1px solid rgba(0, 0, 0, 0.08); 
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04); 
    border-radius: 16px;
    padding: 40px 30px;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* DARK MODE OVERRIDE (Change [data-bs-theme="dark"] to whatever your site uses if it's not Bootstrap) */
/* --- Verafede Service Card: Dark Mode --- */
html[data-theme="dark"] .vf-svc-card {
    background: rgba(0, 0, 0, 0.4); /* The sleek black mask */
    backdrop-filter: blur(12px); /* High-end glass blur */
    -webkit-backdrop-filter: blur(12px); /* Safari support */
    border: 1px solid rgba(255, 255, 255, 0.08); /* Subtle edge highlight */
    border-radius: 16px;
    padding: 40px 30px;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Hide dark image by default */
.theme-img-dark {
    display: none;
}

/* Hide light image when in dark mode */
html[data-theme="dark"] .theme-img-light {
    display: none;
}

/* Show dark image when in dark mode */
html[data-theme="dark"] .theme-img-dark {
    display: block; 
}

/* --- Responsive Line Spacing --- */

/* Mobile First: Generous spacing so it isn't cramped on small screens */
.focus-headline {
    line-height: 1.2; /* Gives the big headline letters room to breathe */
}

.focus-mission-text {
    line-height: 1.6; /* Standard, highly readable spacing for paragraphs */
    margin-bottom: 2rem; /* Ensure space before the card */
}

/* Desktop View: Tighten it back up slightly for larger screens */
@media (min-width: 992px) {
    .focus-headline {
        line-height: 1.1; /* Tighter, punchier look on desktop */
    }
}

        /* =========================================
           MISSION & VISION (Vertical)
           ========================================= */
        :root {
    --brand-orange: #f68f1d;
    --vf-navy: #0a1128;
}

/* Section Logic */
.mv-section {
    padding: 100px 0;
    background: transparent;
}

.mv-subtitle {
    font-size: 1.1rem; 
    color: var(--vf-navy); 
    opacity: 0.8; 
    max-width: 90%;
	font-weight: 600;
}

[data-theme="dark"] .mv-subtitle {
    color: #ffffff;
}

/* The Overlap Container */
.stack-container {
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Base Card Styling */
.mv-card {
    position: relative;
    padding: 40px;
    border-radius: 30px;
    margin-bottom: -30px; /* This creates the overlap interaction */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

/* Light Theme: Vision (Subtle/Clean Style) */
.mv-card-vision {
    background: rgba(255, 255, 255, 0.8);
    z-index: 1;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

/* Light Theme: Mission (Bold Brand Style) */
.mv-card-mission {
    background: rgba(246, 143, 29, 0.05); /* Very light orange tint */
    border: 1px solid rgba(246, 143, 29, 0.3);
    z-index: 2; /* Sits on top */
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
}

/* Text Colors in Cards */
.mv-tag {
    font-weight: 900;
    font-size: 3rem;
    position: absolute;
    right: 30px;
    top: 20px;
    opacity: 0.1;
    color: var(--vf-navy);
}

.mv-title {
    font-weight: 800;
    letter-spacing: 2px;
    font-size: 0.85rem;
    color: var(--brand-orange);
    margin-bottom: 15px;
}

.mv-text {
    font-size: 1.5rem;
    line-height: 1.4;
    color: var(--vf-navy);
    font-weight: 600;
    max-width: 90%;
}

/* Dark Theme Overrides */
[data-theme="dark"] .mv-card-vision {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .mv-card-mission {
    background: rgba(246, 143, 29, 0.1);
    border: 1px solid rgba(246, 143, 29, 0.4);
}

[data-theme="dark"] .mv-text, 
[data-theme="dark"] .mv-tag {
    color: #ffffff;
}

/* Mobile Responsiveness */
@media (max-width: 991px) {
    .mv-section { padding: 60px 0; }
    
    .stack-container {
        gap: 20px; /* Remove negative overlap on mobile for better touch/readability */
    }
    
    .mv-card {
        margin-bottom: 0;
        padding: 30px;
    }
    
    .mv-text {
        font-size: 1.2rem;
    }

    .mv-tag {
        font-size: 2rem;
        top: 15px;
        right: 20px;
    }
}

/* Hover Interactivity */
.mv-card:hover {
    transform: translateY(-10px) scale(1.02);
    z-index: 5;
    background: rgba(255, 255, 255, 0.95);
}

[data-theme="dark"] .mv-card:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--brand-orange);
}


[data-theme="dark"] .card-glass-base {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
}


[data-theme="dark"] .v-tag {
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.8);
}


/* --- Light Mode Base for Vision Cards --- */
.vf-vision-card {
    background: #f8f9fa; /* Clean light gray base for light mode */
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 16px;
    overflow: hidden; /* Keeps the image inside the rounded corners */
    min-height: 400px; /* Gives the vertical cards nice tall proportions */
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.vf-card-text {
    line-height: 1.5;
    color: #333333;
}

/* --- The Magic Image Fade --- */
.vf-card-img-top {
    width: 100%;
    height: 220px; /* Fixed height for the image area */
    object-fit: cover; /* Ensures images don't stretch weirdly */
    
    /* This fades the image from solid (top) to completely transparent (bottom) */
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
}

.vf-card-content {
    padding: 0px 30px 40px 30px;
    margin-top: -20px; /* Pulls the text up slightly into the faded image area */
    z-index: 2;
}

/* Hover Lift Effect */
@media (min-width: 992px) {
    .vf-vision-card:hover {
        transform: translateY(-8px);
    }
}

/* --- Dark Mode Overrides (Your Custom Glass Specs) --- */
html[data-theme="dark"] .vf-vision-card {
    background: rgba(0, 0, 0, 0.4); /* The sleek black mask */
    backdrop-filter: blur(12px); /* High-end glass blur */
    -webkit-backdrop-filter: blur(12px); /* Safari support */
    border: 1px solid rgba(255, 255, 255, 0.08); /* Subtle edge highlight */
}

html[data-theme="dark"] .vf-card-text {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* --- Light Mode Base for Core Value Cards --- */
.vf-core-card {
    background: #f8f9fa; /* Clean light gray base */
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 16px;
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.vf-core-text {
    color: #333333;
}

.vf-core-content h3 {
    color: #111111;
}

/* --- Image Masks --- */
/* Taller image for the top full-width card */
.vf-core-img-tall {
    width: 100%;
    height: 180px; 
    object-fit: cover;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 100%);
}

/* Shorter images for the bottom square cards */
.vf-core-img-short {
    width: 100%;
    height: 140px; 
    object-fit: cover;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 20%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 20%, rgba(0,0,0,0) 100%);
}

.vf-core-content {
    margin-top: -30px; /* Pulls text up into the transparent fade */
    z-index: 2;
}

/* Hover Lift */
@media (min-width: 992px) {
    .vf-core-card:hover {
        transform: translateY(-6px);
    }
}

/* --- Dark Mode Overrides (Your Glass Effect!) --- */
html[data-theme="dark"] .vf-core-card {
    background: rgba(0, 0, 0, 0.4); 
    backdrop-filter: blur(12px); 
    -webkit-backdrop-filter: blur(12px); 
    border: 1px solid rgba(255, 255, 255, 0.08); 
}

html[data-theme="dark"] .vf-core-text {
    color: rgba(255, 255, 255, 0.85) !important;
}

html[data-theme="dark"] .vf-core-content h3 {
    color: #ffffff !important;
}

html[data-theme="dark"] .vf-core-content .font-monospace {
    color: rgba(255, 255, 255, 0.5) !important;
}
        .history-section {
            background-color: #111;
            padding: 100px 0;
            color: white;
            position: relative;
            overflow: hidden;
        }

        /* The Elastic Container */
        .history-accordion {
            display: flex;
            width: 100%;
            height: 600px; /* Fixed height for desktop */
            gap: 0;
            margin-top: 40px;
        }

        /* Individual Panels */
        .history-panel {
            flex: 1; /* All start equal */
            position: relative;
            overflow: hidden;
            transition: all 0.7s cubic-bezier(0.25, 1, 0.5, 1);
            cursor: pointer;
            border-right: 1px solid rgba(255,255,255,0.1);
        }
        
        .history-panel:last-child { border-right: none; }

        /* Hover State */
        .history-panel:hover {
            flex: 3.5; /* Grow significantly */
        }

        /* Background Images */
        .h-bg-img {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            object-fit: cover;
            opacity: 0.4;
            filter: grayscale(100%);
            transition: all 0.7s ease;
        }
        
        .history-panel:hover .h-bg-img {
            opacity: 0.8;
            filter: grayscale(0%);
            transform: scale(1.05);
        }

        /* Overlay Gradient */
        .h-overlay {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background: linear-gradient(0deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.2) 60%);
            z-index: 1;
        }
        
        /* Panel Content */
        .h-content {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            padding: 40px;
            z-index: 2;
        }

        /* Vertical Text (Default State) */
        .h-year {
            font-family: var(--font-display);
            font-size: 3rem;
            color: rgba(255,255,255,0.3);
            transition: all 0.5s ease;
            transform-origin: bottom left;
        }
        
        /* Title & Description (Hidden by default) */
        .h-details {
            max-height: 0;
            opacity: 0;
            overflow: hidden;
            transition: all 0.5s ease 0.1s; /* Delay slightly */
            transform: translateY(20px);
        }

        /* Active State Styles */
        .history-panel:hover .h-year {
            font-size: 5rem;
            color: var(--vf-gold);
            text-shadow: 0 0 20px rgba(212, 175, 55, 0.5);
            margin-bottom: 10px;
        }

        .history-panel:hover .h-details {
            max-height: 200px;
            opacity: 1;
            transform: translateY(0);
        }

        /* Mobile Adjustments for Accordion */
        @media (max-width: 991px) {
            .history-accordion {
                flex-direction: column;
                height: auto;
            }
            .history-panel {
                height: 120px; /* Collapsed height */
                border-right: none;
                border-bottom: 1px solid rgba(255,255,255,0.1);
            }
            .history-panel:hover {
                flex: none; /* Disable flex grow on mobile column */
                height: 400px; /* Expand height instead */
            }
        }


        /* =========================================
           ELASTIC SERVICES & FOOTER
           ========================================= */
        .elastic-section {
            background-color: var(--vf-navy);
            padding: 100px 0;
            position: relative;
            overflow: hidden;
            z-index: 10;
        }
        .elastic-wrapper { display: flex; width: 100%; height: 500px; gap: 10px; }
        .elastic-card {
            flex: 1; position: relative; background: #000;
            border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 20px;
            overflow: hidden; transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
            cursor: pointer; display: flex; flex-direction: column; justify-content: flex-end; padding: 40px;
        }
        .card-bg-image {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            object-fit: cover; z-index: 0; opacity: 0.3;
            filter: grayscale(100%) contrast(1.2); transition: all 0.8s ease;
        }
        .card-overlay {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background: linear-gradient(180deg, rgba(2, 46, 71, 0.2) 0%, rgba(2, 46, 71, 0.95) 90%);
            z-index: 1; transition: all 0.6s ease;
        }
        .elastic-card:hover { flex: 3; border-color: var(--vf-orange); box-shadow: 0 20px 50px rgba(0,0,0,0.5); }
        .elastic-card:hover .card-bg-image { opacity: 1; transform: scale(1.1); filter: grayscale(0%) contrast(1); }
        .elastic-card:hover .card-overlay {
            background: linear-gradient(180deg, rgba(246, 143, 29, 0.6) 0%, rgba(246, 143, 29, 0.4) 50%, rgba(2, 46, 71, 1) 100%);
            mix-blend-mode: hard-light;
        }
        .card-content { position: relative; z-index: 2; width: 100%; min-width: 300px; }
        .elastic-card:hover .elastic-icon { color: #fff; transform: scale(0.8) translateY(-20px); }
        .elastic-title { font-family: var(--font-display); font-size: 2rem; color: #fff; margin-bottom: 10px; white-space: nowrap; }
        .elastic-desc {
            font-family: var(--font-body); font-size: 1.1rem; color: rgba(255, 255, 255, 0.9);
            line-height: 1.6; max-height: 0; opacity: 0; transform: translateY(20px);
            transition: all 0.4s ease 0.1s;
			font-weight: 600;
        }
        .elastic-card:hover .elastic-desc { max-height: 150px; opacity: 1; transform: translateY(0); font-weight: 600; }

/* Vertical Accent Line */
.mv-accent-line {
    width: 4px;
    height: 60px;
    background: var(--brand-orange);
    margin-bottom: 25px;
    border-radius: 2px;
}

/* Modernized Badge Tag */
.modern-badge {
    display: inline-block;
    padding: 6px 16px;
    background: rgba(246, 143, 29, 0.1);
    color: var(--brand-orange);
    font-weight: 800;
    font-size: 0.75rem;
    letter-spacing: 3px;
    border-radius: 100px;
    margin-bottom: 20px;
    border: 1px solid rgba(246, 143, 29, 0.2);
}

/* Bold Gradient Text */
.text-gradient-bold {
    background: linear-gradient(90deg, #f68f1d 0%, #ff5e3a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: block; 
}

/* Description Box Styling */
.mv-description-box {
    margin-top: 30px;
    padding-left: 0;
    border-left: 0;
}

.mv-subtitle {
    font-size: 1.25rem;
    line-height: 1.6;
    color: var(--vf-navy);
    opacity: 0.9;
    font-weight: 400;
}

.mv-subtitle strong {
    color: var(--vf-navy);
    font-weight: 700;
}

/* Dark Theme Adjustments */
[data-theme="dark"] .mv-subtitle, 
[data-theme="dark"] .mv-subtitle strong {
    color: #ffffff;
}

[data-theme="dark"] .mv-description-box {
    border-left-color: rgba(255, 255, 255, 0.1);
}

/* Mobile Friendly Tweaks */
@media (max-width: 991px) {
    .mv-accent-line {
        height: 40px;
        margin-left: auto;
        margin-right: auto;
    }
    
    .sticky-wrapper {
        text-align: center;
    }
    
    .focus-headline {
        letter-spacing: -1px;
    }
    
    .mv-subtitle {
        font-size: 1.1rem;
        padding-left: 0;
    }
}

/* Anchor Container */
/* The Shared Spine Design */

/* Ensure both containers have the same left padding/alignment */
.mv-section, .values-scroller-section {
    position: relative;
    overflow: visible !important; /* Crucial: allows the line to leak out of the section */
}
.prestige-anchor {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    position: relative;
}

.brand-rail {
    width: 2px;
    background: var(--brand-orange);
    position: absolute;
    left: 0;
    z-index: 1;
}

/* SECTION 01: Line extends DOWN */
.mv-section .brand-rail {
    top: 0;
    height: 200vh; /* Extends far below to meet the next section */
}

/* SECTION 02: Line extends UP */
.values-scroller-section .brand-rail {
    bottom: 0;
    height: 200vh; /* Extends far above to catch the line from section 01 */
}

/* The Glowing Dot (Positioned at the start of the title) */
.brand-rail::after {
    content: '';
    position: absolute;
    top: 10px; 
    left: -4px;
    width: 10px;
    height: 10px;
    background: var(--brand-orange);
    border-radius: 50%;
    box-shadow: 0 0 15px var(--brand-orange);
}

.anchor-content {
    padding-left: 30px;
}
/* SECTION 01: Line shoots DOWN to connect */
.timeline-spine.extend-down {
    top: 0;
    height: 200vh;
}

/* SECTION 02: Line shoots UP to catch the connection */
.timeline-spine.extend-up {
    bottom: 0;
    height: 200vh; 
}

/* 2. The Radiating Node */
.radiating-node {
    position: absolute;
    top: 10px; 
    left: -4px; /* Centers the 10px node on the 2px spine */
    width: 10px;
    height: 10px;
    background: var(--brand-orange, #f68f1d);
    border-radius: 50%;
    z-index: 2;
    box-shadow: 0 0 10px var(--brand-orange, #f68f1d);
}

/* The Pulsing Ring Animation */
.radiating-node::before, 
.radiating-node::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 2px solid var(--brand-orange, #f68f1d);
    animation: pulse-radiate 2.5s infinite cubic-bezier(0.215, 0.610, 0.355, 1.000);
}

/* Offset the second ring for a continuous wave effect */
.radiating-node::after {
    animation-delay: 1.25s;
}

@keyframes pulse-radiate {
    0% {
        width: 10px;
        height: 10px;
        opacity: 1;
    }
    100% {
        width: 50px;
        height: 50px;
        opacity: 0;
    }
}

/* 3. Mobile Adjustments (Disconnects the timeline gracefully so it doesn't break horizontal layouts) */
@media (max-width: 991px) {
    .timeline-spine.extend-down, 
    .timeline-spine.extend-up {
        height: 100%;
        top: 0;
        bottom: auto;
    }
    .prestige-anchor {
        flex-direction: column;
        gap: 15px;
    }
    .timeline-spine {
        width: 100px;
        height: 2px;
        background: linear-gradient(to right, var(--brand-orange, #f68f1d), transparent);
    }
    .radiating-node {
        top: -4px;
        left: 0;
    }
}
.timeline-spine {
    position: absolute;
    left: 0;
    width: 2px;
    background: var(--brand-orange, #f68f1d);
    z-index: 1;
}

/* Typography Consistency */
.compass-label {
    font-family: 'Space Mono', monospace;
    font-size: 0.85rem;
    letter-spacing: 4px;
    color: var(--brand-orange);
    font-weight: 700;
    display: block;
    margin-bottom: 15px;
}

.hero-statement {
    font-size: clamp(3rem, 7vw, 4.5rem);
    font-weight: 900;
    line-height: 0.9;
    letter-spacing: -2px;
    text-transform: uppercase;
}

.outline-text {
    display: block;
    color: transparent;
    -webkit-text-stroke: 1px var(--vf-navy);
}

[data-theme="dark"] .outline-text {
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.4);
}

/* Mobile: Break the connection to prevent horizontal scroll issues */
@media (max-width: 991px) {
    .mv-section .brand-rail, 
    .values-scroller-section .brand-rail {
        height: 100%;
        top: 0;
    }
}
/* Compass Label */
.compass-label {
    font-family: 'Space Mono', monospace; /* Or any mono font */
    font-size: 0.8rem;
    letter-spacing: 4px;
    color: var(--brand-orange);
    font-weight: 700;
}

/* Subtitle Box */
.mv-subtitle {
    font-size: 1.2rem;
    line-height: 1.5;
    color: var(--vf-navy);
    max-width: 320px;
    margin-top: 20px;
}

.highlight-text {
    display: block;
    font-weight: 800;
    color: var(--brand-orange);
    margin-top: 5px;
}

/* Dark Theme Adjustments */
[data-theme="dark"] .mv-subtitle {
    color: rgba(255,255,255,0.7);
}

/* Mobile Alignment Fix */
@media (max-width: 991px) {
    .prestige-anchor {
        flex-direction: column;
        gap: 15px;
        text-align: left;
    }
    
    .brand-rail {
        width: 100px;
        height: 2px;
        background: linear-gradient(to right, var(--brand-orange), transparent);
    }

    .hero-statement {
        font-size: 3.5rem;
        letter-spacing: -1px;
    }
    
    .brand-rail::before {
        display: none;
    }
}

/* ==========================================================
   ALIGNMENT & SEAMLESS TIMELINE CONNECTION
   ========================================================== */

/* 1. Replicating Bootstrap's Container Math for perfect left alignment */
:root {
    --bs-aligned-offset: 15px; /* Default for mobile */
}
@media (min-width: 576px)  { :root { --bs-aligned-offset: calc((100vw - 540px) / 2 + 15px); } }
@media (min-width: 768px)  { :root { --bs-aligned-offset: calc((100vw - 720px) / 2 + 15px); } }
@media (min-width: 992px)  { :root { --bs-aligned-offset: calc((100vw - 960px) / 2 + 15px); } }
@media (min-width: 1200px) { :root { --bs-aligned-offset: calc((100vw - 1140px) / 2 + 15px); } }
@media (min-width: 1400px) { :root { --bs-aligned-offset: calc((100vw - 1320px) / 2 + 15px); } }

.aligned-header {
    padding-left: var(--bs-aligned-offset);
}

/* 2. Extending the Spines so they meet seamlessly in the middle */
.timeline-spine.extend-down {
    top: 0;
    height: 150vh; /* Shoots far down through the gap */
}

.timeline-spine.extend-up {
    bottom: 0;
    height: 150vh; /* Shoots far up through the gap to catch the top line */
}

/* Add spacing between first MV anchor and Values anchor */
.unified-compass-values .values-header-zone {
    margin-top: 5rem; /* 5rem gap above the second anchor */
}

/* Gallery container */
.values-track-viewport {
    overflow-x: hidden;          /* hide scrollbars */
    padding: 2rem 0;
    perspective: 1000px;         /* gives 3D depth for hover effect */
    position: relative;
}

/* Horizontal flex track */
.values-track {
    display: flex;
    gap: 2rem;
    transition: transform 0.5s ease;
}

/* Each gallery card */
.values-track .gallery-card {
    flex: 0 0 280px;             /* fixed card width */
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    overflow: hidden;
    transform-style: preserve-3d; 
    transition: transform 0.5s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

/* Hover tilt + lift effect */
.values-track .gallery-card:hover {
    transform: rotateY(5deg) rotateX(5deg) scale(1.05);
    box-shadow: 0 20px 40px rgba(0,0,0,0.25);
}

/* Card inner content padding */
.values-track .gallery-card .card-inner {
    padding: 1rem;
}

/* Card top icons & index */
.values-track .gallery-card .card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Card body titles & descriptions */
.values-track .gallery-card .card-body {
    margin-top: 1rem;
}

.values-track .gallery-card .card-title {
    font-weight: 700;
    font-size: 1.1rem;
}

.values-track .gallery-card .card-desc {
    font-size: 0.9rem;
    margin: 0.5rem 0;
    color: #555;
}

/* Card footer pills */
.values-track .gallery-card .card-footer {
    display: flex;
    gap: 0.5rem;
}

.values-track .gallery-card .pill {
    background: #f68f1d;
    color: #fff;
    padding: 0.25rem 0.75rem;
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: 700;
}

/* Mobile stacking */
@media (max-width: 768px) {
    .values-track {
        flex-direction: column;
        align-items: center;
    }

    .values-track .gallery-card {
        width: 90%;
        margin-bottom: 1.5rem;
    }
}

/* --- BENTO GRID SYSTEM --- */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 20px;
    width: 100%;
}

/* Base Card: Orange Tinted Glass */
.bento-item {
    /* Stronger orange gradient to ensure it pops on light backgrounds */
    background: linear-gradient(135deg, rgba(246, 143, 29, 0.25) 0%, rgba(246, 143, 29, 0.08) 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    
    /* Crisper border to define the shape */
    border: 1px solid rgba(246, 143, 29, 0.4); 
    border-radius: 24px;
    padding: 30px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 200px;
    
    /* Crucial for light mode: A soft, diffused shadow to lift it off the background */
    box-shadow: 0 8px 32px rgba(246, 143, 29, 0.15);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Hover State: Deeper Orange Glow */
.bento-item:hover {
    transform: translateY(-8px);
    background: linear-gradient(135deg, rgba(246, 143, 29, 0.35) 0%, rgba(246, 143, 29, 0.15) 100%);
    border-color: rgba(246, 143, 29, 0.6);
    box-shadow: 0 15px 40px rgba(246, 143, 29, 0.25); 
}

/* Grid Placement & Brand Accents */
.bento-purpose { 
    grid-column: span 2; /* Spans full width */
    border-top: 4px solid var(--vf-orange); 
}
.bento-passion { 
    grid-column: span 1; 
    border-top: 4px solid var(--vf-pink); 
}
.bento-people { 
    grid-column: span 1; 
    border-top: 4px solid var(--vf-gold); 
}

/* Text & Typography */
.bento-title {
    font-weight: 800;
    font-size: 1.4rem;
    margin-bottom: 5px;
    letter-spacing: 2px;
    transition: transform 0.3s ease;
}

.bento-purpose .bento-title { color: var(--vf-orange); }
.bento-passion .bento-title { color: var(--vf-pink); }
.bento-people .bento-title { color: var(--vf-gold); }

/* The Interaction (Hidden by default, reveals on hover) */
.bento-desc {
    font-size: 0.95rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
    max-height: 0;
    opacity: 0;
    transform: translateY(15px);
    transition: all 0.4s ease;
	font-weight: 600;
}

/* --- Icon Styling: Verafede Brand Orange --- */
.bento-icon {
    color: #F15C4F !important; /* Locks in the exact Verafede Orange */
    font-size: 3rem; 
    position: absolute;
    top: 25px;
    right: 25px;
    opacity: 0.8; /* High base opacity so it never washes out */
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.bento-item:hover .bento-icon {
    opacity: 1;
    transform: scale(1.15) rotate(-10deg);
    /* Casts a glowing drop-shadow using the exact RGB values of #F15C4F */
    filter: drop-shadow(0 4px 8px rgba(241, 92, 79, 0.5)); 
}

.bento-item:hover .bento-desc {
    max-height: 100px;
    opacity: 1;
    transform: translateY(0);
    margin-top: 10px;
}

.bento-item:hover .bento-icon {
    opacity: 0.8;
    transform: scale(1.15) rotate(-5deg);
}

/* --- Light Mode Override: Dark Navy Glass --- */
html[data-theme="light"] .bento-item {
    /* Rich dark navy gradient mask */
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.85) 0%, rgba(15, 23, 42, 0.65) 100%);
    border: 1px solid rgba(15, 23, 42, 0.3);
    box-shadow: 0 8px 32px rgba(15, 23, 42, 0.2); /* Deep navy shadow */
}

html[data-theme="light"] .bento-item:hover {
    /* Darkens the navy slightly on hover */
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(15, 23, 42, 0.8) 100%);
    border-color: rgba(15, 23, 42, 0.5);
    box-shadow: 0 15px 40px rgba(15, 23, 42, 0.3);
}

/* Ensure text remains crisp white against the navy background */
html[data-theme="light"] .bento-desc {
    color: rgba(255, 255, 255, 0.85);
    font-weight: 400;
}
html[data-theme="light"] .bento-title {
    color: #ffffff;
}

/* --- Mobile Responsiveness & Touch Screen Fixes --- */
@media (max-width: 768px) {
    .bento-grid {
        grid-template-columns: 1fr; /* Stacks all cards */
        gap: 15px; /* Slightly tighter gap between cards */
        margin-top: 2rem; /* Pushes the grid down so it doesn't overlap the anchor line above */
    }
    
    .bento-purpose, .bento-passion, .bento-people {
        grid-column: span 1;
    }
    
    .bento-item {
        padding: 20px; /* Reduced from 30px to give more room inside */
        min-height: auto; /* Removes the rigid height so it hugs the text perfectly */
    }

    /* Shrink the title and prevent it from running into the icon */
    .bento-title {
        font-size: 1.2rem;
        margin-right: 50px; /* Creates a safe zone for the icon */
    }
    
    /* 1. Permanently reveal the hidden description text on mobile */
    .bento-desc {
        max-height: 200px; 
        opacity: 1;
        transform: translateY(0);
        margin-top: 8px;
        font-size: 0.9rem; /* Slightly smaller for mobile readability */
    }
    
    /* 2. Shrink and tuck the icon so it stops overlapping the text */
    .bento-icon {
        font-size: 2rem; /* Scaled down from 3rem */
        top: 20px;
        right: 20px;

        opacity: 1;
        transform: rotate(-10deg); /* Keeps the dynamic tilt without the scale-up */
        filter: drop-shadow(0 4px 8px rgba(241, 92, 79, 0.4)); 
    }

    /* 3. Ensure the light theme navy mask text stays bright and readable */
    html[data-theme="light"] .bento-desc {
        color: rgba(255, 255, 255, 0.9);
    }
	
	.timeline-spine {
        display: none !important; /* Hides the line entirely on mobile for a cleaner look */
    }
	.prestige-anchor {
        padding-bottom: 1rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Optional: A subtle horizontal divider instead */
        margin-bottom: 1rem;
    }
    .mb-5.mb-lg-0 {
        margin-bottom: 1rem !important; 
    }
	
html[data-theme="dark"] .focus-headline,
html[data-theme="dark"] .sticker-intro-text,
html[data-theme="dark"] .sticker-outro-text {
    color: #ffffff !important;
	font-weight: 600;
}

/* --- Light Mode Override: Maximum Specificity --- */
[data-theme="light"] .sticker-patch-container p.sticker-intro-text,
[data-theme="light"] .sticker-patch-container p.sticker-outro-text {
    color: #0f172a !important; 
}

[data-theme="light"] .sticker-patch-container p.sticker-outro-text strong {
    color: #000000 !important;
}

/* --- AGENCY FOCUS: MOBILE OPTIMIZATION --- */
@media (max-width: 768px) {
    /* 1. Scale down the massive headline */
    .focus-headline {
        font-size: 2.2rem !important;
        line-height: 1.1;
        margin-bottom: 1rem;
    }
    
    /* 2. Make the sticker patches look like neat pills on mobile */
    .sticker-patch {
        padding: 8px 16px;
        font-size: 0.85rem;
        border-radius: 50px;
        white-space: nowrap; /* Prevents text from breaking onto two lines inside the pill */
    }

    /* 3. Give the text room to breathe away from the screen edges */
    .sticker-intro-text, 
    .sticker-outro-text {
        font-size: 0.95rem;
        line-height: 1.6;
        padding: 0 15px;
    }

    /* 4. Adjust the stat cards for smaller screens */
    .glass-stat-card {
        padding: 1.5rem 1rem !important;
        border-radius: 20px;
    }
    .stat-number {
        font-size: 3.5rem !important; /* Slightly smaller numbers */
    }

    /* 5. Ensure the maps scale perfectly */
    .map-title {
        font-size: 1.3rem;
    }
    .map-graphic-container {
        width: 100%;
        padding: 0 10px;
    }
    /* Keep pins relative to the scaling image */
    .map-pin {
        transform: scale(0.8) translate(-50%, -50%); /* Shrinks the map pins slightly on mobile */
    }
}
}

/* ==========================================================
   MOBILE VIEW: LOCK OPEN HISTORY & ELASTIC SECTIONS
   ========================================================== */
@media (max-width: 991px) {
    /* --- History Section Mobile Fixes --- */
    .history-accordion {
        flex-direction: column !important;
        height: auto !important; 
        gap: 15px; 
    }
    
    .history-panel {
        width: 100% !important;
        height: 250px !important; 
        flex: none !important; 
        border-radius: 16px !important; 
    }
    
    /* Force the hidden text and content to be permanently visible */
    .history-panel .h-details,
    .history-panel .h-content {
        opacity: 1 !important;
        transform: translateY(0) !important;
        max-height: 500px !important; 
    }
    
    /* Ensure the dark gradient overlay is strong enough to read text */
    .history-panel .h-overlay {
        background: linear-gradient(0deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.2) 100%) !important;
        opacity: 1 !important;
    }

    /* --- Elastic Section Mobile Fixes --- */
    .elastic-wrapper {
        flex-direction: column !important;
        height: auto !important;
        gap: 15px;
    }
    
    .elastic-card {
        width: 100% !important;
        height: 280px !important; 
        flex: none !important;
        border-radius: 16px !important;
    }
    
    /* Force expertise descriptions to stay visible */
    .elastic-card .card-content,
    .elastic-card .elastic-desc {
        opacity: 1 !important;
        transform: translateY(0) !important;
        height: auto !important;
        max-height: none !important;
		font-weight: 600;
    }
    
    .elastic-card .card-overlay {
        opacity: 1 !important;
        background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.1) 100%) !important;
    }
	
	/* Elastic Card Paragraphs - Semi-bold */
	.elastic-desc p {
		font-weight: 600 !important;  
		font-size: 0.95rem; 
		line-height: 1.6;  
		color: var(--text-main);
	}


    /* KILL ALL HOVER/TAP EFFECTS ON MOBILE */
    .history-panel:hover, 
    .history-panel:active, 
    .elastic-card:hover, 
    .elastic-card:active {
        width: 100% !important;
        flex: none !important;
        transform: none !important;
    }

    /* Stop the background images from zooming in when tapped */
    .history-panel:hover .h-bg-img,
    .elastic-card:hover .card-bg-image,
    .history-panel:active .h-bg-img,
    .elastic-card:active .card-bg-image {
        transform: none !important;
    }

    /* Keep the overlays locked even when tapped */
    .history-panel:hover .h-overlay {
        background: linear-gradient(0deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.2) 100%) !important;
        opacity: 1 !important;
    }
    .elastic-card:hover .card-overlay {
        opacity: 1 !important;
        background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.1) 100%) !important;
    }
}
.anniversary-landscape {
  width: 100%;
  padding: 80px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent; /* inherits native site background */
}
.landscape-frame {
  position: relative;
  width: 100%;
  max-width: 900px; /* adjust as needed */
  aspect-ratio: 16 / 9; /* landscape ratio */
  border: 16px solid #1a1a1a;
  border-radius: 30px;
  background-color: #000;
  box-shadow: 0 20px 50px rgba(0,0,0,0.8), inset 0 0 0 2px #333;
  overflow: hidden;
}
.landscape-notch {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 160px;
  height: 20px;
  background-color: #1a1a1a;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  z-index: 10;
}
.landscape-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 18px;
  pointer-events: none;
}

@media (max-width: 768px) {
  .landscape-frame {
    max-width: 100%;
    border-radius: 20px;
  }
}

.anniversary-section {
  padding: 80px 20px;
}
.anniversary-title h2 {
  letter-spacing: -1px;
  line-height: 1.2;
  font-weight: 800;
}
.landscape-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 16px solid #1a1a1a;
  border-radius: 30px;
  background-color: #000;
  box-shadow: 0 20px 50px rgba(0,0,0,0.8), inset 0 0 0 2px #333;
  overflow: hidden;
}
.landscape-notch {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 160px;
  height: 20px;
  background-color: #1a1a1a;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  z-index: 10;
}
.landscape-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 18px;
  pointer-events: none;
}

@media (max-width: 991px) {
  .anniversary-title {
    text-align: center;
    margin-bottom: 30px;
  }
}

.vf-sticky-note {
  background: #fff8dc;
  border: 3px solid #f68f1d;
  border-radius: 16px;
  padding: 40px;
  max-width: 420px;
  box-shadow: 8px 10px 20px rgba(0,0,0,0.35);
  position: relative;
  transform-origin: top center; 
  transform: rotate(-3deg);     /* tilt */
  transition: transform 0.3s ease;
}
.vf-sticky-note::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 20px;
  background: var(--vf-gold, #d4af37);
  border-radius: 50%;
  box-shadow: 0 3px 6px rgba(0,0,0,0.4);
  z-index: 2;
}
.vf-sticky-badge {
  display: inline-block;
  background: linear-gradient(135deg, #f68f1d, #ea3b60);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 20px;
  letter-spacing: 1px;
  animation: pulse 2s infinite; /* subtle pulsing */
}
.vf-sticky-heading {
  font-size: 1.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.5px;
  margin-bottom: 1rem;
  background: linear-gradient(135deg, #f68f1d 0%, #ea3b60 100%);
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.vf-sticky-desc {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #333;
  margin-bottom: 1rem;
}
.vf-sticky-footer {
  text-align: right;
}
.vf-sticky-date {
  font-size: 0.9rem;
  font-weight: 600;
  color: #555;
}
/* Swing animation on hover */
.swing-bottom:hover {
  animation: swing-bottom 3s ease-in-out infinite;
}

@keyframes swing-bottom {
  0%   { transform: rotate(-3deg); }
  25%  { transform: rotate(3deg); }
  50%  { transform: rotate(-2deg); }
  75%  { transform: rotate(2deg); }
  100% { transform: rotate(-3deg); }
}

@keyframes pulse {
  0%   { transform: scale(1); opacity: 1; }
  50%  { transform: scale(1.1); opacity: 0.7; }
  100% { transform: scale(1); opacity: 1; }
}

.h-overlay-dark {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 60%);
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 1;
}
.h-overlay-yellow {
    background: linear-gradient(0deg, rgba(212, 175, 55, 0.4) 0%, rgba(0,0,0,0.2) 100%);
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 2;
    transition: opacity 0.4s ease-in-out;
}
.history-panel:hover .h-overlay-yellow {
    opacity: 0;
}
.h-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 3;
    padding: 1.5rem; 
}
.elastic-card:hover .card-overlay {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 60%) !important;
    opacity: 1 !important;
}