/* ============================================================
   TALISMAN FILMS — DESIGN SYSTEM
   Mumbai-based Film Production Company
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700;900&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Inter:wght@300;400;500;600;700&display=swap');

/* ────────────────────────────────────────────────────────────
   CUSTOM PROPERTIES
   ──────────────────────────────────────────────────────────── */

:root {
  /* Backgrounds */
  --bg-black:    #030610;
  --bg-dark:     #060C1F;
  --bg-deep:     #0A1430;
  --bg-mid:      #101E45;
  --bg-section:  #0D1835;

  /* Brand */
  --brand-navy:       #1B3061;
  --brand-navy-light: #2B4A8C;
  --brand-navy-glow:  rgba(27, 48, 97, 0.6);

  /* Gold Accent */
  --gold:        #C8972A;
  --gold-light:  #E4B84A;
  --gold-bright: #F5CC6A;
  --gold-dark:   #7A5B18;
  --gold-glow:   rgba(200, 151, 42, 0.2);
  --gold-strong: rgba(200, 151, 42, 0.5);

  /* Text */
  --text-primary:   #F5EFE3;
  --text-secondary: #B8C5E0;
  --text-muted:     #6B82AA;
  --text-gold:      #C8972A;

  /* Borders */
  --border-subtle: rgba(255, 255, 255, 0.07);
  --border-gold:   rgba(200, 151, 42, 0.3);
  --border-navy:   rgba(43, 74, 140, 0.5);

  /* Typography */
  --font-display: 'Cinzel', 'Georgia', serif;
  --font-elegant: 'Cormorant Garamond', 'Times New Roman', serif;
  --font-body:    'Inter', -apple-system, sans-serif;

  /* Layout */
  --nav-height:   80px;
  --max-width:    1400px;
  --pad:          clamp(24px, 5vw, 80px);
  --section-gap:  clamp(80px, 10vw, 140px);

  /* Transitions */
  --ease:          cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-dramatic: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast:  0.2s;
  --t-mid:   0.45s;
  --t-slow:  0.8s;
}

/* ────────────────────────────────────────────────────────────
   RESET
   ──────────────────────────────────────────────────────────── */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  background-color: var(--bg-black);
  color: var(--text-primary);
  font-family: var(--font-body);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.intro-active {
  overflow: hidden;
}

img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, textarea, select { font-family: inherit; }

/* ────────────────────────────────────────────────────────────
   FILM GRAIN OVERLAY
   ──────────────────────────────────────────────────────────── */

.grain-layer {
  position: fixed;
  inset: -50%;
  width: 200%;
  height: 200%;
  pointer-events: none;
  z-index: 9990;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='grain'><feTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='300' height='300' filter='url(%23grain)'/></svg>");
  background-size: 200px;
  animation: grain-shift 0.4s steps(1) infinite;
}

@keyframes grain-shift {
  0%  { transform: translate(0, 0); }
  20% { transform: translate(-4%, -8%); }
  40% { transform: translate(-12%, 4%); }
  60% { transform: translate(6%, -20%); }
  80% { transform: translate(-4%, 20%); }
  100%{ transform: translate(8%, -4%); }
}

/* ────────────────────────────────────────────────────────────
   INTRO VIDEO OVERLAY
   ──────────────────────────────────────────────────────────── */

#intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.8s var(--ease), visibility 0.8s;
}

.intro-skip #intro-overlay {
  display: none;
}

#intro-overlay.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

#intro-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#intro-logo-link {
  position: absolute;
  bottom: 8vh;
  left: 50%;
  z-index: 9100;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  animation: intro-logo-appear 1.4s cubic-bezier(0.4, 0, 0.2, 1) 1.5s both;
}

#intro-logo-link img {
  height: 48px;
  filter: drop-shadow(0 0 18px rgba(200, 151, 42, 0.7));
  transition: filter 0.3s ease;
}

.intro-enter-label {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(200, 151, 42, 0.55);
  padding: 9px 26px;
  border-radius: 2px;
  background: rgba(3, 6, 16, 0.45);
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  white-space: nowrap;
}

#intro-logo-link:hover img {
  filter: drop-shadow(0 0 36px rgba(200, 151, 42, 1));
}

#intro-logo-link:hover .intro-enter-label {
  color: #fff;
  border-color: var(--gold);
  background: rgba(200, 151, 42, 0.12);
}

@keyframes intro-logo-appear {
  from { opacity: 0; transform: translateX(-50%) translateY(20px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Gradient blend — nav area fades into video */
#intro-overlay::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 140px;
  background: linear-gradient(to bottom, rgba(3, 6, 16, 0.72) 0%, transparent 100%);
  z-index: 1;
  pointer-events: none;
}

#intro-overlay::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(to top, rgba(3, 6, 16, 0.55) 0%, transparent 100%);
  z-index: 1;
  pointer-events: none;
}

/* ────────────────────────────────────────────────────────────
   NAVIGATION
   ──────────────────────────────────────────────────────────── */

#navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9500;
  height: var(--nav-height);
  padding: 0 var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background var(--t-mid) var(--ease),
              backdrop-filter var(--t-mid) var(--ease),
              border-color var(--t-mid) var(--ease);
  border-bottom: 1px solid transparent;
}

#navbar.scrolled {
  background: rgba(3, 6, 16, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom-color: var(--border-subtle);
}

