@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&family=Abril+Fatface&display=swap');

        /* ============================= TOKENS ============================= */
        :root {
            --bg:#F6F4F0;
            --bg-alt:#EDEAE4;
            --ink:#111111;
            --ink-soft:#55524C;
            --gold:#D4AF37;
            --near-black:#111111;
            --near-black-2:#1A1A1A;
            --serif: franie, "franie Fallback", system-ui, sans-serif;
            --chunky: franie, "franie Fallback", system-ui, sans-serif;
            --typewriter:'Inter', sans-serif;
            --italic-serif:'Inter', sans-serif;
            --ease:cubic-bezier(.22,1,.36,1);
            --accent-yellow:#FFD200;
            --face-width: 700px;
            --face-height: 394px;
            --tz: 630px;
            --primary: #FFD200;
        }


        /* ============================= FOOTER ============================= */
        footer{
            position: relative;
            z-index: 10;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            background-color:var(--near-black);
            background-image: 
            linear-gradient(to right, rgba(255,255,255,0.02) 1px, transparent 1px),
            linear-gradient(to bottom, rgba(255,255,255,0.02) 1px, transparent 1px);
            background-size:26px 26px;
            color:#fff;
            padding:100px 0 40px;
        }
        .container { max-width: 1400px; margin: 0 auto; padding: 0 clamp(24px,6vw,80px); width: 100%; }
        .footer-mark{font-family:var(--chunky);font-size:clamp(60px,11vw,160px);line-height:.9;letter-spacing:-.02em;text-align:center;}
        .footer-cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:30px;margin:70px 0 90px;}
        .footer-cols h4{font-family:var(--typewriter);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-yellow);margin-bottom:20px;}
        .footer-cols p, .footer-cols a{display:block;color:rgba(255,255,255,.55);font-size:14px;line-height:2.2;text-decoration:none;}
        .footer-cols a:hover{color:var(--accent-yellow);}
        .footer-bottom{display:flex;justify-content:space-between;padding-top:30px;border-top:1px solid rgba(255,255,255,.12);font-family:var(--typewriter);font-size:11px;letter-spacing:.08em;color:rgba(255,255,255,.4);flex-wrap:wrap;gap:14px;}
        
        .marquee{overflow:hidden;border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12);padding:26px 0;}
        .marquee-track{display:flex;white-space:nowrap;width:max-content;}
        .marquee-track span{font-family:var(--italic-serif);font-style:italic;font-size:22px;color:rgba(255,255,255,.5);padding-right:60px;}
        .marquee-track span b{color:var(--accent-yellow);font-style:normal;margin:0 10px;}


        body {
            margin: 0;
            padding: 0;
            background: #000;
            color: #fff;
            font-family: var(--sans);
            overflow-x: hidden;
        }



        /* Overwrite back-btn with global nav, so we delete it */

        /* 3D Showcase Section */
        .showcase-section {
            width: 100%;
            height: 100vh;
            min-height: 800px;
            background: #ffffff; /* White background */
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            z-index: 2;
            perspective: 1500px;
            /* Removed upward box-shadow */
        }

        .instruction {
            position: absolute;
            bottom: 50px;
            left: 50%;
            transform: translateX(-50%);
            font-weight: 600;
            letter-spacing: 6px;
            text-transform: uppercase;
            color: rgba(0,0,0,0.4); /* Dark text for light background */
            pointer-events: none;
            font-size: 12px;
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0% { opacity: 0.3; }
            50% { opacity: 0.8; }
            100% { opacity: 0.3; }
        }

        .scene {
            width: var(--face-width);
            height: var(--face-height);
            position: relative;
            transform-style: preserve-3d;
        }

        /* Removed 3D Floor Glow for clean white background */

        .hexagon {
            width: 100%;
            height: 100%;
            position: absolute;
            transform-style: preserve-3d;
        }

        .face {
            position: absolute;
            width: var(--face-width);
            height: var(--face-height);
            background: #000;
            border: 1px solid rgba(0, 0, 0, 0.1); /* Subtle dark border for light bg */
            box-shadow: none; /* Removed shadow */
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
            border-radius: 12px;
        }
        .face:hover {
            border-color: var(--primary);
            box-shadow: none; /* Removed shadow */
        }

        /* 6 Faces at 60 degree intervals */
        .face:nth-child(1) { transform: rotateY(0deg) translateZ(var(--tz)); }
        .face:nth-child(2) { transform: rotateY(60deg) translateZ(var(--tz)); }
        .face:nth-child(3) { transform: rotateY(120deg) translateZ(var(--tz)); }
        .face:nth-child(4) { transform: rotateY(180deg) translateZ(var(--tz)); }
        .face:nth-child(5) { transform: rotateY(240deg) translateZ(var(--tz)); }
        .face:nth-child(6) { transform: rotateY(300deg) translateZ(var(--tz)); }

        iframe {
            width: 100%;
            height: 100%;
            border: none;
            pointer-events: auto;
            border-radius: 10px;
        }
        
        /* Overlay to prevent iframe capturing mouse events while dragging */
        .iframe-overlay {
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            z-index: 10;
            cursor: grab;
            background: rgba(0,0,0,0.01);
            border-radius: 12px;
        }
        
        /* When hovering over the scene, let the iframe be interactive */
        .scene:hover .iframe-overlay {
            display: none;
        }
        /* Streaming UI */
        .streaming-section {
            background-color: #edeae4;
            background-image: 
                linear-gradient(to right, rgba(0,0,0,0.04) 1px, transparent 1px),
                linear-gradient(to bottom, rgba(0,0,0,0.04) 1px, transparent 1px);
            background-size: 40px 40px; /* Square boxes */
            padding: 50px 0;
            color: #131313;
            position: relative;
            z-index: 5;
        }

        .category-row {
            margin-bottom: 50px;
            padding-left: clamp(20px, 5vw, 60px);
        }

        .category-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            padding-right: clamp(20px, 5vw, 60px);
        }

        .category-header .category-title {
            font-size: 18px;
            font-weight: 700;
            margin: 0;
            letter-spacing: 0.5px;
            text-transform: uppercase;
        }

        .category-header .see-all {
            color: #ff3333; /* Accent color mimicking reference */
            font-size: 13px;
            text-decoration: none;
            font-weight: 600;
            transition: color 0.3s;
        }

        .category-header .see-all:hover {
            color: #000;
        }

        .posters-container {
            display: flex;
            gap: 20px;
            overflow-x: auto;
            padding-bottom: 20px; /* space for scroll and hover */
            padding-right: 20px; /* trailing space */
            scrollbar-width: none; /* Firefox */
        }

        .posters-container::-webkit-scrollbar {
            display: none;
        }

        .poster-card {
            flex: 0 0 auto;
            cursor: pointer;
            transition: transform 0.3s ease;
            position: relative;
        }

        .poster-card:hover {
            transform: scale(1.04);
            z-index: 10;
        }

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

        /* 16:9 Aspect Ratio */
        .aspect-16-9 {
            width: 320px;
            height: 180px;
            position: relative;
            border-radius: 0;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0,0,0,0.5);
        }

        .progress-bar-container {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: rgba(255,255,255,0.2);
        }

        .progress-bar {
            height: 100%;
            background: #ff4500; /* Orange-red progress bar */
        }

        .play-icon {
            position: absolute;
            bottom: 12px;
            right: 12px;
            background: #fff;
            color: #000;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            font-weight: 900;
            box-shadow: 0 2px 10px rgba(0,0,0,0.5);
        }

        .cw-info {
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
            font-size: 12px;
            color: #131313;
            font-weight: 600;
        }
        .cw-info .movie-title { margin: 0; font-size: 13px; text-transform: uppercase; }

        /* 2:3 Aspect Ratio for Trending */
        .aspect-2-3 {
            width: 220px;
            height: 330px;
            border-radius: 0;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0,0,0,0.5);
        }

        .trending-info {
            margin-top: 12px;
        }

        .trending-info .movie-title {
            margin: 0 0 5px 0;
            font-size: 15px;
            color: #131313;
            font-weight: 700;
        }

        .trending-info .meta {
            font-size: 12px;
            color: #666;
        }
        
        .trending-info .rating {
            color: #ffba00;
        }

        /* Trailer Modal */
        .trailer-modal {
            display: none;
            position: fixed;
            z-index: 10000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.9);
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .trailer-modal.active {
            display: flex;
            opacity: 1;
        }

        .modal-content {
            position: relative;
            width: 90%;
            max-width: 1000px;
            background: #000;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0,0,0,0.8);
        }

        .close-modal {
            position: absolute;
            top: 10px;
            right: 20px;
            color: #fff;
            font-size: 35px;
            font-weight: bold;
            cursor: pointer;
            z-index: 10001;
            transition: color 0.3s;
            text-shadow: 0 2px 10px rgba(0,0,0,0.5);
        }

        .close-modal:hover {
            color: #ff3333;
        }

        .video-container {
            position: relative;
            padding-bottom: 56.25%; /* 16:9 ratio */
            height: 0;
            overflow: hidden;
        }

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

    
/* Description font override */
p, .description, .lead-text, .testi-text, .service-card p, .about-copy p {
  font-family: "Bricolage Grotesque", "Bricolage Grotesque Fallback";
}

