/* ═══════════════════════════════════════════════════════════════
   KOJ STUDIOS — v6 MASTER FIX
   Resolves: logo stretching, reveal animations, dark/light mode,
   video modal, reel slider, CEO slideshow, nav conflicts
═══════════════════════════════════════════════════════════════ */

/* ── 1. FIX SCROLL REVEAL: .rv.in and .rv.revealed both work ── */
.rv.in, .rv.revealed { opacity: 1 !important; transform: none !important; }

/* ── 2. LOGO FIX — never stretch, always contain ── */
.nav-logo {
  display: flex;
  align-items: center;
  gap: .5rem;
  text-decoration: none;
  flex-shrink: 0;
}
.nav-logo img,
.nav-logo .logo-dark-ver,
.nav-logo .logo-light-ver {
  height: 44px;
  width: auto !important;
  max-width: 180px;
  object-fit: contain;
  display: block;
  filter: none !important; /* ← REMOVE the brightness/invert that turns white logo black */
}
.logo-dark-ver  { display: block;  }
.logo-light-ver { display: none !important; }

/* Footer logos */
.footer-brand img.logo-dark-ver,
.footer-brand img.logo-light-ver {
  height: 38px;
  width: auto !important;
  max-width: 160px;
  object-fit: contain;
  filter: none !important;
  margin-bottom: 1.2rem;
}

/* ── 3. DARK/LIGHT MODE — single unified system via data-theme ── */
/* Default (dark) — already set by :root */

[data-theme="light"] {
  --ink:     #f7f4ef;
  --ink2:    #ede9e2;
  --ink3:    #e4dfd6;
  --surface: #d8d2c8;
  --surface2:#cec8bd;
  --cream:   #1a1614;
  --off:     #4a4540;
  --muted:   #7a736d;
  --gold:    #9a7a2c;
  --gold-lt: #b89040;
  --gold-dim:rgba(154,122,44,0.12);
  --gold-glow:rgba(154,122,44,0.07);
  --border:  rgba(0,0,0,0.12);
  --border2: rgba(0,0,0,0.08);
}

[data-theme="light"] body { background: var(--ink); color: var(--cream); }