.nav-brand {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  line-height: 1;
  gap: 4px;
  flex-shrink: 0;
}

.nav-brand-name {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-primary);
  transition: color var(--t-fast) var(--ease);
}

.nav-brand-sub {
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.42em;
  color: var(--gold);
}

.nav-brand:hover .nav-brand-name { color: var(--gold); }

.nav-logo {
  height: 44px;
  width: auto;
  display: block;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 48px);
}

.nav-links a {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  position: relative;
  transition: color var(--t-fast) var(--ease);
  padding-bottom: 4px;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--gold);
  transition: width var(--t-mid) var(--ease);
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--text-primary);
}

.nav-links a:hover::after,
.nav-links a.active::after {
  width: 100%;
}

.nav-cta {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold) !important;
  border: 1px solid var(--border-gold);
  padding: 8px 20px;
  border-radius: 2px;
  transition: all var(--t-fast) var(--ease) !important;
}

.nav-cta::after { display: none !important; }

.nav-cta:hover {
  background: var(--gold) !important;
  color: var(--bg-black) !important;
  border-color: var(--gold) !important;
}

/* Nav dropdown — "More" menu */
.nav-dropdown { position: relative; }
.nav-dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  transition: color var(--t-fast) var(--ease);
  user-select: none;
}
.nav-dropdown-toggle::after {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--t-fast);
}
.nav-dropdown:hover .nav-dropdown-toggle,
.nav-dropdown:focus-within .nav-dropdown-toggle { color: var(--text-primary); }
.nav-dropdown:hover .nav-dropdown-toggle::after,
.nav-dropdown:focus-within .nav-dropdown-toggle::after {
  transform: rotate(-135deg) translateY(2px);
}
.nav-dropdown:has(.active) .nav-dropdown-toggle { color: var(--text-primary); }
.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  background: rgba(6,12,31,0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  padding: 8px 0;
  min-width: 170px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity var(--t-fast), transform var(--t-fast);
  z-index: 200;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.nav-dropdown-menu a {
  display: block !important;
  padding: 10px 22px;
}
.nav-dropdown-menu a::after { display: none !important; }

/* Hamburger */
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  cursor: pointer;
  z-index: 9600;
}

.nav-hamburger span {
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--text-primary);
  transition: all var(--t-mid) var(--ease);
  transform-origin: center;
}

.nav-hamburger.open span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.nav-hamburger.open span:nth-child(2) {
  opacity: 0;
}
.nav-hamburger.open span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* Mobile nav overlay */
.nav-mobile {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--bg-black);
  z-index: 9400;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 36px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-mid) var(--ease);
}

.nav-mobile.open {
  opacity: 1;
  pointer-events: all;
}

.nav-mobile a {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  color: var(--text-secondary);
  letter-spacing: 0.1em;
  transition: color var(--t-fast) var(--ease);
}

.nav-mobile a:hover { color: var(--gold); }

/* ────────────────────────────────────────────────────────────
   TYPOGRAPHY
   ──────────────────────────────────────────────────────────── */

.display-xl {
  font-family: var(--font-display);
  font-size: clamp(3rem, 9vw, 9rem);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.display-lg {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 5rem);
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.display-md {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.5vw, 3.5rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.elegant-xl {
  font-family: var(--font-elegant);
  font-size: clamp(1.8rem, 4vw, 4.5rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.2;
}

.label {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}

.body-lg {
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.75;
  color: var(--text-secondary);
}

.body-md {
  font-size: clamp(0.9rem, 1.2vw, 1.05rem);
  line-height: 1.7;
  color: var(--text-secondary);
}

/* Word-split for text reveals */
.split-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}

.split-word-inner {
  display: inline-block;
  transform: translateY(110%);
  will-change: transform;
}

/* ────────────────────────────────────────────────────────────
   LAYOUT UTILITIES
   ──────────────────────────────────────────────────────────── */

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--pad);
}

.container-narrow {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 var(--pad);
}

.section {
  padding: var(--section-gap) 0;
  position: relative;
}

.section-dark {
  background: var(--bg-dark);
}

/* ── Light sections (A24 / prestige hybrid) ── */
.section-light {
  background: #F8F6F1;
}

.section-light.founders-section,
.section-light.about-intro {
  background: #F8F6F1;
}

/* Text overrides */
.section-light h1,
.section-light h2,
.section-light h3,
.section-light h4,
.section-light .display-md,
.section-light .animate-heading,
.section-light .film-title {
  color: #141414;
}

.section-light p,
.section-light .body-md,
.section-light .body-lg {
  color: #4A4A4A;
}

.section-light .label {
  color: var(--gold);
  border-color: rgba(200,151,42,0.4);
  background: transparent;
}

