/* ═══════════════════════════════════════════════════════════════
   SEVENTH SENSE PRODUCTIONS — style.css
   Design System · Components · Sections · Responsive
   ═══════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────
   DESIGN TOKENS
   ────────────────────────────────────────── */
:root {
  /* Colour */
  --bg:          #000000;
  --bg2:         #080808;
  --bg3:         #0e0e0e;
  --surface:     #141414;
  --surface2:    #1c1c1c;
  --border:      rgba(212,175,55,.15);
  --border-soft: rgba(212,175,55,.08);
  --text:        #e8e5df;
  --muted:       #7a7a7a;
  --accent:      #d4af37;
  --accent2:     #f3e5ab;
  --gold-glow:   rgba(212,175,55,.12);
  --white:       #ffffff;

  /* Glass */
  --glass-bg:     rgba(14,14,14,.65);
  --glass-border: rgba(212,175,55,.18);

  /* Map filter (dark) */
  --map-filter:       grayscale(100%) invert(95%) contrast(85%) opacity(.8);
  --map-filter-hover: grayscale(80%)  invert(95%) contrast(90%) opacity(1);

  /* Typography */
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans:  'Montserrat', system-ui, sans-serif;

  /* Motion */
  --ease: cubic-bezier(.25,.46,.45,.94);
  --tr:   .4s var(--ease);
}

/* Light / Parchment theme */
[data-theme="light"] {
  --bg:          #f4f1eb;
  --bg2:         #ede9e0;
  --bg3:         #e5e0d5;
  --surface:     #ddd8ce;
  --surface2:    #d4cfc5;
  --border:      rgba(0,0,0,.09);
  --border-soft: rgba(0,0,0,.05);
  --text:        #1a1916;
  --muted:       #6a6860;
  --white:       #1a1916;
  --accent:      #91721e; /* WCAG AA Compliant Contrast Ratio */
  --gold-glow:   rgba(145,114,30,.1);
  --glass-bg:    rgba(244,241,235,.7);
  --glass-border:rgba(0,0,0,.08);
  --map-filter:       grayscale(20%) opacity(.95);
  --map-filter-hover: grayscale(0%)  opacity(1);
}

/* ──────────────────────────────────────────
   RESET & BASE
   ────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html  { scroll-behavior:smooth; font-size:16px; }
body  {
  background: var(--bg);
  color:      var(--text);
  font-family:var(--font-sans);
  font-weight:300;
  line-height:1.7;
  overflow-x: hidden;
  transition: background var(--tr), color var(--tr);
}
::selection { background:var(--accent); color:#000; }
a   { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }

/* Focus Accessibility */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 4px;
}

/* Scrollbar */
::-webkit-scrollbar       { width:4px; height:4px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--accent); border-radius:2px; }

/* ──────────────────────────────────────────
   PRELOADER
   ────────────────────────────────────────── */
#preloader {
  position:fixed; inset:0; z-index:999999;
  background:#000;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:1.8rem;
  transition: opacity .9s ease, visibility .9s ease;
}
#preloader.hide { opacity:0; visibility:hidden; }

.loader-emblem {
  width:64px; height:64px;
  border:1px solid rgba(212,175,55,.3);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  animation: loaderSpin 8s linear infinite;
}
.loader-emblem svg { width:38px; height:38px; }
@keyframes loaderSpin { to { transform:rotate(360deg); } }

.loader-text {
  font-family:var(--font-serif);
  font-size:1.1rem; color:#d4af37;
  letter-spacing:.45em; text-transform:uppercase; font-weight:400;
  animation: pulseOpacity 1.4s infinite alternate;
}
.loader-bar {
  width:120px; height:1px;
  background:rgba(212,175,55,.15);
  position:relative; overflow:hidden;
}
.loader-bar::after {
  content:'';
  position:absolute; top:0; left:-100%; width:100%; height:100%;
  background:linear-gradient(90deg, transparent, #d4af37, transparent);
  animation: loaderSweep 1.6s ease infinite;
}
@keyframes loaderSweep { to { left:100%; } }
@keyframes pulseOpacity { 0%{opacity:.2} 100%{opacity:1} }

/* ──────────────────────────────────────────
   FILM GRAIN CANVAS
   ────────────────────────────────────────── */
/* Film grain overlay — DISABLED to remove TV static effect */
#grain-canvas {
  display: none !important;
}
[data-theme="light"] #grain-canvas { display: none !important; }

/* ──────────────────────────────────────────
   CUSTOM CURSOR — VIEWFINDER
   ────────────────────────────────────────── */
.custom-cursor {
  position:fixed; top:0; left:0;
  width:8px; height:8px;
  background:var(--accent); border-radius:50%;
  pointer-events:none; z-index:99999;
  transform:translate(-50%,-50%);
  transition: width .28s var(--ease), height .28s var(--ease),
              background-color .28s, border-color .28s;
  mix-blend-mode:difference;
  display:none;
}
@media (hover:hover) and (pointer:fine) {
  .custom-cursor { display:flex; align-items:center; justify-content:center; }
  body { cursor:none; }
  a,button,input,select,textarea,.p-card,.p-filter-btn { cursor:none; }
}
.cursor-corner {
  position:absolute; width:8px; height:8px;
  border:1.5px solid var(--accent);
  opacity:0;
  transition: opacity .28s var(--ease), transform .28s var(--ease);
  pointer-events:none;
}
.cursor-corner.tl { top:-3px;    left:-3px;  border-right:0;  border-bottom:0; transform:translate( 4px, 4px); }
.cursor-corner.tr { top:-3px;    right:-3px; border-left:0;   border-bottom:0; transform:translate(-4px, 4px); }
.cursor-corner.bl { bottom:-3px; left:-3px;  border-right:0;  border-top:0;    transform:translate( 4px,-4px); }
.cursor-corner.br { bottom:-3px; right:-3px; border-left:0;   border-top:0;    transform:translate(-4px,-4px); }
.custom-cursor.expand {
  width:46px; height:46px;
  background:transparent; border:1.5px solid var(--accent);
}
.custom-cursor.expand .cursor-corner { opacity:1; transform:translate(0,0); }

/* ──────────────────────────────────────────
   NAVIGATION — GLASSMORPHIC ON SCROLL
   ────────────────────────────────────────── */
#nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:1.2rem 5vw;
  display:flex; align-items:center; justify-content:space-between;
  background:transparent;
  transition: background var(--tr), backdrop-filter var(--tr),
              -webkit-backdrop-filter var(--tr), padding var(--tr),
              border-color var(--tr);
  border-bottom:1px solid transparent;
}
#nav.scrolled {
  background: var(--glass-bg);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  padding:.85rem 5vw;
  border-bottom:1px solid var(--glass-border);
}

.logo { display:flex; align-items:center; gap:.9rem; }
.logo-img { height:42px; width:auto; flex-shrink:0; transition:transform .3s ease; }
.logo:hover .logo-img { transform:scale(1.05) rotate(3deg); }
.logo-text { display:flex; flex-direction:column; line-height:1.1; }
.logo-name {
  font-family:var(--font-serif);
  font-size:1.05rem; font-weight:500;
  color:var(--white); letter-spacing:.08em; text-transform:uppercase;
}
.logo-sub {
  font-size:.6rem; font-weight:400;
  color:var(--accent); letter-spacing:.25em; text-transform:uppercase;
}

.nav-links { display:flex; gap:2.5rem; align-items:center; list-style:none; }
.nav-links a {
  font-size:.72rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--white); transition:color var(--tr);
  position:relative; padding-bottom:.25rem;
  white-space:nowrap;
}
.nav-links a::after {
  content:''; position:absolute; bottom:0; left:0;
  width:0; height:1px; background:var(--accent);
  transition:width .35s var(--ease);
}
.nav-links a:hover { color:var(--accent); }
.nav-links a:hover::after { width:100%; }

.nav-right { display:flex; align-items:center; gap:1.2rem; }

.theme-btn {
  background:none; border:1px solid var(--border); color:var(--muted);
  cursor:none; padding:.4rem .65rem; border-radius:4px;
  font-size:.9rem; line-height:1;
  transition: border-color var(--tr), color var(--tr), transform var(--tr);
  font-family:var(--font-sans);
}
.theme-btn:hover { border-color:var(--accent); color:var(--accent); transform:rotate(180deg); }

.nav-cta {
  background:var(--accent); color:#000 !important;
  padding:.6rem 1.6rem; border-radius:2px;
  font-size:.72rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  display:inline-block;
  transition: background var(--tr), box-shadow .2s;
}
.nav-cta:hover { background:var(--accent2); box-shadow:0 8px 24px rgba(212,175,55,.2); }

.hamburger {
  display:none; flex-direction:column; gap:5px;
  cursor:none; background:none; border:none; padding:.4rem;
}
.hamburger span {
  display:block; width:24px; height:1.5px;
  background:var(--white); transition:all .3s;
}

/* Mobile menu */
.mobile-menu {
  display:none; position:fixed; inset:0; z-index:99;
  background:var(--bg); padding:7rem 5vw 3rem;
  flex-direction:column; gap:2rem;
}
.mobile-menu.open { display:flex; }
.mobile-menu a {
  font-family:var(--font-serif); font-size:2.2rem; font-weight:300;
  color:var(--white); border-bottom:1px solid var(--border); padding-bottom:1rem;
  transition:color .3s;
}
.mobile-menu a:hover { color:var(--accent); }

/* ──────────────────────────────────────────
   HERO — FULL-BLEED IMAGE, LEFT-ALIGNED
   ────────────────────────────────────────── */
#hero {
  min-height:100svh;
  display:flex; flex-direction:column;
  padding:clamp(90px,13vh,120px) 5vw 0;
  position:relative; overflow:hidden;
}

.hero-bg-image {
  position:absolute; inset:0; z-index:0;
  background: url('../assets/hero-bg.png') center center / cover no-repeat;
  transform:scale(1.04);
  transition:transform 8s ease;
}
#hero:hover .hero-bg-image { transform:scale(1); }

.hero-overlay {
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(to right,
      rgba(0,0,0,.93) 0%,
      rgba(0,0,0,.72) 42%,
      rgba(0,0,0,.28) 68%,
      transparent    100%),
    linear-gradient(to top,
      rgba(0,0,0,.88) 0%,
      transparent    35%);
}
[data-theme="light"] .hero-overlay {
  background:
    linear-gradient(to right,
      rgba(20,16,10,.88) 0%,
      rgba(20,16,10,.6)  45%,
      transparent       100%),
    linear-gradient(to top,
      rgba(20,16,10,.8) 0%,
      transparent       35%);
}

.hero-content {
  position:relative; z-index:2;
  flex:1;
  display:flex; flex-direction:column; justify-content:center;
  max-width:min(90vw, 1050px);
  padding-bottom:4rem;
}

.hero-tag {
  display:inline-block;
  font-size:.7rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--accent); margin-bottom:1.8rem;
  border:1px solid rgba(212,175,55,.35);
  padding:.4rem 1.2rem;
}

.kinetic-wrap {
  will-change:transform, opacity;
  transform:translate3d(0, var(--kY,0px), 0);
  opacity:var(--kO,1);
}

h1 {
  font-family:var(--font-serif);
  font-size:clamp(2rem, 4.8vw, 4.5rem);
  font-weight:300; line-height:1.02;
  color:var(--white); margin-bottom:1.8rem;
  text-transform:uppercase; letter-spacing:.01em;
  perspective:600px;
}
h1 .line1 { display:block; }
h1 .line2 { display:block; font-style:italic; color:var(--accent); font-weight:400; }
h1 .char  { display:inline-block; transform-style:preserve-3d; backface-visibility:hidden; }
h1 .word  { display:inline-block; white-space:nowrap; }

.hero-sub {
  font-size:clamp(.95rem, 1.4vw, 1.1rem);
  color:rgba(232,229,223,.82);
  max-width:520px; line-height:1.85;
  margin-bottom:2.8rem;
}
[data-theme="light"] .hero-sub { color:rgba(26,25,22,.75); }

.hero-actions { display:flex; gap:1.2rem; flex-wrap:wrap; align-items:center; }

