/* === COMMERCIALS & MOVIE MAKING — DARK CINEMATIC === */

body { font-family: 'Montserrat', sans-serif; background: #0a0a0a; color: #fff; margin: 0; padding: 0; }

/* Bootstrap overrides */
.text-dark       { color: #f0f0f0 !important; }
.text-muted-dark { color: rgba(255,255,255,0.52) !important; }
.bg-white        { background-color: #0a0a0a !important; }
.bg-light-grey   { background-color: #0f0f0f !important; }
.border-top      { border-top: 1px solid rgba(255,255,255,0.06) !important; }
.accent-text-red { color: #8b0000; }

/* ── HERO ── */
.portfolio-hero-light {
  height: 65vh; position: relative; overflow: hidden;
}
.portfolio-overlay-light {
  position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(0,0,0,0.55) 0%, rgba(10,10,10,0.94) 100%);
  z-index: 0;
}

/* ── STACKED SECTIONS ── */
.portfolio-stacked-section { background: #0a0a0a; }
.portfolio-stacked-section.bg-light-grey { background: #0f0f0f !important; }

/* ── CINEMATIC IMAGE WRAPPER ── */
.cinematic-image-wrapper {
  position: relative; border-radius: 10px; overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,0.55);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.cinematic-image-wrapper:hover {
  transform: translateY(-5px);
  box-shadow: 0 30px 70px rgba(0,0,0,0.68), 0 0 20px rgba(139,0,0,0.08);
}

.gallery-img-tall {
  width: 100%; height: 450px; object-fit: cover; display: block;
}
.gallery-img-wide {
  width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block;
}

/* ── CLIENT/BRAND LOGO IMAGES ── */
.img-fluid {
  transition: filter 0.3s ease, opacity 0.3s ease;
}
.cinematic-image-wrapper img,
section img.img-fluid {
  filter: brightness(0.75);
}
.cinematic-image-wrapper:hover img,
section .col-md-6:hover img.img-fluid {
  filter: brightness(1);
}

/* ── MOBILE RESPONSIVE ── */
@media (max-width: 768px) {
  .gallery-img-tall {
    height: 320px;
  }
  .portfolio-hero-light { height: 52vh; }
  .portfolio-stacked-section .py-5 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
}

@media (max-width: 480px) {
  .gallery-img-tall {
    height: 240px;
  }
  /* Stacked col-md-7/col-md-3 images get full width on mobile */
  .cinematic-image-wrapper { border-radius: 8px; }
}

/* ── CLIENT LOGO BELT ── */
.client-grid-light {
  background: #080808;
  border-top: 1px solid rgba(255,255,255,0.04);
}

.logo-belt-wrapper {
  overflow: hidden;
  width: 100%;
  padding: 10px 0 50px;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}

.logo-belt-track {
  display: flex;
  align-items: center;
  gap: 64px;
  width: max-content;
  animation: beltScroll 38s linear infinite;
}

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

.logo-belt-item {
  flex-shrink: 0;
  height: 80px;
  width: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-belt-item img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}