.section-light .text-muted { color: #777777; }

/* Quote */
.section-light .about-quote {
  color: #1A1A1A;
}

/* Cards */
.section-light .content-card {
  background: #FFFFFF;
  border-color: rgba(0,0,0,0.1);
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}

.section-light .content-card:hover {
  border-color: var(--border-gold);
  box-shadow: 0 8px 32px rgba(0,0,0,0.1);
}

.section-light .content-card h3 { color: #141414; }
.section-light .content-card p  { color: #555555; }

/* Stats */
.section-light .stat-item {
  background: #FFFFFF;
  border: 1px solid rgba(0,0,0,0.09);
}

.section-light .stat-label { color: #888888; }

/* Founder cards */
.section-light .founder-card {
  background: #FFFFFF;
  border-color: rgba(0,0,0,0.1);
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}

.section-light .founder-card:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}

.section-light .founder-name { color: #141414; }
.section-light .founder-bio  { color: #4A4A4A; }

.section-light .founder-tag {
  background: rgba(0,0,0,0.05);
  color: #444444;
  border-color: rgba(0,0,0,0.12);
}

/* Press cards */
.section-light .press-card {
  background: #FFFFFF;
  border-color: rgba(0,0,0,0.1);
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}

.section-light .press-card:hover {
  border-color: var(--border-gold);
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

.section-light .press-title { color: #1A1A1A; }
.section-light .press-link  { color: #555555; }
.section-light .press-link:hover { color: var(--gold); }

/* Outline buttons on light bg */
.section-light .btn-outline {
  color: #1A1A1A;
  border-color: rgba(0,0,0,0.25);
}

.section-light .btn-outline:hover {
  color: #000;
  border-color: rgba(0,0,0,0.55);
  background: rgba(0,0,0,0.04);
}

/* Positioning / quote card */
.section-light .positioning-card {
  background: #FFFFFF;
  border-color: rgba(0,0,0,0.1);
}

.section-light .positioning-card p,
.section-light .positioning-card .elegant-xl {
  color: #1A1A1A;
}

/* Slate cards on light background */
.section-light .slate-cards {
  background: rgba(0,0,0,0.07);
  border-color: rgba(0,0,0,0.07);
}
.section-light .slate-card {
  background: #FFFFFF;
}
.section-light .slate-card:hover {
  background: #F4F1EC;
}
.section-light .slate-card h3 { color: #141414; }
.section-light .slate-card p  { color: #555555; }
.section-light .slate-number  { color: rgba(0,0,0,0.05); }

/* Bold names in about body text */
.section-light .body-lg strong,
.section-light .body-md strong { color: #141414; }

.section-deep {
  background: var(--bg-deep);
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(24px, 4vw, 60px);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 40px);
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2vw, 32px);
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.text-center { text-align: center; }
.text-gold { color: var(--gold); }
.text-muted { color: var(--text-muted); }

/* Section header layout */
.section-header {
  margin-bottom: clamp(40px, 6vw, 80px);
}

.section-header .label {
  display: block;
  margin-bottom: 16px;
}

.divider-gold {
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
  margin: 24px 0;
}

.divider-center {
  margin: 24px auto;
}

/* ────────────────────────────────────────────────────────────
   BUTTONS
   ──────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 32px;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border-radius: 2px;
  transition: all var(--t-fast) var(--ease);
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease);
}

.btn:hover::before { opacity: 0.08; }

.btn-gold {
  background: var(--gold);
  color: var(--bg-black);
  border: 1px solid var(--gold);
}

.btn-gold:hover {
  background: var(--gold-light);
  border-color: var(--gold-light);
  box-shadow: 0 0 30px var(--gold-glow);
}

.btn-outline {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
}

.btn-outline:hover {
  border-color: rgba(255,255,255,0.4);
  color: #fff;
}

.btn-outline-gold {
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--border-gold);
}

.btn-outline-gold:hover {
  background: var(--gold-glow);
  border-color: var(--gold);
}

.btn-icon {
  width: 18px;
  height: 18px;
}

/* Arrow button with animated line */
.btn-text {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
  position: relative;
}

.btn-text .btn-line {
  display: inline-block;
  width: 40px;
  height: 1px;
  background: var(--gold);
  transition: width var(--t-mid) var(--ease);
}

.btn-text:hover .btn-line {
  width: 70px;
}

/* ────────────────────────────────────────────────────────────
   HERO SECTION
   ──────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--bg-black);
}

.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* ── Hero video background ── */
.hero-video-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0.5;
}

/* ── Films page video hero ── */
.video-hero { position: relative; overflow: hidden; }
.page-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0.72;
}
.page-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(0,0,0,0.6) 0%,
    rgba(0,0,0,0.2) 45%,
    rgba(0,0,0,0.65) 100%);
  z-index: 1;
}

/* ── AI Cinema hero video ── */
.ai-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0.75;
}

/* ── Operation Sindoor section ── */
.os-section {
  position: relative;
  overflow: hidden;
  padding: var(--section-gap) 0;
}

.os-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0.88;
}

.os-section-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
    rgba(0,0,0,0.6) 0%,
    rgba(0,0,0,0.35) 45%,
    rgba(0,0,0,0.1) 100%);
  z-index: 1;
}

.os-content {
  position: relative;
  z-index: 2;
}

.ai-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
    rgba(0,0,0,0.88) 0%,
    rgba(0,0,0,0.55) 50%,
    rgba(0,0,0,0.15) 100%);
  z-index: 1;
}

.hero-gradient {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 0%,
    rgba(27, 48, 97, 0.5) 0%,
    transparent 70%),
  radial-gradient(ellipse 60% 50% at 80% 80%,
    rgba(200, 151, 42, 0.06) 0%,
    transparent 60%),
  linear-gradient(180deg, rgba(3,6,16,0) 0%, rgba(3,6,16,0.8) 100%);
}

.hero-content {
  position: relative;
  z-index: 2;
  padding: var(--section-gap) var(--pad);
  max-width: var(--max-width);
  margin: 0 auto;
  width: 100%;
  padding-top: calc(var(--nav-height) + 60px);
}