/* Nav on light */
[data-theme="light"] #nav.scrolled {
  background: rgba(247,244,239,.97);
  border-bottom-color: rgba(0,0,0,0.1);
}
[data-theme="light"] .nav-menu a { color: var(--off); }
[data-theme="light"] .ticker-belt { background: #1a1614; }
[data-theme="light"] .ticker-inner span { color: #c9a84c; }

/* Hero keeps dark in both modes (it's a dark cinematic section) */
[data-theme="light"] .hero { background: #0c0c0c; }
[data-theme="light"] .hero h1 { color: #F4EFE6; }
[data-theme="light"] .hero-sub { color: #9E9589; }
[data-theme="light"] .hero-tag { color: #C9A84C; }
[data-theme="light"] .hero-slogan { color: #C9A84C; }

/* Content sections on light */
[data-theme="light"] .logo-bar { background: var(--ink2); border-color: rgba(0,0,0,.08); }
[data-theme="light"] .services-sec { background: var(--ink2); }
[data-theme="light"] .work-sec { background: var(--ink); }
[data-theme="light"] .process-sec { background: var(--ink3); }
[data-theme="light"] .testi-sec { background: var(--ink); }
[data-theme="light"] .dr-strip { background: var(--ink2); }
[data-theme="light"] .final-cta { background: #1a1614; }
[data-theme="light"] .final-cta h2 { color: #F4EFE6; }
[data-theme="light"] .final-cta p { color: rgba(255,255,255,.6); }
[data-theme="light"] .final-cta-inner .btn-outline { border-color: rgba(255,255,255,.3); color: #fff; }
[data-theme="light"] footer { background: #1a1614; }
[data-theme="light"] footer p, [data-theme="light"] .footer-col a, [data-theme="light"] .footer-brand p { color: rgba(255,255,255,.55); }
[data-theme="light"] .footer-col h5, [data-theme="light"] .footer-bottom { color: rgba(255,255,255,.35); }
[data-theme="light"] .footer-bottom a { color: #c9a84c; }

/* Components on light */
[data-theme="light"] .lane { background: var(--ink3); }
[data-theme="light"] .step { background: var(--ink3); }
[data-theme="light"] .step:hover { background: var(--surface); }
[data-theme="light"] .val-card { background: var(--ink3); }
[data-theme="light"] .case-card { background: var(--ink3); }
[data-theme="light"] .testi-card { background: var(--ink3); border-color: rgba(0,0,0,.06); }
[data-theme="light"] .testi-q { color: var(--cream); }
[data-theme="light"] .contact-form-box { background: var(--ink3); border-color: rgba(0,0,0,.1); }
[data-theme="light"] .fg input, [data-theme="light"] .fg select, [data-theme="light"] .fg textarea {
  background: var(--ink2); border-color: rgba(0,0,0,.1); color: var(--cream);
}
[data-theme="light"] .fg input:focus, [data-theme="light"] .fg select:focus, [data-theme="light"] .fg textarea:focus {
  border-color: var(--gold); background: #fff;
}
[data-theme="light"] .cb-item { background: var(--ink2); border-color: rgba(0,0,0,.1); }
[data-theme="light"] .qb-box, [data-theme="light"] .qp-box { background: var(--ink3); }
[data-theme="light"] .qb-row { border-color: rgba(0,0,0,.08); }
[data-theme="light"] .qb-total { background: var(--surface); }
[data-theme="light"] .booking-page { background: var(--ink); }
[data-theme="light"] .pricing-page { background: var(--ink); }
[data-theme="light"] .pricing-philosophy, [data-theme="light"] .pkg-tier-card, [data-theme="light"] .addon-card { background: var(--ink3); }
[data-theme="light"] .inner-hero { background: var(--ink2); }
[data-theme="light"] .inner-hero h1, [data-theme="light"] .inner-hero p { color: var(--cream); }
[data-theme="light"] .about-story { background: var(--ink); }
[data-theme="light"] .about-values { background: var(--ink2); }
[data-theme="light"] .about-bts { background: var(--ink3); }
[data-theme="light"] .portfolio-page, [data-theme="light"] .contact-page { background: var(--ink); }
[data-theme="light"] .reel-sec { background: var(--ink2); }
[data-theme="light"] .mission-box { background: var(--ink3); }
[data-theme="light"] .ep-card { background: var(--ink3); border-color: rgba(0,0,0,.08); }
[data-theme="light"] .dr-episodes-layout { background: var(--ink); }
[data-theme="light"] .dr-sponsor-layout { background: var(--ink2); }
[data-theme="light"] .dr-page-hero { background: #0c0c0c; }

/* Logo switching */
[data-theme="light"] .logo-dark-ver  { display: none  !important; }
[data-theme="light"] .logo-light-ver { display: block !important; }
[data-theme="light"] .logo-light-ver { filter: none !important; }

/* Theme toggle icons */
.icon-moon { display: block; }
.icon-sun  { display: none; }
[data-theme="light"] .icon-moon { display: none; }
[data-theme="light"] .icon-sun  { display: block; }

/* ── 4. NAV — properly structured ── */
#nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.theme-toggle {
  width: 38px; height: 38px;
  background: transparent;
  border: 1.5px solid rgba(201,168,76,.3);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--cream);
  transition: border-color .25s, transform .3s;
  flex-shrink: 0;
}
.theme-toggle:hover {
  border-color: var(--gold);
  color: var(--gold);
  transform: rotate(20deg);
}
.theme-toggle svg { width: 16px; height: 16px; pointer-events: none; }

/* ── 5. CEO SLIDESHOW — proper stacking ── */
.ceo-slideshow {
  position: relative;
  width: 100%;
  aspect-ratio: 3/4;
  overflow: hidden;
  background: var(--ink3);
}
.ceo-slide {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  opacity: 0;
  transition: opacity .9s ease;
}
.ceo-slide.active { opacity: 1; }
.ceo-slideshow .slide-dots {
  position: absolute;
  bottom: 1rem; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: .5rem;
  z-index: 3;
}
.slide-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,.35);
  cursor: pointer;
  transition: background .25s;
  border: 1px solid rgba(255,255,255,.2);
}
.slide-dot.active { background: var(--gold); border-color: var(--gold); }

/* ── 6. VIDEO MODAL — clean, professional ── */
.vid-modal {
  position: fixed; inset: 0;
  z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
}
.vid-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.9);
  backdrop-filter: blur(10px);
  cursor: pointer;
}
.vid-shell {
  position: relative; z-index: 1;
  width: 100%; max-width: 940px;
  background: #000;
  border: 1px solid rgba(201,168,76,.2);
  box-shadow: 0 50px 120px rgba(0,0,0,.9);
}
.vid-close {
  position: absolute; top: -2.8rem; right: 0;
  background: none; border: none;
  color: var(--gold); cursor: pointer;
  font-family: var(--fm); font-size: .66rem;
  letter-spacing: .2em; text-transform: uppercase;
  display: flex; align-items: center; gap: .5rem;
  padding: .4rem 0;
  transition: color .2s;
}
.vid-close:hover { color: var(--gold-lt); }
.vid-frame {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
}
.vid-frame iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: none;
}
.wedding-slideshow {
  display: flex; align-items: center; justify-content: center;
  position: relative;
  height: 480px;
  overflow: hidden;
}
.ws-slide {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .9s ease;
}
.ws-slide.active { opacity: 1; }

/* ── 7. WORK ITEM VIDEO TRIGGER ── */
.work-item { cursor: pointer; }
.work-item .play-btn {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%) scale(.9);
  width: 60px; height: 60px;
  background: rgba(201,168,76,.9);
  border: none; border-radius: 50%;
  color: #000; font-size: 1rem;
  padding: 0; padding-left: 5px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 3;
  opacity: 0;
  transition: opacity .3s, transform .3s;
}
.work-item:hover .play-btn { opacity: 1; transform: translate(-50%,-50%) scale(1); }

/* video-item .play-btn inside work-panel — show always */
.video-item .work-panel .play-btn {
  position: static;
  transform: none;
  opacity: 1;
  width: auto; height: auto;
  padding: .55rem 1.4rem;
  border-radius: 2px;
  font-family: var(--fm); font-size: .64rem;
  letter-spacing: .16em; text-transform: uppercase;
  background: var(--gold); color: var(--ink);
  transition: background .25s, transform .2s;
}
.video-item .work-panel .play-btn:hover { background: var(--gold-lt); transform: translateY(-2px); }

/* ── 8. VIDEO REEL SLIDER ── */
.reel-sec { padding: 8rem 0; background: var(--ink2); }
.reel-slider { max-width: 880px; margin: 0 auto; }
.reel-track { width: 100%; }
.reel-slide { width: 100%; }
.reel-embed {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  background: #000;
  border: 1px solid var(--border2);
}
.reel-embed iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: none;
}
.reel-label {
  text-align: center;
  font-family: var(--fm); font-size: .68rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); margin-top: 1rem;
}
.reel-controls {
  display: flex; align-items: center; justify-content: center;
  gap: 1.8rem; margin-top: 2rem;
}
.reel-btn {
  width: 46px; height: 46px;
  background: transparent;
  border: 1.5px solid rgba(201,168,76,.3);
  border-radius: 50%;
  color: var(--cream); cursor: pointer;
  font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .25s, color .25s, transform .2s;
}
.reel-btn:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); transform: scale(1.05); }
.reel-btn:disabled { opacity: .25; cursor: not-allowed; }
.reel-counter {
  font-family: var(--fm); font-size: .68rem;
  letter-spacing: .2em; color: var(--muted);
}

/* ── 9. PORTFOLIO VIDEO THUMBS ── */
.video-thumb { position: relative; overflow: hidden; cursor: pointer; }
.vid-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.3);
  display: flex; align-items: center; justify-content: center;
  transition: background .3s;
}
.video-thumb:hover .vid-overlay { background: rgba(0,0,0,.55); }
.play-circle {
  width: 58px; height: 58px;
  border-radius: 50%;
  background: rgba(201,168,76,.9);
  color: #000;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  padding-left: 5px;
  transition: transform .25s, background .25s;
}
.video-thumb:hover .play-circle { transform: scale(1.1); background: rgba(201,168,76,1); }