.btn-primary {
  background:var(--accent); color:#000 !important;
  padding:1rem 2.4rem; border-radius:2px;
  font-size:.75rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  display:inline-block;
  transition: background .25s, box-shadow .25s;
}
.btn-primary:hover { background:var(--accent2); box-shadow:0 10px 30px rgba(212,175,55,.2); }

.btn-ghost {
  border:1px solid rgba(212,175,55,.35); color:var(--white);
  padding:1rem 2.4rem; border-radius:2px;
  font-size:.75rem; letter-spacing:.1em; text-transform:uppercase;
  display:inline-block;
  transition:border-color .25s, color .25s;
}
.btn-ghost:hover { border-color:var(--accent); color:var(--accent); }

.btn-reel {
  background:transparent;
  border:1px solid rgba(212,175,55,.3);
  color:var(--accent);
  padding:.9rem 1.8rem; border-radius:2px;
  font-size:.75rem; font-family:var(--font-sans); font-weight:400;
  letter-spacing:.1em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:.7rem;
  cursor:none;
  transition:border-color .25s, background .25s;
}
.btn-reel:hover { border-color:var(--accent); background:rgba(212,175,55,.06); }
.reel-play-icon {
  width:22px; height:22px;
  border:1px solid currentColor; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:.48rem; padding-left:1px; flex-shrink:0;
  transition:background .25s, border-color .25s, color .25s;
}
.btn-reel:hover .reel-play-icon { background:var(--accent); border-color:var(--accent); color:#000; }

/* Scroll cue re-anchored securely to the base */
.hero-scroll {
  position:absolute;
  bottom:3rem;
  left:5vw; z-index:2;
  display:flex; flex-direction:column; align-items:flex-start; gap:.7rem;
  font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted);
  pointer-events:none;
}
.scroll-line {
  width:1px; height:36px;
  background:linear-gradient(to bottom, var(--accent), transparent);
  animation:scrollLine 2s ease infinite;
}
@keyframes scrollLine {
  0%  { transform:scaleY(0); transform-origin:top; }
  50% { transform:scaleY(1); transform-origin:top; }
  51% { transform:scaleY(1); transform-origin:bottom; }
  100%{ transform:scaleY(0); transform-origin:bottom; }
}

/* ──────────────────────────────────────────
   MARQUEE FILM-REEL TICKER
   ────────────────────────────────────────── */
.marquee-strip {
  /* Asymmetric padding to give descenders extra room */
  padding: 1rem 0 1.5rem 0;
  overflow: hidden;
  background: var(--bg2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  position: relative; z-index: 2;
  /* Use block layout to let the padding naturally wrap the text */
  display: block;
}
.marquee-strip::before,
.marquee-strip::after {
  content:''; position:absolute; top:0; bottom:0; width:80px; z-index:3;
  pointer-events:none;
}
.marquee-strip::before { left:0;  background:linear-gradient(to right, var(--bg2), transparent); }
.marquee-strip::after  { right:0; background:linear-gradient(to left,  var(--bg2), transparent); }
.marquee-track {
  display:inline-block; vertical-align: middle;
  white-space:nowrap;
  animation:marqueeScroll 32s linear infinite;
  will-change:transform;
}
.marquee-track:hover { animation-play-state:paused; }
@keyframes marqueeScroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.marquee-item {
  font-family:var(--font-serif); font-size:1.4rem; font-weight:400;
  color:var(--white); opacity:.5; letter-spacing:.04em;
  padding:0 .6rem; transition:opacity .3s;
  line-height: normal; display: inline-block; vertical-align: middle;
  position: relative; top: -4px;
}
.marquee-item:hover { opacity:1; }
.marquee-sep {
  color:var(--accent); font-size:.5rem; opacity:.55;
  padding:0 .3rem; display:inline-block; vertical-align:middle;
}

/* ──────────────────────────────────────────
   REVEAL ANIMATIONS
   ────────────────────────────────────────── */
.reveal { opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-delay-1 { transition-delay:.1s; }
.reveal-delay-2 { transition-delay:.2s; }
.reveal-delay-3 { transition-delay:.3s; }
.reveal-delay-4 { transition-delay:.4s; }

/* ──────────────────────────────────────────
   SECTION BASE + CLIP-PATH DIVIDERS
   ────────────────────────────────────────── */
section { padding:clamp(6rem,11vw,10rem) 5vw; position:relative; z-index:1; }
.section-tag {
  font-size:.72rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--accent); margin-bottom:1.5rem; display:block;
}
h2 {
  font-family:var(--font-serif); font-size:clamp(2.4rem,4.8vw,4rem);
  font-weight:300; line-height:1.1; color:var(--white); margin-bottom:1.5rem;
}
h2 em { font-style:italic; color:var(--accent); font-weight:400; }
.body-text { color:var(--muted); max-width:600px; line-height:1.85; font-size:1rem; }

/* Diagonal film-cut between sections */
.clip-enter {
  clip-path:polygon(0 3vw, 100% 0%, 100% 100%, 0% 100%);
  margin-top:-3vw;
  padding-top:calc(clamp(6rem,11vw,10rem) + 3vw) !important;
  z-index:2;
  pointer-events:none; /* Prevents invisible clipped boundaries from intercepting clicks */
}
.clip-enter > * { pointer-events:auto; }

/* Elegant gold divider line between sections */
section + section::before,
section + .clip-enter::before {
  content: '';
  display: block;
  width: 60%;
  max-width: 500px;
  height: 1px;
  margin: 0 auto 4rem auto;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.4;
}

/* Complete Stacking Overlap Resolution */
#offerings  { z-index:2; }
#portfolio  { z-index:30; position:relative; } /* Dominant stack level completely cures side-scroll freeze */
#credentials{ z-index:4; }
#press      { z-index:5; }
#slate-tease{ z-index:6; }
#leadership { z-index:7; }
#contact    { z-index:9; }

/* ──────────────────────────────────────────
   ABOUT & MERGED PILLARS
   ────────────────────────────────────────── */
#about { background:var(--bg); }
.about-grid { display:grid; grid-template-columns:1.2fr 1fr; gap:8vw; align-items:center; }
.about-text .body-text { margin-bottom:1.5rem; }

/* Merged differentiators formatting */
.about-differentiators {
  display:flex; flex-direction:column; gap:1.6rem;
  margin-top:2.5rem; padding-top:2.5rem;
  border-top:1px solid var(--border);
}
.diff-item {
  border-left:1px solid var(--accent);
  padding-left:1.2rem;
}
.diff-item h3 {
  font-family:var(--font-serif); font-size:1.4rem;
  color:var(--white); font-weight:400; margin-bottom:.4rem;
}

.about-visual {
  position:relative; aspect-ratio:1/1;
  background:var(--surface); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; padding:4rem;
}
.about-visual::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at center, var(--gold-glow), transparent 70%);
}
.about-visual img { width:100%; max-width:320px; position:relative; z-index:1; }