.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 32px;
}

.hero-eyebrow-line {
  width: 48px;
  height: 1px;
  background: var(--gold);
}

.hero-heading {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 7.5vw, 8.5rem);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--text-primary);
  margin-bottom: 32px;
  word-break: break-word;
  overflow-wrap: break-word;
}

.hero-heading .accent-word {
  color: transparent;
  -webkit-text-stroke: 1px var(--gold);
  text-stroke: 1px var(--gold);
}

.hero-sub {
  font-family: var(--font-elegant);
  font-size: clamp(1.1rem, 2vw, 1.7rem);
  font-weight: 300;
  font-style: italic;
  color: var(--text-secondary);
  max-width: 600px;
  margin-bottom: 48px;
  line-height: 1.5;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.hero-badge {
  position: absolute;
  bottom: 40px;
  right: var(--pad);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--text-muted);
}

.hero-badge span {
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
}

.hero-scroll-line {
  width: 1px;
  height: 60px;
  background: linear-gradient(to bottom, var(--gold), transparent);
  animation: scroll-pulse 2s ease-in-out infinite;
}

@keyframes scroll-pulse {
  0%, 100% { opacity: 0.4; transform: scaleY(1); }
  50% { opacity: 1; transform: scaleY(1.2); }
}

/* ────────────────────────────────────────────────────────────
   MARQUEE
   ──────────────────────────────────────────────────────────── */

.marquee-bar {
  background: var(--brand-navy);
  border-top: 1px solid var(--border-navy);
  border-bottom: 1px solid var(--border-navy);
  padding: 14px 0;
  overflow: hidden;
  position: relative;
  z-index: 5;
}

.marquee-track {
  display: flex;
  gap: 0;
  animation: marquee-scroll 30s linear infinite;
  white-space: nowrap;
  width: max-content;
}

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

.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  padding: 0 32px;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}

.marquee-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
}

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

/* ────────────────────────────────────────────────────────────
   GROUND ZERO FEATURE SECTION
   ──────────────────────────────────────────────────────────── */

.film-feature {
  background: var(--bg-dark);
  padding: var(--section-gap) 0;
}

.film-feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
}

.film-trailer-wrap {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  background: #000;
}

.film-trailer-wrap::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 4px;
  padding: 1px;
  background: linear-gradient(135deg, var(--gold-dark), transparent 50%, var(--brand-navy-light));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}

.film-trailer-wrap iframe,
.film-trailer-wrap video {
  width: 100%;
  aspect-ratio: 16/9;
  border: none;
  display: block;
  object-fit: cover;
}

.film-info { }

.film-info .label {
  display: block;
  margin-bottom: 20px;
}

.film-title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 5rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 0.9;
  margin-bottom: 8px;
}

.film-year {
  font-family: var(--font-elegant);
  font-size: 1.3rem;
  color: var(--gold);
  font-style: italic;
  margin-bottom: 28px;
}

.film-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}

.film-tag {
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  border: 1px solid var(--border-subtle);
  padding: 5px 12px;
  border-radius: 1px;
}

.film-synopsis {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--text-secondary);
  margin-bottom: 28px;
  border-left: 2px solid var(--gold);
  padding-left: 20px;
}

.film-credits {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: 36px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.film-credit-item strong {
  display: block;
  color: var(--text-secondary);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.film-credit-item span {
  color: var(--text-muted);
  font-size: 0.85rem;
}

/* Cast list */
.cast-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 36px;
}

.cast-name {
  font-size: 0.78rem;
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  padding: 4px 12px;
  border-radius: 20px;
}

/* ────────────────────────────────────────────────────────────
   ABOUT SECTION
   ──────────────────────────────────────────────────────────── */

.about-intro {
  position: relative;
  padding: var(--section-gap) 0;
}

.about-quote {
  font-family: var(--font-elegant);
  font-size: clamp(1.6rem, 3.5vw, 3.2rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.35;
  color: var(--text-primary);
  max-width: 900px;
  position: relative;
  padding-left: 40px;
}

.about-quote::before {
  content: '\201C';
  position: absolute;
  left: 0;
  top: -10px;
  font-family: var(--font-elegant);
  font-size: 5rem;
  line-height: 1;
  color: var(--gold);
  opacity: 0.4;
}

.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: 2px;
  overflow: hidden;
  margin-top: clamp(40px, 6vw, 80px);
}

.stat-item {
  background: var(--bg-dark);
  padding: 40px 32px;
  text-align: center;
}

.stat-number {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 700;
  color: var(--gold);
  display: block;
  line-height: 1;
  margin-bottom: 8px;
}

.stat-label {
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ────────────────────────────────────────────────────────────
   FOUNDERS SECTION
   ──────────────────────────────────────────────────────────── */

.founders-section {
  padding: var(--section-gap) 0;
  background: var(--bg-deep);
}

.founder-card {
  position: relative;
  padding: 40px;
  background: var(--bg-dark);
  border: 1px solid var(--border-subtle);
  border-radius: 2px;
  transition: border-color var(--t-mid) var(--ease),
              box-shadow var(--t-mid) var(--ease);
  overflow: hidden;
}

.founder-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--brand-navy-light));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-mid) var(--ease);
}

.founder-card:hover {
  border-color: var(--border-gold);
  box-shadow: 0 8px 40px rgba(0,0,0,0.4), 0 0 0 1px var(--border-gold);
}