/* ── 10. PAYMENT TOGGLE ── */
.payment-toggle-wrap { margin-top: 1.8rem; }
.payment-toggle-btn {
  width: 100%; justify-content: center;
  background: transparent !important;
  border-color: rgba(201,168,76,.4) !important;
  color: var(--gold) !important;
}
.payment-toggle-btn:hover { background: var(--gold-dim) !important; }
.payment-details {
  margin-top: 1rem;
  animation: revealDown .3s ease;
}
@keyframes revealDown { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }
.pd-inner {
  background: var(--ink3);
  border: 1px solid rgba(201,168,76,.25);
  border-left: 2px solid var(--gold);
  padding: 2rem 2.5rem;
}
.pd-inner h4 { color: var(--cream); font-family: var(--fd); font-size: 1.4rem; margin-bottom: .8rem; }

/* ── 11. SOCIAL ICON LINKS ── */
.socials { display: flex; gap: .6rem; margin-top: 1.4rem; }
.social-icon-link {
  width: 38px; height: 38px;
  border: 1.5px solid rgba(255,255,255,.12);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .25s, background .25s, transform .25s;
  color: rgba(255,255,255,.5);
  font-size: .68rem; font-family: var(--fm);
  text-decoration: none;
}
.social-icon-link:hover {
  border-color: var(--gold);
  background: var(--gold-dim);
  color: var(--gold);
  transform: translateY(-2px);
}
.social-icon-img {
  width: 18px; height: 18px;
  object-fit: contain;
}