/* All text heading style override */
h2, h3, h4, h5, h6, .section-head h2 {
  font-family: "Just Sans", sans-serif !important;
  font-size: 66px !important;
  font-weight: 800 !important;
  letter-spacing: -2.5px !important;
  line-height: 66px !important;
  text-align: center !important;
  word-spacing: 0px !important;
}

/* About Heading - left aligned */
.about-heading {
  font-family: "Just Sans", sans-serif !important;
  font-size: 48px !important;
  font-weight: 800 !important;
  letter-spacing: -1.92px !important;
  line-height: 1.15 !important;
  text-align: left !important;
  text-transform: uppercase !important;
  word-spacing: 0px !important;
}

/* Hero Title Sizing - matched to fortuneonestudios */
h1.cinematic-title, .cinematic-title {
  font-family: "Just Sans", sans-serif !important;
  font-size: clamp(2rem, 4vw, 4.5rem) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: 2px !important;
  text-align: center !important;
}

/* Footer Mark Sizing - matched to fortuneonestudios */
.footer-mark {
  font-family: "Just Sans", sans-serif !important;
  font-size: clamp(60px, 11vw, 160px) !important;
  line-height: 0.9 !important;
  letter-spacing: -0.02em !important;
  text-align: center !important;
  font-weight: 800 !important;
}

/* Hero Title Sizing - matched to fortuneonestudios */
h1.cinematic-title, .cinematic-title {
  font-family: "Just Sans", sans-serif !important;
  font-size: clamp(2rem, 4vw, 4.5rem) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: 2px !important;
  text-align: center !important;
}

/* Footer Mark Sizing - matched to fortuneonestudios */
.footer-mark {
  font-family: "Just Sans", sans-serif !important;
  font-size: clamp(60px, 11vw, 160px) !important;
  line-height: 0.9 !important;
  letter-spacing: -0.02em !important;
  text-align: center !important;
  font-weight: 800 !important;
}