.founder-card:hover::before {
  transform: scaleX(1);
}

.founder-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--bg-mid);
  border: 2px solid var(--border-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  font-family: var(--font-display);
  font-size: 1.8rem;
  color: var(--gold);
  font-weight: 700;
}

.founder-name {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.5vw, 1.8rem);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.founder-title {
  font-family: var(--font-elegant);
  font-size: 1rem;
  font-style: italic;
  color: var(--gold);
  margin-bottom: 20px;
}

.founder-bio {
  font-size: 0.9rem;
  line-height: 1.75;
  color: var(--text-secondary);
  margin-bottom: 28px;
}

.founder-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}

.founder-tag {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  border: 1px solid var(--border-subtle);
  padding: 4px 10px;
  border-radius: 1px;
}

.founder-socials {
  display: flex;
  gap: 16px;
}

.founder-social {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-subtle);
  border-radius: 50%;
  transition: all var(--t-fast) var(--ease);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.founder-social:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: var(--gold-glow);
}

/* ────────────────────────────────────────────────────────────
   DEVELOPMENT SLATE
   ──────────────────────────────────────────────────────────── */

.slate-section {
  padding: var(--section-gap) 0;
}

.slate-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: 2px;
  overflow: hidden;
}

/* 10-item slate (In Development page) */
.slate-cards.slate-10 {
  grid-template-columns: repeat(5, 1fr);
}

.slate-card {
  background: var(--bg-dark);
  padding: 40px 32px;
  position: relative;
  overflow: hidden;
  transition: background var(--t-mid) var(--ease);
  cursor: default;
}

.slate-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-mid) var(--ease);
}

.slate-card:hover {
  background: var(--bg-mid);
}

.slate-card:hover::after {
  transform: scaleX(1);
}

.slate-icon {
  font-size: 2rem;
  margin-bottom: 20px;
  display: block;
}

.slate-card h3 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 12px;
  color: var(--text-primary);
}

.slate-card p {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.65;
}

.slate-number {
  position: absolute;
  top: 24px;
  right: 24px;
  font-family: var(--font-display);
  font-size: 3.5rem;
  font-weight: 900;
  color: rgba(255,255,255,0.03);
  line-height: 1;
  user-select: none;
}

/* ────────────────────────────────────────────────────────────
   AI CINEMA TEASER
   ──────────────────────────────────────────────────────────── */

.ai-teaser {
  padding: var(--section-gap) 0;
  background: var(--bg-black);
  position: relative;
  overflow: hidden;
}

.ai-teaser::before {
  content: '';
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(27,48,97,0.3) 0%, transparent 70%);
  pointer-events: none;
}

.ai-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
}

.ai-visual {
  position: relative;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ai-orb {
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(43,74,140,0.4) 0%, rgba(27,48,97,0.2) 50%, transparent 70%);
  border: 1px solid rgba(43,74,140,0.4);
  position: relative;
  animation: orb-pulse 4s ease-in-out infinite;
}

.ai-orb::before {
  content: '';
  position: absolute;
  inset: 20px;
  border-radius: 50%;
  border: 1px solid rgba(200,151,42,0.2);
  animation: orb-pulse 4s ease-in-out infinite reverse;
}

.ai-orb::after {
  content: '';
  position: absolute;
  inset: 50px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200,151,42,0.1) 0%, transparent 70%);
  animation: orb-pulse 3s ease-in-out infinite;
}

.ai-orb-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
  text-align: center;
  z-index: 1;
}

@keyframes orb-pulse {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.05); opacity: 1; }
}

.ai-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 28px;
}

/* Cinema frame replacing orb */
.ai-cinema-frame {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(200,151,42,0.35);
  aspect-ratio: 16/9;
  width: 100%;
  max-width: 440px;
}
.ai-cinema-clip {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ai-cinema-frame-hud {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px 20px;
  background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 100%);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ai-cinema-frame-label {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}
.ai-cinema-frame-tag {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.02em;
}

.ai-feature {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8rem;
  color: var(--text-muted);
  letter-spacing: 0.05em;
}

.ai-feature::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
}

/* ────────────────────────────────────────────────────────────
   CTA SECTION
   ──────────────────────────────────────────────────────────── */

.cta-section {
  padding: var(--section-gap) 0;
  background: var(--brand-navy);
  position: relative;
  overflow: hidden;
  text-align: center;
}

.cta-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(200,151,42,0.08) 0%, transparent 70%);
}

.cta-section .container { position: relative; }

.cta-heading {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 5rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-primary);
  margin-bottom: 20px;
}

.cta-sub {
  font-family: var(--font-elegant);
  font-size: clamp(1rem, 2vw, 1.5rem);
  font-style: italic;
  color: var(--text-secondary);
  margin-bottom: 40px;
}

.cta-email {
  display: block;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--gold);
  margin-top: 24px;
  letter-spacing: 0.05em;
  transition: color var(--t-fast);
}

.cta-email:hover { color: var(--gold-bright); }

/* ────────────────────────────────────────────────────────────
   PAGE HERO (Inner Pages)
   ──────────────────────────────────────────────────────────── */

.page-hero {
  min-height: 55vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: clamp(60px, 8vw, 100px);
  padding-top: calc(var(--nav-height) + 60px);
  position: relative;
  background: var(--bg-black);
  overflow: hidden;
}

.page-hero .container { position: relative; z-index: 2; }