.about-stats {
  display:grid; grid-template-columns:1fr 1fr; gap:2rem;
  margin-top:3rem; border-top:1px solid var(--border); padding-top:2rem;
}
.stat { padding-left:1rem; border-left:2px solid var(--accent); }
.stat-num { font-family:var(--font-serif); font-size:2.2rem; color:var(--white); font-weight:400; line-height:1; }
.stat-label { font-size:.72rem; color:var(--accent); letter-spacing:.1em; margin-top:.4rem; text-transform:uppercase; }

/* ──────────────────────────────────────────
   OFFERINGS
   ────────────────────────────────────────── */
#offerings { background:var(--bg2); }
.services-header { margin-bottom:5rem; max-width:680px; }
.services-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem; }

.service-card {
  background:var(--bg); border:1px solid var(--border);
  padding:3.5rem 3rem; position:relative; overflow:hidden;
  transition:background var(--tr), border-color var(--tr), transform var(--tr);
}
.service-card::after {
  content:''; position:absolute; bottom:0; left:0; width:100%; height:2px;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform .5s var(--ease);
}
.service-card:hover { background:var(--bg3); border-color:rgba(212,175,55,.3); transform:translateY(-4px); }
.service-card:hover::after { transform:scaleX(1); }
.service-num {
  font-family:var(--font-serif); font-size:4rem; color:var(--bg2); font-weight:600;
  -webkit-text-stroke:1px var(--border); position:absolute; top:1rem; right:1.5rem;
  transition:all var(--tr);
}
.service-card:hover .service-num { -webkit-text-stroke:1px var(--accent); color:var(--gold-glow); }
.service-card h3 { font-family:var(--font-serif); font-size:2rem; font-weight:400; color:var(--white); margin-bottom:1rem; position:relative; z-index:2; }
.service-card p  { font-size:1rem; color:var(--muted); line-height:1.7; position:relative; z-index:2; }

/* ──────────────────────────────────────────
   PORTFOLIO — BENTO GRID + FILMSTRIP
   ────────────────────────────────────────── */
#portfolio { background:var(--bg); }
.portfolio-top-bar {
  display:flex; justify-content:space-between; align-items:flex-end;
  margin-bottom:4rem; flex-wrap:wrap; gap:2rem;
}
.p-filter-group { display:flex; gap:1rem; flex-wrap:wrap; }
.p-filter-btn {
  background:transparent; border:1px solid var(--border); color:var(--muted);
  padding:.55rem 1.1rem; border-radius:2px;
  font-family:var(--font-sans); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  cursor:none; transition:border-color var(--tr), color var(--tr);
}
.p-filter-btn:hover,.p-filter-btn.active { border-color:var(--accent); color:var(--accent); }

/* Filmstrip desktop hint */
.filmstrip-hint { display:none; align-items:center; gap:1.5rem; }
.filmstrip-scroll-label { font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.filmstrip-arrow { color:var(--accent); animation:arrowPulse 1.8s ease infinite; }
@keyframes arrowPulse { 0%,100%{transform:translateX(0);opacity:.5} 50%{transform:translateX(6px);opacity:1} }
.film-frame-counter { font-family:var(--font-serif); font-size:1rem; color:var(--accent); letter-spacing:.05em; min-width:3ch; }

/* Horizontal Flip Carousel */
.portfolio-h-track { width:100%; overflow:hidden; }
.portfolio-grid {
  display:flex; gap:2rem; overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:2rem; scroll-behavior:smooth;
}
.portfolio-grid::-webkit-scrollbar { display:none; }
.p-card {
  position:relative; flex:0 0 350px; height:480px; scroll-snap-align:start;
  perspective:1200px; cursor:pointer; background:transparent; border:none;
}
.p-card.hide { display:none; }
.portfolio-grid.disable-clones .is-clone { display: none !important; }

.p-card-inner {
  position:relative; width:100%; height:100%;
  transform-style:preserve-3d; transition:transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  border:1px solid var(--border);
}
.p-card:hover .p-card-inner { border-color:rgba(212,175,55,.35); }
.p-card.is-flipped .p-card-inner { transform:rotateY(180deg); border-color:var(--accent); }

.p-card-front, .p-card-back {
  position:absolute; inset:0; backface-visibility:hidden;
  display:flex; flex-direction:column; overflow:hidden; background:var(--surface);
}
.p-card-back {
  transform:rotateY(180deg); padding:4rem 2.2rem 2.2rem;
  background:linear-gradient(to top, rgba(0,0,0,.96) 0%, rgba(0,0,0,.8) 48%, rgba(0,0,0,.6) 100%);
  overflow-y:auto;
}

.p-thumb { position:absolute; inset:0; background:var(--bg3); transition:transform .8s var(--ease); }
.p-poster { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0.8; transition:opacity .3s; z-index:0; }
.p-card:hover .p-poster { opacity:1; }
.p-card:hover .p-thumb { transform:scale(1.05); }
.p-visual-text {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-serif); font-size:3rem; text-align:center; padding:1rem;
  color:rgba(255,255,255,.05); font-weight:600; text-transform:uppercase; white-space:normal; line-height:1;
}

.p-front-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.96) 0%, rgba(0,0,0,.4) 50%, rgba(0,0,0,0) 100%);
  display:flex; flex-direction:column; justify-content:flex-end; padding:2.2rem;
}

