@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;
            --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;
        }



        .media-grid-section {
            background: #ffffff;
            color: #000000;
        }
        .media-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
            gap: 60px 40px;
            max-width: 90%;
            margin: 0 auto;
        }
        @media (max-width: 768px) {
            .media-grid {
                grid-template-columns: 1fr;
            }
        }
        .media-card {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        .media-poster-container {
            width: 100%;
            padding-bottom: 56.25%; /* 16:9 ratio */
            background-color: #f0f0f0;
            background-size: cover;
            background-position: center;
            position: relative;
        }
        .media-info h3 {
            font-family: var(--chunky) !important;
            font-size: 22px !important;
            font-weight: 800 !important;
            line-height: 1.1 !important;
            letter-spacing: -0.03em !important;
            margin-bottom: 24px !important;
            margin-top: 0 !important;
            text-transform: none !important;
            color: #000000 !important;
            text-shadow: none !important;
            -webkit-text-stroke: 0 !important;
        }
        .media-info .media-link {
            font-family: var(--chunky);
            font-size: 15px;
            font-weight: 800;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            color: #000000;
            display: flex;
            align-items: center;
            gap: 5px;
            margin-bottom: 10px;
            transition: opacity 0.3s ease;
        }
        .media-card-link:hover .media-link {
            opacity: 0.7;
        }
        a.media-card-link {
            text-decoration: none;
            display: block;
        }
        
        /* 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%;
            height: 0;
            overflow: hidden;
        }
        .video-container iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
    


  .fixed-actions {
    position: fixed;
    right: 30px;
    bottom: 30px;
    top: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    z-index: 10000;
    animation: floatWidget 6s ease-in-out infinite;
  }
  @keyframes floatWidget {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
  }
  .action-btn {
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
    background: transparent;
    border: none;
  }
  .action-btn img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.6s cubic-bezier(.25, 1, .22, 1);
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.4));
  }
  .action-btn:hover {
    transform: scale(1.1) translateX(-5px);
  }
  .action-btn:hover img {
    transform: scale(1.15) rotate(-5deg);
  }
  .attention-bubble {
    position: absolute;
    right: calc(100% + 15px);
    top: 50%;
    margin-top: -20px;
    background: #151f28;
    color: #fff;
    padding: 12px 18px;
    border-radius: 12px;
    border-bottom-right-radius: 0;
    font-size: 13px;
    font-weight: 500;
    font-family: var(--sans, sans-serif);
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    border: 1px solid #FFCC00;
    white-space: nowrap;
    opacity: 0;
    transform: translateX(20px) scale(0.9);
    pointer-events: none;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
  }
  .attention-bubble.show {
    opacity: 1;
    transform: translateX(0) scale(1);
    pointer-events: auto;
  }
  .attention-bubble::after {
    content: '';
    position: absolute;
    right: -6px;
    bottom: -1px;
    width: 12px;
    height: 12px;
    background: #151f28;
    border-right: 1px solid #FFCC00;
    border-bottom: 1px solid #FFCC00;
    transform: rotate(-45deg);
  }
  
  /* Chat Window Styles */
  #ai-chat-window {
      position: fixed;
      bottom: 120px;
      right: 30px;
      transform: translateY(20px) scale(0.95);
      width: 360px;
      height: 520px;
      background: #151f28;
      border-radius: 12px;
      border: 1px solid rgba(255, 204, 0, 0.3);
      box-shadow: 0 15px 40px rgba(0,0,0,0.5);
      display: flex;
      flex-direction: column;
      z-index: 10001;
      overflow: hidden;
      opacity: 0;
      pointer-events: none;
      transition: all 0.3s cubic-bezier(0.25, 1, 0.22, 1);
      transform-origin: bottom right;
  }
  #ai-chat-window.active {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0) scale(1);
  }
  .chat-header {
      background: rgba(21, 31, 40, 0.95);
      padding: 16px 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #fff;
      border-bottom: 1px solid rgba(255, 204, 0, 0.1);
  }
  .chat-header-info {
      display: flex;
      align-items: center;
      gap: 12px;
  }
  .chat-header-info img {
      width: 65px;
      height: 65px;
      background: transparent;
      border: none;
      object-fit: contain;
      filter: drop-shadow(0 4px 8px rgba(0,0,0,0.4));
      margin-left: -5px;
  }
  .chat-header-text h3 {
      margin: 0;
      font-size: 16px;
      font-weight: 600;
      font-family: var(--sans, sans-serif);
      display: flex;
      align-items: center;
      gap: 6px;
  }
  .chat-header-text p {
      margin: 4px 0 0;
      font-size: 12px;
      color: #FFCC00;
      font-family: var(--sans, sans-serif);
  }
  .chat-close {
      background: transparent;
      border: none;
      color: #a0aab5;
      font-size: 24px;
      cursor: pointer;
      transition: color 0.2s;
  }
  .chat-close:hover {
      color: #fff;
  }
  .chat-body {
      flex: 1;
      padding: 20px;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 15px;
      background: #0d141a;
  }
  .chat-message {
      padding: 12px 16px;
      border-radius: 12px;
      font-size: 14px;
      line-height: 1.5;
      font-family: var(--sans, sans-serif);
      max-width: 85%;
      box-shadow: 0 4px 15px rgba(0,0,0,0.1);
      word-wrap: break-word;
  }
  .chat-message.bot {
      background: #1a2632;
      color: #e0e0e0;
      border: 1px solid rgba(255, 204, 0, 0.1);
      border-top-left-radius: 4px;
      align-self: flex-start;
  }
  .chat-message.user {
      background: #FFCC00;
      color: #0d141a;
      border: none;
      border-top-right-radius: 4px;
      align-self: flex-end;
  }
  .typing-indicator {
      display: flex;
      gap: 4px;
      padding: 12px 16px;
      background: #1a2632;
      border: 1px solid rgba(255, 204, 0, 0.1);
      border-radius: 12px;
      border-top-left-radius: 4px;
      align-self: flex-start;
      width: fit-content;
  }
  .typing-dot {
      width: 6px;
      height: 6px;
      background: #FFCC00;
      border-radius: 50%;
      animation: typing 1.4s infinite ease-in-out both;
  }
  .typing-dot:nth-child(1) { animation-delay: -0.32s; }
  .typing-dot:nth-child(2) { animation-delay: -0.16s; }
  @keyframes typing {
      0%, 80%, 100% { transform: scale(0); }
      40% { transform: scale(1); }
  }
  .chat-footer {
      background: #151f28;
      padding: 15px;
      border-top: 1px solid rgba(255, 204, 0, 0.1);
      display: flex;
      align-items: center;
      gap: 12px;
  }
  .chat-input-wrapper {
      flex: 1;
      position: relative;
  }
  .chat-input {
      width: 100%;
      padding: 12px 16px;
      border: 1px solid rgba(255, 204, 0, 0.3);
      border-radius: 24px;
      font-size: 14px;
      outline: none;
      box-sizing: border-box;
      font-family: var(--sans, sans-serif);
      background: #0d141a;
      color: #fff;
  }
  .chat-input::placeholder {
      color: #777;
  }
  .chat-input:focus {
      border-color: #FFCC00;
  }
  .chat-send-btn {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: #FFCC00;
      border: none;
      color: #0d141a;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background 0.2s, transform 0.2s;
  }
  .chat-send-btn:hover {
      background: #E6B800;
      transform: scale(1.05);
  }
  .chat-mic-btn {
      background: transparent;
      border: none;
      color: #FFCC00;
      cursor: pointer;
      font-size: 18px;
      padding: 5px;
      transition: color 0.2s;
  }
  .chat-mic-btn:hover {
      color: #E6B800;
  }

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

/* Main section head h2 style override */
.section-head h2 {
  font-family: "Just Sans", sans-serif !important;
  font-size: 64px !important;
  font-weight: 800 !important;
  letter-spacing: -2.5px !important;
  line-height: 64px !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;
}