.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 20% 80%, rgba(27,48,97,0.4) 0%, transparent 60%);
}

.page-hero-label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}

.page-hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 8vw, 8rem);
  font-weight: 900;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 24px rgba(0,0,0,0.6);
  text-transform: uppercase;
  line-height: 0.88;
  color: var(--text-primary);
  margin-bottom: 24px;
}

.page-hero-sub {
  font-family: var(--font-elegant);
  font-size: clamp(1rem, 2vw, 1.4rem);
  font-style: italic;
  color: var(--text-secondary);
  max-width: 600px;
}

/* ────────────────────────────────────────────────────────────
   GENERIC CONTENT CARDS
   ──────────────────────────────────────────────────────────── */

.content-card {
  background: var(--bg-dark);
  border: 1px solid var(--border-subtle);
  border-radius: 2px;
  padding: 36px;
  transition: all var(--t-mid) var(--ease);
  position: relative;
  overflow: hidden;
}

.content-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 0;
  background: var(--gold);
  transition: height var(--t-mid) var(--ease);
}

.content-card:hover {
  border-color: var(--border-gold);
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}

.content-card:hover::after { height: 100%; }

.content-card h3 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 12px;
  color: var(--text-primary);
}

.content-card p {
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--text-muted);
}

/* ────────────────────────────────────────────────────────────
   CONTACT FORM
   ──────────────────────────────────────────────────────────── */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
}

.contact-info h2 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.contact-detail {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border-subtle);
}

.contact-detail:last-child {
  border-bottom: none;
}

.contact-detail-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bg-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1rem;
}

.contact-detail-text strong {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 4px;
}

.contact-detail-text span {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  background: var(--bg-mid);
  border: 1px solid var(--border-subtle);
  border-radius: 2px;
  padding: 12px 16px;
  color: var(--text-primary);
  font-size: 0.9rem;
  transition: border-color var(--t-fast) var(--ease);
  outline: none;
  -webkit-appearance: none;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: var(--gold);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--text-muted);
}

.form-group textarea {
  min-height: 140px;
  resize: vertical;
}

.form-group select option {
  background: var(--bg-dark);
}

/* ────────────────────────────────────────────────────────────
   FOOTER
   ──────────────────────────────────────────────────────────── */

footer {
  background: var(--bg-black);
  border-top: 1px solid var(--border-subtle);
  padding: 60px 0 32px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: clamp(32px, 4vw, 60px);
  margin-bottom: 48px;
}

.footer-brand {}

.footer-logo {
  height: 36px;
  margin-bottom: 20px;
}

.footer-tagline {
  font-family: var(--font-elegant);
  font-size: 1rem;
  font-style: italic;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 24px;
  max-width: 280px;
}

.footer-social {
  display: flex;
  gap: 12px;
}

.footer-social-link {
  width: 36px;
  height: 36px;
  border: 1px solid var(--border-subtle);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-muted);
  transition: all var(--t-fast) var(--ease);
}

.footer-social-link:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: var(--gold-glow);
}

.footer-col h4 {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-primary);
  margin-bottom: 20px;
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-col ul li a {
  font-size: 0.85rem;
  color: var(--text-muted);
  transition: color var(--t-fast) var(--ease);
}

.footer-col ul li a:hover { color: var(--gold); }

.footer-bottom {
  border-top: 1px solid var(--border-subtle);
  padding-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.footer-copy {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.footer-legal {
  display: flex;
  gap: 24px;
}

.footer-legal a {
  font-size: 0.78rem;
  color: var(--text-muted);
  transition: color var(--t-fast);
}

.footer-legal a:hover { color: var(--text-secondary); }

/* ────────────────────────────────────────────────────────────
   GENERIC SECTION UTILITIES
   ──────────────────────────────────────────────────────────── */

.gold-rule {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  margin: 20px 0;
  opacity: 0.3;
}

.badge-streaming {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-mid);
  border: 1px solid var(--border-navy);
  border-radius: 2px;
  padding: 8px 16px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.badge-streaming-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00C9A7;
  animation: blink 2s ease-in-out infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* Press cards */
.press-card {
  background: var(--bg-dark);
  border: 1px solid var(--border-subtle);
  border-radius: 2px;
  padding: 28px;
  transition: all var(--t-mid) var(--ease);
}

.press-card:hover {
  border-color: var(--border-gold);
}

.press-source {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}

.press-title {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 16px;
}

.press-link {
  font-size: 0.75rem;
  color: var(--text-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color var(--t-fast);
}

.press-link:hover { color: var(--gold); }

/* ────────────────────────────────────────────────────────────
   COLLABORATION AREAS
   ──────────────────────────────────────────────────────────── */

.collab-area {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid var(--border-subtle);
  transition: all var(--t-fast);
}

.collab-area:hover .collab-num { color: var(--gold); }
.collab-area:hover .collab-name { color: var(--text-primary); }

.collab-num {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
  min-width: 32px;
  transition: color var(--t-fast);
}

.collab-name {
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-secondary);
  transition: color var(--t-fast);
}

/* Collaborator person cards */
.collab-person-card {
  background: #FFFFFF;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 4px;
  padding: 32px 28px;
  transition: box-shadow var(--t-mid), border-color var(--t-mid);
}
.collab-person-card:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
  border-color: rgba(200,151,42,0.3);
}
.collab-person-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--bg-mid), var(--bg-dark));
  border: 1px solid rgba(200,151,42,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--gold);
  margin-bottom: 16px;
  overflow: hidden;
}
.collab-person-avatar img,
.founder-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  border-radius: 50%;
  display: block;
}
.collab-logo-wrap {
  width: 100%;
  height: 64px;
  background: #f7f7f7;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  margin-bottom: 16px;
}
.collab-logo-wrap img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  display: block;
}