.p-cat { font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin-bottom:.7rem; }
.p-title { font-family:var(--font-serif); font-size:1.9rem; color:#fff; font-weight:400; margin-bottom:.4rem; line-height:1.05; }
.p-tagline { font-family:var(--font-serif); font-size:1.1rem; color:var(--accent); font-style:italic; margin-bottom:.6rem; line-height:1.3; }
.p-desc { font-size:.92rem; color:rgba(255,255,255,.68); line-height:1.6; margin-bottom:.8rem; }
.p-cast { font-size:.8rem; color:rgba(255,255,255,.5); line-height:1.4; }
.p-cast strong { color:rgba(255,255,255,.8); font-weight:500; }

.p-card-back::-webkit-scrollbar { width:4px; }
.p-card-back::-webkit-scrollbar-track { background:transparent; }
.p-card-back::-webkit-scrollbar-thumb { background:rgba(212,175,55,.3); border-radius:4px; }
.p-card-back::-webkit-scrollbar-thumb:hover { background:rgba(212,175,55,.6); }

.p-flip-icon {
  position:absolute; top:1.2rem; right:1.2rem;
  width:32px; height:32px; border:1px solid rgba(212,175,55,.35); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.5); backdrop-filter:blur(5px);
  color:var(--accent); font-size:1.2rem; line-height:1; font-family:var(--font-sans);
  transition:all .4s var(--ease); z-index:10;
}
.p-card:hover .p-flip-icon { border-color:var(--accent); background:var(--accent); color:#000; }
.p-card-back .p-flip-icon { transform:rotate(45deg); font-size:1.5rem; line-height:0.9; }

@media(max-width:1024px) {
  .filmstrip-hint { display:flex; margin-bottom:2rem; }
}

@media(max-width:768px) {
  .p-card { flex:0 0 280px; height:420px; }
  .p-visual-text { font-size:2.5rem; }
}

/* ──────────────────────────────────────────
   STATS / CREDENTIALS — TIER 2
   ────────────────────────────────────────── */
#credentials {
  background:var(--bg2);
  padding:clamp(5rem,9vw,8rem) 5vw;
}
.cred-inner { max-width:1100px; margin:0 auto; }
.cred-header { text-align:center; margin-bottom:5rem; }
.cred-header .section-tag { display:block; text-align:center; }

.cred-stats {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:0; border:1px solid var(--border);
  position:relative;
}
.cred-stats::before {
  content:''; position:absolute; top:0; left:0; width:40px; height:1px; background:var(--accent);
}
.cred-stats::after {
  content:''; position:absolute; bottom:0; right:0; width:40px; height:1px; background:var(--accent);
}

.cred-stat {
  padding:3rem 2.5rem;
  border-right:1px solid var(--border);
  text-align:center;
  transition:background .35s;
  position:relative;
}
.cred-stat:last-child { border-right:none; }
.cred-stat:hover { background:rgba(212,175,55,.03); }

.cred-num {
  font-family:var(--font-serif);
  font-size:clamp(3rem,5vw,4.5rem);
  color:var(--white); font-weight:300; line-height:1;
  margin-bottom:.8rem;
}
.cred-num em { font-style:normal; color:var(--accent); }
.cred-label {
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); line-height:1.5;
}

.ott-row {
  margin-top:4rem;
  border-top:1px solid var(--border);
  padding-top:3rem;
  display:flex; flex-direction:column; align-items:center; gap:1.8rem;
}
.ott-label {
  font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted);
}
.ott-logos {
  display:flex; gap:4rem; flex-wrap:wrap; justify-content:center; align-items:center;
}
img.ott-logo {
  height:45px; width:auto; max-width:150px; object-fit:contain;
  /* mix-blend-mode: screen makes dark/black pixels transparent on the dark background,
     so only the brand colors (Netflix red, Hotstar purple, Prime blue, etc.) are visible */
  mix-blend-mode: screen;
  opacity:.85;
  filter: brightness(1.1) saturate(1.2);
  transition: opacity .35s, transform .35s, filter .35s;
}
img.ott-logo:hover {
  opacity:1;
  filter: brightness(1.3) saturate(1.3) drop-shadow(0 0 12px rgba(255,255,255,.2));
  transform:scale(1.06);
}
/* On light theme, multiply blends dark colors onto white — opposite of screen */
[data-theme="light"] img.ott-logo {
  mix-blend-mode: multiply;
  opacity:.8;
  filter: none;
}
[data-theme="light"] img.ott-logo:hover {
  opacity:1;
  filter: drop-shadow(0 0 8px rgba(0,0,0,.15));
  transform:scale(1.06);
}



/* Apply to inline brand icons in cards */
img[src*="Brand Icons/"]:not(.ott-logo):not(.inline-ott-logo) {
  filter: brightness(0) invert(1);
}
[data-theme="light"] img[src*="Brand Icons/"]:not(.ott-logo):not(.inline-ott-logo) {
  filter: brightness(0);
}

img.inline-ott-logo {
  height: 18px;
  width: auto;
  vertical-align: middle;
  margin-left: 0.5rem;
  filter: brightness(0) invert(1) drop-shadow(0 0 0px transparent);
  transition: transform .35s;
}
[data-theme="light"] img.inline-ott-logo { filter: brightness(0) drop-shadow(0 0 0px transparent); }

img.card-platform-logo {
  height: 28px;
  width: auto;
  filter: brightness(0) invert(1) drop-shadow(0 0 0px transparent);
  opacity: 0.9;
}
[data-theme="light"] img.card-platform-logo { filter: brightness(0) drop-shadow(0 0 0px transparent); }

.card-badge {
  position: absolute;
  top: 1.2rem;
  left: 1.2rem;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}
img.inline-ott-logo:hover { filter: brightness(0) invert(1) drop-shadow(0 0 5px rgba(212,175,55,.6)); transform:scale(1.05); }
[data-theme="light"] img.inline-ott-logo:hover { filter: brightness(0) drop-shadow(0 0 5px rgba(212,175,55,.6)); }

/* ──────────────────────────────────────────
   PRESS / MEDIA MENTIONS — TIER 2
   ────────────────────────────────────────── */
#press {
  background:var(--bg);
  padding:clamp(6rem,11vw,10rem) 5vw;
}
.press-header { margin-bottom:4rem; max-width:600px; }