/* ── 12. DE RANDOM LOGO SIZING ── */
.dr-strip-logo, .dr-page-logo {
  width: 100% !important;
  max-width: 360px !important;
  height: auto !important;
  object-fit: contain !important;
  filter: drop-shadow(0 0 30px rgba(201,168,76,.18)) !important;
}

/* ── 13. HERO SLOGAN ── */
.hero-slogan {
  font-family: var(--fd);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--gold);
  opacity: .85;
  margin: .5rem 0 2.5rem;
  display: block;
}

/* ── 14. DE RANDOM EPISODES ── */
.ep-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem;
}
.ep-card {
  background: var(--ink3);
  border: 1px solid var(--border2);
  overflow: hidden;
  transition: transform .3s, box-shadow .3s;
}
.ep-card:hover { transform: translateY(-4px); box-shadow: 0 16px 48px rgba(0,0,0,.5); }
.ep-frame {
  position: relative; padding-bottom: 56.25%; height: 0;
}
.ep-frame iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: none;
}
.ep-info { padding: 1.6rem 1.8rem 2rem; }
.ep-num {
  font-family: var(--fm); font-size: .62rem;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold); display: block; margin-bottom: .35rem;
}
.ep-title {
  font-family: var(--fd); font-size: 1.5rem;
  color: var(--cream); margin-bottom: .5rem;
}
.ep-desc { font-size: .88rem; color: var(--off); line-height: 1.8; }

/* ── 15. CLIENT LOGO BAR — typo fix ── */
/* var(--fd) for client names */
.client-logo { font-family: var(--fd); }

/* ── 16. CASE CARD FIX — image not hidden behind overlay ── */
.case-img {
  position: relative;
  height: 280px;
  overflow: hidden;
}
.case-img::after { pointer-events: none; }
.case-img img { width: 100%; height: 100%; object-fit: cover; }

/* ── 17. CONTACT PAGE FORM HEADING ── */
.contact-form-box h2 { color: var(--cream); font-size: 1.8rem; margin-bottom: 1.8rem; }

/* ── 18. BOOKING PAGE LAYOUT FIX ── */
.booking-layout { gap: 5rem; align-items: start; }

/* ── 19. INVOICE MODAL ── */
.inv-modal {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
}
.inv-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.88); cursor: pointer; }
.inv-shell {
  position: relative; z-index: 1;
  background: #fff; color: #222;
  width: 100%; max-width: 720px;
  max-height: 90vh; overflow-y: auto;
  box-shadow: 0 40px 100px rgba(0,0,0,.8);
}
.inv-actions {
  padding: 1.5rem 2.5rem 2rem;
  display: flex; gap: 1rem;
  border-top: 1px solid #eee;
  background: #fafafa;
}

/* ── 20. OVERALL BODY TRANSITIONS ── */
body { transition: background-color .35s ease, color .35s ease; }
.lane, .step, .case-card, .val-card, .testi-card,
.ep-card, .tier-card, .reel-btn { transition: all .3s ease; }

/* ── 21. MISSING: .dr-tag-pill from De Random page ── */
.dr-tag-pill {
  font-family: var(--fm); font-size: .6rem;
  letter-spacing: .12em; text-transform: uppercase;
  padding: .3rem .9rem;
  border: 1px solid var(--border2);
  color: var(--off); border-radius: 100px;
  transition: all .2s;
}
.dr-tag-pill:hover { border-color: var(--gold); color: var(--gold); }

/* ── 22. MOBILE FIXES ── */
@media (max-width: 768px) {
  .nav-logo img { height: 38px; }
  .ep-grid { grid-template-columns: 1fr; }
  .reel-slider { padding: 0 .5rem; }
  .vid-modal { padding: .75rem; }
  .inv-shell { border-radius: 0; }
  .ceo-slideshow { aspect-ratio: 3/4; max-height: 70vw; }
  .ep-card { margin-bottom: 1rem; }
  [data-theme="light"] .logo-light-ver { height: 38px; }
}
@media (max-width: 480px) {
  .reel-controls { gap: 1rem; }
  .vid-shell { margin: 0; }
  .dr-strip-logo, .dr-page-logo { max-width: 240px !important; }
}