.collab-person-name {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #141414;
  margin-bottom: 4px;
}
.collab-person-role {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 2px;
}
.collab-person-co {
  font-size: 0.78rem;
  color: #888888;
  margin-bottom: 14px;
}
.collab-person-bio {
  font-size: 0.84rem;
  color: #555555;
  line-height: 1.65;
}

/* ────────────────────────────────────────────────────────────
   ANIMATIONS UTILITIES (for GSAP)
   Content is VISIBLE by default; GSAP animates FROM hidden.
   ──────────────────────────────────────────────────────────── */

.reveal-up,
.reveal-left,
.reveal-right,
.reveal-scale {
  /* Intentionally no opacity:0 — GSAP sets initial state */
  will-change: transform, opacity;
}

/* Line reveal */
.line-mask {
  overflow: hidden;
}

.line-inner {
  display: block;
  will-change: transform;
  /* No transform here — GSAP animates FROM translateY(100%) */
}

/* ────────────────────────────────────────────────────────────
   RESPONSIVE
   ──────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
  .film-feature-grid { grid-template-columns: 1fr; }
  .film-trailer-wrap { order: -1; }
  .ai-grid { grid-template-columns: 1fr; }
  .ai-visual { height: 250px; order: -1; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .stats-row { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  :root {
    --nav-height: 70px;
    --section-gap: 70px;
  }

  .nav-links { display: none; }
  .nav-hamburger { display: flex; }
  .nav-mobile { display: flex; }

  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .stats-row { grid-template-columns: repeat(2, 1fr); }
  .footer-bottom { flex-direction: column; text-align: center; }

  .hero-heading { font-size: clamp(2.5rem, 12vw, 5rem); }
  .hero-cta { flex-direction: column; align-items: flex-start; }

  .film-credits { grid-template-columns: 1fr; }

  #intro-logo-link img { height: 40px; }
}

@media (max-width: 768px) {
  .slate-cards.slate-10 { grid-template-columns: repeat(2, 1fr); }
  /* ai-focus-grid stays 3 columns down to 540px — 9 items need 3×3 */
}

@media (max-width: 540px) {
  .ai-focus-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 480px) {
  .slate-cards,
  .slate-cards.slate-10 { grid-template-columns: 1fr; }
  .ai-features { grid-template-columns: 1fr; }
  .founder-socials { flex-wrap: wrap; }
}

/* ════════════════════════════════════════════════════════════
   COMPREHENSIVE MOBILE — ALL PAGES
   ════════════════════════════════════════════════════════════ */

/* ── Stack founder full-grid at tablet ───────────────────── */
@media (max-width: 900px) {
  .founder-full-grid,
  .founder-full-grid.reverse { grid-template-columns: 1fr !important; }
  /* Portrait/sidebar must appear first on mobile regardless of grid source order */
  .founder-full-grid.reverse .founder-sidebar { order: -1 !important; }
  .founder-sidebar { position: static !important; top: unset; margin-bottom: 32px; }
  .founder-portrait { width: 150px; height: 150px; }
  .mobile-stack { grid-template-columns: 1fr !important; }
}