.pub-strip {
  display:flex; gap:3.5rem; flex-wrap:wrap; align-items:center;
  justify-content:flex-start;
  margin-bottom:4rem;
  padding-bottom:3rem;
  border-bottom:1px solid var(--border);
}
.pub-name {
  font-family:var(--font-serif); font-size:1.3rem; font-weight:400;
  color:var(--white); letter-spacing:.04em;
  opacity:.3; transition:opacity .35s, color .35s;
}
.pub-name:hover { opacity:.8; color:var(--accent); }

.press-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }

.press-card {
  background:var(--glass-bg);
  backdrop-filter:blur(14px) saturate(130%);
  -webkit-backdrop-filter:blur(14px) saturate(130%);
  border:1px solid var(--glass-border);
  padding:2.4rem;
  position:relative; overflow:hidden;
  transition:border-color .35s, transform .35s;
}
.press-card::before {
  content:''; position:absolute; top:0; left:0; width:36px; height:1px; background:var(--accent);
}
.press-card:hover { border-color:rgba(212,175,55,.4); transform:translateY(-4px); }

.press-pub {
  font-size:.65rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent); margin-bottom:1.2rem; display:block;
}
.press-card h4 {
  font-family:var(--font-serif); font-size:1.4rem; color:var(--white);
  font-weight:400; line-height:1.3; margin-bottom:1rem;
}
.press-quote {
  font-size:.9rem; color:var(--muted); line-height:1.7;
  font-style:italic; margin-bottom:1.6rem;
  padding-left:1rem; border-left:1px solid var(--border);
}
.press-meta {
  display:flex; align-items:center; justify-content:space-between;
}
.press-date { font-size:.68rem; color:var(--muted); letter-spacing:.08em; }
.press-read {
  font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent); display:flex; align-items:center; gap:.4rem;
  transition:gap .3s;
}
.press-read:hover { gap:.7rem; }

/* ──────────────────────────────────────────
   PRODUCTION SLATE TEASER — TIER 2
   ────────────────────────────────────────── */
#slate-tease {
  background:var(--surface);
  padding:clamp(5rem,9vw,8rem) 5vw;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.slate-tease-inner {
  display:flex; justify-content:space-between; align-items:flex-end;
  margin-bottom:3.5rem; gap:2rem; flex-wrap:wrap;
}
.slate-tease-link {
  font-size:.72rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--accent); display:flex; align-items:center; gap:.5rem;
  border-bottom:1px solid rgba(212,175,55,.3);
  padding-bottom:.3rem;
  transition:gap .3s, border-color .3s;
}
.slate-tease-link:hover { gap:.9rem; border-color:var(--accent); }

.slate-tease-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }

.slate-card {
  background:var(--bg3); border:1px solid var(--border);
  padding:0; overflow:hidden; position:relative;
  transition:border-color .35s, transform .35s;
  cursor:none;
}
.slate-card:hover { border-color:rgba(212,175,55,.35); transform:translateY(-4px); }

.slate-card-visual {
  aspect-ratio:16/10;
  background:linear-gradient(135deg, var(--surface) 0%, var(--bg3) 100%);
  position:relative; overflow:hidden;
}
.slate-card-visual::after {
  content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(
    -45deg,
    transparent 0px, transparent 8px,
    rgba(212,175,55,.04) 8px, rgba(212,175,55,.04) 9px
  );
}
.slate-card-title-ghost {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-serif); font-size:clamp(1.5rem,3vw,2.5rem);
  color:rgba(255,255,255,.04); font-weight:600; text-transform:uppercase;
  text-align:center; padding:1rem;
}

