/* --- 1. GLOBAL SETTINGS --- */
        * { box-sizing: border-box; }
        body {
            margin: 0; padding: 0;
            background-color: #030303;
            color: #ffffff;
            font-family: 'Montserrat', sans-serif;
            overflow-x: hidden;
            min-height: 100vh;
        }

        /* --- 2. GOLDEN BOKEH ATMOSPHERE --- */
        .bokeh-bg {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            z-index: -1;
            background: 
                radial-gradient(circle at 15% 30%, rgba(184, 134, 11, 0.25) 0%, transparent 40%),
                radial-gradient(circle at 85% 60%, rgba(212, 175, 55, 0.2) 0%, transparent 45%),
                linear-gradient(to bottom, #000 0%, transparent 20%, transparent 80%, #000 100%);
            pointer-events: none;
        }
        /* Floating particles */
        .particle {
            position: absolute; width: 4px; height: 4px; 
            background: #d4af37; border-radius: 50%; 
            opacity: 0.5; filter: blur(2px);
            animation: float 8s infinite ease-in-out;
        }
        @keyframes float { 0%,100% { transform: translateY(0); opacity: 0.3; } 50% { transform: translateY(-30px); opacity: 0.7; } }

        /* --- 3. HEADER DESIGN --- */
        .top-info {
            font-size: 11px; color: #999; text-align: left;
            padding: 12px 5%; border-bottom: 1px solid rgba(255,255,255,0.08);
            letter-spacing: 0.5px;
        }
        .top-info span { margin-right: 15px; }

        nav {
            display: flex; justify-content: space-between; align-items: center;
            padding: 15px 5%; position: relative;
        }
        
        .nav-links { display: flex; gap: 30px; align-items: center; }
        .nav-links a {
            text-decoration: none; color: #eec85a; font-size: 12px;
            font-weight: 600; text-transform: uppercase; letter-spacing: 1px;
            transition: 0.3s;
        }
        .nav-links a:hover { color: #fff; text-shadow: 0 0 8px #d4af37; }

        /* The Logo Box */
        .logo-frame {
            border: 2px solid #b8860b; padding: 4px;
            background: #000; box-shadow: 0 0 25px rgba(184, 134, 11, 0.25);
        }
        .logo-inner {
            border: 2px dashed #555; padding: 6px 30px;
            text-align: center;
        }
        .logo-frame h1 {
            font-family: 'Cinzel', serif; font-size: 32px; color: #fff;
            margin: 0; line-height: 1; letter-spacing: 2px;
        }
        .logo-frame p {
            font-size: 9px; color: #d4af37; margin: 5px 0 0 0;
            letter-spacing: 3px; text-transform: uppercase;
        }

        .btn-nav-cta {
            background: linear-gradient(180deg, #edd176 0%, #b08d28 100%);
            border: none; padding: 10px 20px; font-weight: 700;
            font-size: 11px; color: #1a1a1a; cursor: pointer; border-radius: 2px;
        }

        /* --- 4. HERO SECTION --- */
        .hero-container {
    text-align: center;
    padding-top: 50px;
    perspective: 2000px;
    overflow: hidden;
}

        .hero-title {
            font-family: 'Playfair Display', serif; font-size: 38px;
            color: #f3e092; margin-bottom: 60px; font-weight: 400;
            text-shadow: 0 0 15px rgba(212, 175, 55, 0.4);
        }

        /* --- 5. THE 3D FILM STRIP (REVERSED) --- */
        .reel-3d-wrapper {
    position: relative;
    width: 100%;
    margin-bottom: 60px;
    transform-style: preserve-3d;
    transform: rotateY(-20deg);
    transform-origin: 0% 50%;
}

        /* The blurred glass overlay on the RIGHT side (Far side) */
        .blur-mask {
            position: absolute;
            top: 0; 
            left: 0; 
            bottom: 0; 
            width: 50%; /* Covers right side */
            z-index: 10; pointer-events: none;
            /* Gradient Mask: Visible on Left, Transparent/Blur on Right */
            background: linear-gradient(to right, #030303 0%, transparent 100%);
        }

        .film-strip {
            background: #080808;
            border-top: 2px solid #8a6e18;
            border-bottom: 2px solid #8a6e18;
            padding: 0;
            box-shadow: 20px 20px 50px rgba(0,0,0,0.8);
        }

        /* Sprocket Holes (The dots) */
        .sprocket-row {
            height: 24px; width: 100%;
            background-color: #111;
            background-image: linear-gradient(90deg, #050505 50%, transparent 50%);
            background-size: 30px 100%;
        }
        .sprocket-row.top { border-bottom: 1px solid #333; }
        .sprocket-row.bottom { border-top: 1px solid #333; }

        /* The Sliding Track */
        .reel-window {
    overflow: hidden;
    height: 150px;
    background: #000;
}
        
        .track {
            display: flex;
            width: max-content;
            /* Moves from Right (0) to Left (-50%) */
            animation: moveFilm 40s linear infinite;
        }
        .track:hover { animation-play-state: paused; }

        /* VERTICAL IMAGES (Portrait Mode) */
        .poster {
            width: 113px; /* 2:3 Aspect Ratio */
            object-fit: cover;
            border-right: 6px solid #000;
            border-left: 6px solid #000;
            filter: brightness(0.9) sepia(10%);
            transition: 0.3s;
        }
        .poster:hover { filter: brightness(1.1) sepia(0%); }

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

        /* --- 6. BUTTONS & FOOTER --- */
        .action-area { display: flex; justify-content: center; gap: 20px; margin-bottom: 10px; }
        
        .btn-gold {
            background: linear-gradient(135deg, #f3e092 0%, #d4af37 100%);
            border: none; padding: 14px 35px; color: #000;
            font-weight: 700; font-size: 13px; letter-spacing: 1px;
            cursor: pointer;
        }
        
        .btn-outline {
            background: transparent; border: 1px solid #fff;
            padding: 14px 35px; color: #fff; font-weight: 400;
            font-size: 13px; letter-spacing: 1px; cursor: pointer;
        }

        .footer-promo h3 {
            font-family: 'Playfair Display', serif; font-size: 20px;
            color: #ddd; font-weight: 400; margin-bottom: 10px;
			text-align: center !important;
        }
        .footer-promo p { color: #d4af37; font-size: 14px; word-spacing: 5px; text-align: center !important;}

.page-template-about .container {
        max-width: 90%;
        margin: auto;
    }
    .page-template-about h1 {
        font-size: 32px;
        margin-bottom: 10px;
		text-align: justify;
    }
    .page-template-about h2 {
        margin-top: 40px;
        font-size: 22px;
        border-bottom: 1px solid #ddd;
        padding-bottom: 8px;
		text-align: justify;
    }
    .page-template-about h3 {
        margin-top: 25px;
        font-size: 18px;
		text-align: justify;
    }
    .page-template-about p {
        text-align: justify;
        margin-bottom: 16px;
    }
    .page-template-about ul {
        margin-left: 20px;
        margin-bottom: 20px;
		text-align: justify;
    }
    .page-template-about li {
        margin-bottom: 6px;
    }