/* ── Mobile ≤ 768px ──────────────────────────────────────── */
@media (max-width: 768px) {

  /* Typography */
  .display-lg   { font-size: clamp(1.8rem, 8vw, 3.5rem); }
  .display-md   { font-size: clamp(1.5rem, 6.5vw, 2.8rem); }
  .elegant-xl   { font-size: clamp(1.1rem, 3.5vw, 1.6rem); }
  .about-quote  { font-size: clamp(1.2rem, 4vw, 1.8rem); padding-left: 24px; }
  .page-hero-title { line-height: 0.9; }

  /* Page hero inner pages */
  .page-hero { min-height: 36vh; padding-bottom: 44px; }
  .page-hero-sub { font-size: 0.9rem; }

  /* Section spacing */
  .section { padding: 56px 0; }
  .section-header { margin-bottom: 32px; }

  /* Homepage hero */
  .hero-badge  { display: none; }
  .hero-sub    { font-size: clamp(0.95rem, 3vw, 1.15rem); }
  .hero-content { padding-top: calc(var(--nav-height) + 32px); }

  /* Stat items */
  .stat-item { padding: 24px 12px; }

  /* Founder cards (homepage mini) */
  .founder-card { padding: 28px 22px; }

  /* Founder full page — sidebar */
  .founder-portrait { width: 130px; height: 130px; font-size: 2.8rem; }

  /* OS section overlay — more even on mobile since layout stacks */
  .os-section-overlay {
    background:
      linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.35) 100%),
      linear-gradient(to right,  rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.2) 100%);
  }

  /* Film info box padding reduction on mobile */
  .film-info { padding: 0; }

  /* Collab person cards */
  .collab-person-card  { padding: 22px 18px; }
  .collab-person-avatar { width: 60px; height: 60px; }

  /* Press cards */
  .press-card { padding: 20px 18px; }

  /* Positioning card (AI cinema) */
  .positioning-card { padding: 24px 20px; }

  /* CTA buttons stack */
  .cta-section .btn { display: block; width: auto; }

  /* Contact details gap */
  .contact-detail { gap: 12px; }
  .contact-detail-icon { width: 36px; height: 36px; flex-shrink: 0; }

  /* Intro overlay — full dynamic viewport height on mobile */
  #intro-overlay { height: 100dvh; }
  #intro-overlay video { object-position: center center; }
  /* All bg videos — center crop on mobile */
  .hero-video-bg    { object-position: center center; }
  .page-hero-video  { object-position: center top; }
  .ai-hero-video    { object-position: center center; }
  .os-bg-video      { object-position: center center; }

  /* Film feature grid — remove excess gap when stacked */
  .film-feature-grid { gap: clamp(28px, 5vw, 48px); }

  /* Ground-zero / films.html Dubey bio grid */
  .mobile-stack { grid-template-columns: 1fr !important; }

  /* Collaborations logo grid */
  .collab-logo-row { grid-template-columns: repeat(3, 1fr) !important; }

  /* About quote quotation mark */
  .about-quote::before { font-size: 3.5rem; }

  /* ── Footer — compact layout: brand row + equal 3-col nav ── */
  footer { padding: 36px 0 18px; }
  .footer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px 14px;
    margin-bottom: 20px;
  }
  .footer-brand {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    align-items: start;
    gap: 0 16px;
  }
  .footer-logo { grid-row: 1; grid-column: 1; margin-bottom: 0; }
  .footer-social { grid-row: 1; grid-column: 2; margin-top: 8px; }
  .footer-tagline {
    grid-column: 1 / -1;
    grid-row: 2;
    max-width: 100%;
    font-size: 0.85rem;
    margin-top: 12px;
    margin-bottom: 0;
  }
  .footer-col { overflow: hidden; }
  .footer-col h4 { margin-bottom: 8px; font-size: 0.65rem; }
  .footer-col ul { gap: 5px; }
  .footer-col ul li { overflow-wrap: break-word; word-break: break-word; }
  .footer-col ul li a,
  .footer-col ul li { font-size: 0.78rem; }
  .footer-bottom { padding-top: 14px; gap: 6px; flex-direction: column; text-align: center; }

  /* ── OS section info box — compact on mobile ── */
  .os-section .film-info { padding: 18px !important; }
  .os-section .film-credits { grid-template-columns: 1fr 1fr; }
  .os-section .film-credit-item { padding: 5px 0; font-size: 0.8rem; }
  .os-section .film-credit-item strong { font-size: 0.65rem; }
  .os-section .film-synopsis {
    font-size: 0.82rem; line-height: 1.55; margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .os-section .film-meta { margin-bottom: 12px; }
  .os-section .badge-streaming { margin-top: 14px; }
  /* Hide decorative left-col cards in OS sections — heading stays visible */
  .os-deco-card { display: none !important; }

  /* ── Collaborations people — horizontal scroll carousel ── */
  .collab-people-scroll {
    display: flex !important;
    overflow-x: auto;
    overflow-y: visible;
    gap: 14px;
    padding-bottom: 12px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-left: calc(-1 * var(--pad));
    margin-right: calc(-1 * var(--pad));
    padding-left: var(--pad);
    padding-right: var(--pad);
  }
  .collab-people-scroll::-webkit-scrollbar { display: none; }
  .collab-people-scroll .collab-person-card {
    flex: 0 0 190px;
    scroll-snap-align: start;
    padding: 18px 16px;
  }
  .collab-people-scroll .collab-person-bio { display: none; }
  .collab-people-scroll .collab-person-co { font-size: 0.72rem; margin-bottom: 0; }
}

/* ── Small mobile ≤ 480px ────────────────────────────────── */
@media (max-width: 480px) {

  :root { --section-gap: 52px; }

  /* Page hero */
  .page-hero { min-height: 28vh; }

  /* Hero CTA — full width buttons */
  .hero-cta .btn  { width: 100%; justify-content: center; text-align: center; }
  .hero-cta       { gap: 12px; }

  /* Film titles */
  .film-title { font-size: clamp(1.8rem, 9vw, 2.6rem); }
  .film-year  { font-size: 1.1rem; }

  /* Stats */
  .stat-item { padding: 18px 8px; }
  .stat-number { font-size: clamp(1.5rem, 6vw, 2.2rem); }
  .stat-label  { font-size: 0.65rem; }

  /* Founder full grid */
  .founder-portrait { width: 110px; height: 110px; font-size: 2.2rem; }

  /* Film credits single col already set — ensure padding OK */
  .film-credit-item { padding: 6px 0; }

  /* Collab logo grid — 2 cols on small phones */
  .collab-logo-row { grid-template-columns: repeat(2, 1fr) !important; }

  /* Section header divider */
  .divider-gold { margin: 12px 0; }

  /* CTA buttons */
  .cta-section .btn + .btn { margin-top: 12px; }

  /* Cast list wrapping */
  .cast-name { font-size: 0.72rem; padding: 3px 10px; }

  /* Marquee */
  .marquee-text { font-size: 0.72rem; }

  /* Press card */
  .press-card { padding: 16px; }

  /* Form */
  textarea { min-height: 110px; }

  /* Collab person cards */
  .collab-person-card { padding: 18px 16px; }

  /* Intro video size */
  #intro-overlay { height: 100dvh; }
}