.slate-card-body { padding:1.8rem; }
.slate-status {
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.62rem; letter-spacing:.2em; text-transform:uppercase;
  padding:.3rem .8rem; border-radius:2px;
  margin-bottom:1rem;
}
.slate-status.released    { background:rgba(212,175,55,.12); color:var(--accent); border:1px solid rgba(212,175,55,.25); }
.slate-status.development { background:rgba(100,149,237,.08); color:#6495ed;      border:1px solid rgba(100,149,237,.2); }
.slate-status.pre-prod    { background:rgba(64,200,128,.08);  color:#40c880;      border:1px solid rgba(64,200,128,.2); }
.slate-status-dot {
  width:5px; height:5px; border-radius:50%; background:currentColor;
  animation:statusPulse 2s ease infinite;
}
@keyframes statusPulse { 0%,100%{opacity:1} 50%{opacity:.3} }

.slate-card h4 {
  font-family:var(--font-serif); font-size:1.5rem; color:var(--white);
  font-weight:400; margin-bottom:.5rem; line-height:1.15;
}
.slate-card-genre { font-size:.68rem; color:var(--muted); letter-spacing:.08em; margin-bottom:.7rem; }
.slate-card-logline { font-size:.9rem; color:var(--muted); line-height:1.6; }

.slate-card-cta {
  display:flex; align-items:center; justify-content:space-between;
  margin-top:1.4rem; padding-top:1.2rem; border-top:1px solid var(--border);
}
.slate-card-platform { font-size:.65rem; color:var(--accent); letter-spacing:.1em; text-transform:uppercase; }
.slate-card-arrow { color:var(--accent); font-size:.8rem; opacity:.6; transition:opacity .3s, transform .3s; }
.slate-card:hover .slate-card-arrow { opacity:1; transform:translateX(4px); }

/* ──────────────────────────────────────────
   LEADERSHIP
   ────────────────────────────────────────── */
#leadership { background:var(--bg2); }
.leader-grid { display:grid; grid-template-columns:1fr 1.5fr; gap:6vw; align-items:center; }
.leader-img-box {
  position:relative; aspect-ratio:3/4;
  border:1px solid var(--border); background:var(--surface); overflow:hidden;
}
.leader-placeholder {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(45deg, var(--bg2), var(--surface));
  color:var(--muted); font-family:var(--font-serif); font-size:1.1rem;
  font-style:italic; letter-spacing:.05em; text-align:center; padding:2rem;
}
.leader-img-box::after { content:''; position:absolute; inset:0; border:10px solid var(--bg2); pointer-events:none; }
.leader-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.leader-info {
  background:var(--glass-bg);
  backdrop-filter:blur(15px) saturate(140%);
  -webkit-backdrop-filter:blur(15px) saturate(140%);
  border:1px solid var(--glass-border);
  padding:3rem 2.8rem; border-radius:2px; position:relative;
}
.leader-info::before { content:''; position:absolute; top:0; left:0; width:50px; height:1px; background:var(--accent); }
.leader-info h3 { font-family:var(--font-serif); font-size:2.8rem; color:var(--white); font-weight:400; line-height:1.1; margin-bottom:.2rem; }
.leader-role { font-size:.82rem; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin-bottom:2rem; display:block; }

/* ──────────────────────────────────────────
   CONTACT — GLASSMORPHIC FORM
   ────────────────────────────────────────── */
#contact { background:var(--bg2); padding-bottom:clamp(6rem,11vw,10rem); }
.contact-grid { display:grid; grid-template-columns:1fr 1.2fr; gap:8vw; align-items:start; }
.contact-info h2 { margin-bottom:1.5rem; }
.contact-info .body-text { margin-bottom:3rem; }
.contact-detail { display:flex; gap:1.5rem; margin-bottom:2rem; align-items:flex-start; }
.contact-detail-icon {
  width:48px; height:48px; border:1px solid var(--border); border-radius:50%;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  transition:border-color .3s, background .3s;
}
.contact-detail:hover .contact-detail-icon { border-color:var(--accent); background:rgba(212,175,55,.06); }
.contact-detail-icon svg { width:18px; height:18px; stroke:var(--accent); fill:none; stroke-width:1.5; }
.contact-detail-label { font-size:.68rem; letter-spacing:.15em; text-transform:uppercase; color:var(--muted); margin-bottom:.3rem; }
.contact-detail-val   { font-size:1rem; color:var(--white); line-height:1.5; }

.contact-form {
  background:var(--glass-bg);
  backdrop-filter:blur(15px) saturate(140%);
  -webkit-backdrop-filter:blur(15px) saturate(140%);
  border:1px solid var(--glass-border);
  padding:4rem; border-radius:2px; position:relative;
}
.contact-form::before { content:''; position:absolute; top:0; left:0; width:60px; height:1px; background:var(--accent); }
.form-group { display:flex; flex-direction:column; gap:.8rem; margin-bottom:1.8rem; }
.form-group:last-of-type { margin-bottom:0; }
label { font-size:.72rem; letter-spacing:.15em; text-transform:uppercase; color:var(--white); }
input,select,textarea {
  background:rgba(0,0,0,.25); border:1px solid var(--border); color:var(--text);
  padding:1rem 1.2rem; font-family:var(--font-sans); font-size:1rem; font-weight:300;
  transition:border-color .3s, background .3s; width:100%; outline:none;
  -webkit-appearance:none; cursor:none;
}
[data-theme="light"] input,
[data-theme="light"] select,
[data-theme="light"] textarea { background:rgba(255,255,255,.4); }
input::placeholder,textarea::placeholder { color:var(--muted); opacity:.6; }
input:focus,select:focus,textarea:focus { border-color:var(--accent); background:rgba(0,0,0,.4); }
[data-theme="light"] input:focus,
[data-theme="light"] select:focus,
[data-theme="light"] textarea:focus  { background:rgba(255,255,255,.65); }
textarea { resize:vertical; min-height:145px; }
.form-submit {
  margin-top:2.5rem; background:var(--accent); color:#000; border:none; padding:1.2rem;
  font-family:var(--font-sans); font-size:.82rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; cursor:none;
  transition:background .3s, box-shadow .3s; width:100%;
}
.form-submit:hover { background:var(--accent2); box-shadow:0 8px 24px rgba(212,175,55,.25); }

/* ──────────────────────────────────────────
   FULL-WIDTH CINEMATIC MAP
   ────────────────────────────────────────── */
.map-section {
  width:100%; background:var(--bg);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  position:relative; z-index:10;
}
.map-container { width:100%; height:400px; overflow:hidden; position:relative; }
.map-container iframe {
  width:100%; height:100%; border:none;
  filter:var(--map-filter); transition:filter .5s ease;
}
.map-container:hover iframe { filter:var(--map-filter-hover); }
.map-overlay-tag {
  display:block; padding:1.5rem 5vw;
  font-size:.68rem; letter-spacing:.25em; text-transform:uppercase; color:var(--accent);
  background:var(--bg); border-bottom:1px solid var(--border); pointer-events:none;
}

/* ──────────────────────────────────────────
   FOOTER
   ────────────────────────────────────────── */
footer { background:var(--bg); border-top:1px solid var(--border); padding:5rem 5vw 2.5rem; }
.footer-top {
  display:flex; justify-content:space-between; align-items:flex-start;
  flex-wrap:wrap; gap:3rem; padding-bottom:4rem;
  border-bottom:1px solid var(--border); margin-bottom:2rem;
}
.footer-brand { max-width:280px; }
.footer-logo  { display:flex; align-items:center; gap:.9rem; margin-bottom:1.5rem; }
.footer-logo img { height:52px; width:auto; }
.footer-logo .logo-name { font-size:.95rem; }
.footer-tagline { font-size:.88rem; color:var(--muted); line-height:1.65; }
.footer-links { display:flex; gap:2.5rem; flex-wrap:wrap; margin-top:.5rem; }
.footer-links a { font-size:.75rem; letter-spacing:.15em; text-transform:uppercase; color:var(--white); transition:color .3s; }
.footer-links a:hover { color:var(--accent); }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1.5rem; }
.copyright { font-size:.82rem; color:var(--muted); }
.footer-socials { display:flex; gap:1.2rem; }
.footer-social {
  width:36px; height:36px; border:1px solid var(--border); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--muted); font-size:.7rem; letter-spacing:.05em;
  transition:border-color .3s, color .3s, background .3s;
}
.footer-social:hover { border-color:var(--accent); color:var(--accent); background:rgba(212,175,55,.06); }
.footer-social svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:1.5; }

/* ──────────────────────────────────────────
   SHOWREEL LIGHTBOX
   ────────────────────────────────────────── */
#reel-overlay {
  position:fixed; inset:0; z-index:999000;
  background:rgba(0,0,0,.97);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden;
  transition:opacity .5s ease, visibility .5s ease;
}
#reel-overlay.open { opacity:1; visibility:visible; }
.reel-inner { width:min(90vw,1200px); aspect-ratio:16/9; position:relative; }
.reel-inner iframe { width:100%; height:100%; border:none; }
.reel-video-wrap { position:absolute; inset:0; background:#000; }
.reel-placeholder {
  width:100%; height:100%; background:var(--surface); border:1px solid var(--border);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.5rem;
}
.reel-coming-soon-icon {
  width:70px; height:70px; border:1px solid var(--accent); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; color:var(--accent); padding-left:4px;
  animation:pulseOpacity 2s infinite alternate;
}
.reel-coming-soon-title { font-family:var(--font-serif); font-size:1.6rem; color:var(--white); font-weight:300; letter-spacing:.1em; }
.reel-coming-soon-sub   { font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.reel-close {
  position:fixed; top:1.8rem; right:1.8rem; background:transparent;
  border:1px solid rgba(212,175,55,.4); color:var(--accent);
  width:44px; height:44px; border-radius:50%; font-size:1.1rem;
  cursor:none; display:flex; align-items:center; justify-content:center;
  transition:background .3s, border-color .3s, transform .3s; z-index:1;
}
.reel-close:hover { background:var(--accent); border-color:var(--accent); color:#000; transform:rotate(90deg); }
.reel-close::before { content:'×'; }

/* ──────────────────────────────────────────
   RESPONSIVE
   ────────────────────────────────────────── */
@media(max-width:1200px) {
  .portfolio-grid { grid-template-columns:repeat(3,1fr); }
  .cred-stats     { grid-template-columns:repeat(2,1fr); }
  .cred-stat:nth-child(2) { border-right:none; }
  .cred-stat:nth-child(3) { border-top:1px solid var(--border); }
}

@media(max-width:1024px) {
  .about-grid,.leader-grid,.contact-grid { grid-template-columns:1fr; gap:4rem; }
  .services-grid { grid-template-columns:1fr; }
  .portfolio-grid { grid-template-columns:repeat(2,1fr); grid-auto-rows:minmax(200px,1fr); }
  .p-card.featured { grid-column:span 2; grid-row:span 2; }
  .p-card.wide     { grid-column:span 2; }
  .p-card.tall     { grid-row:span 2; }
  .press-grid { grid-template-columns:1fr 1fr; }
  .slate-tease-grid { grid-template-columns:1fr 1fr; }
  .about-visual { aspect-ratio:16/9; }
  .map-container { height:340px; }
  .clip-enter { clip-path:none !important; margin-top:0 !important; padding-top:clamp(6rem,11vw,10rem) !important; }
  .filmstrip-hint { display:none !important; }
}

@media(max-width:768px) {
  .nav-links,.nav-cta { display:none; }
  .hamburger { display:flex; }
  .logo-text  { display:none; }
  section     { padding:5rem 5vw; }
  h1 { font-size:clamp(1.8rem, 7vw, 2.6rem); letter-spacing:.005em; }
  .hero-content { padding-bottom:120px; }
  .service-card { padding:2.5rem 2rem; }
  .contact-form { padding:2rem; }
  .leader-info  { padding:2rem 1.8rem; }
  .leader-img-box { aspect-ratio:1/1; }
  .portfolio-top-bar { flex-direction:column; align-items:flex-start; }
  .portfolio-grid { grid-template-columns:1fr; grid-auto-rows:minmax(220px,auto); }
  .p-card.featured,.p-card.wide,.p-card.tall { grid-column:span 1; grid-row:span 1; min-height:260px; }
  .p-card.featured { min-height:320px; }
  .p-card.featured .p-title { font-size:2.2rem; }
  .map-container { height:280px; }
  .map-overlay-tag { font-size:.6rem; }
  .cred-stats { grid-template-columns:1fr 1fr; }
  .cred-stat { padding:2rem 1.5rem; }
  .press-grid { grid-template-columns:1fr; }
  .slate-tease-grid { grid-template-columns:1fr; }
  .ott-logos { gap:1.5rem; justify-content: space-evenly; }
  .hero-actions { gap:.9rem; }
  .btn-primary,.btn-ghost { padding:.85rem 1.8rem; }
  .btn-reel { padding:.8rem 1.4rem; font-size:.7rem; }
}

@media(max-width:480px) {
  .cred-stats { grid-template-columns:1fr; }
  .cred-stat  { border-right:none; border-bottom:1px solid var(--border); }
  .cred-stat:last-child { border-bottom:none; }
  h1 { font-size:clamp(1.7rem, 8vw, 2.2rem); }
  .pub-strip { gap:2rem; }
}

/* ──────────────────────────────────────────
   REDUCED MOTION
   ────────────────────────────────────────── */
@media(prefers-reduced-motion:reduce) {
  .kinetic-wrap   { transform:none !important; opacity:1 !important; }
  .reveal         { transition:none !important; }
  .marquee-track  { animation:none !important; }
  .loader-bar::after,.scroll-line,.filmstrip-arrow,
  .loader-emblem,.statusPulse { animation:none !important; }
  .p-card:hover .p-thumb { transform:none !important; }
  .hero-bg-image  { transition:none !important; }
}
.skip-link { position: absolute; top: -100px; left: 0; background: var(--accent); color: #000; padding: 12px 24px; z-index: 9999999; transition: top 0.3s ease; font-weight: 500; font-family: var(--font-sans); }
.skip-link:focus { top: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }

/* Social Spotlight */
.social-spotlight {
  padding: 8rem 4rem;
  text-align: center;
  position: relative;
}
@media (max-width: 768px) {
  .social-spotlight { padding: 5rem 2rem; }
}
.social-buttons {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  margin-top: 3rem;
  flex-wrap: wrap;
}
.btn-social {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1rem 2rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 100px;
  color: var(--text-main);
  text-decoration: none;
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  transition: all 0.4s var(--ease);
  position: relative;
  overflow: hidden;
}
.btn-social::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(212,175,55,0.2), transparent);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.btn-social:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(212,175,55,0.15);
}
.btn-social:hover::before {
  opacity: 1;
}
.btn-social svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  position: relative;
  z-index: 1;
}
.btn-social span {
  position: relative;
  z-index: 1;
}
[data-theme="light"] .btn-social { background: #fff; border-color: rgba(0,0,0,0.1); color: #000; }
[data-theme="light"] .btn-social:hover { border-color: var(--accent); color: var(--accent); }