/* ══════════════════════════════════════════════════
   VIDEO PAGE — Page-Specific Styles
   ══════════════════════════════════════════════════ */

/* ══ HERO ══ */
.video-hero {
  position: relative; width: 100%;
  background: url("../assets/images/video-top-bg.png") top center/cover no-repeat;
  overflow: hidden; margin-top: var(--nav-height); padding: 64px var(--page-padding) 72px;
  min-height: 620px;
}
.vh-content { max-width: 640px; position: relative; z-index: 2; }
.vh-title {
  font-family: var(--font-display); font-size: 5.5rem;
  font-weight: 400; font-style: italic; font-variation-settings: "wdth" 100, "wght" 400;
  text-transform: uppercase; line-height: 0.92; color: var(--dark-gray); letter-spacing: 2px;
  margin-bottom: 4px;
}
.vh-title .bold-highlight {
  font-weight: 700; font-variation-settings: "wdth" 100, "wght" 700;
  color: var(--dark-gray); position: relative;
  display: inline-block; margin-top: 2px; line-height: 1.05;
}
.vh-title .bold-highlight svg {
  position: absolute; left: -2%; top: 5%; width: 104%; height: 90%;
  z-index: -1;
}
.vh-body { margin-top: 24px; }
.vh-body p {
  font-family: var(--font-body); font-size: 0.68rem; line-height: 1.8;
  color: var(--dark-gray); margin-bottom: 10px; font-weight: 400; text-transform: uppercase;
}
.vh-body .highlight { color: var(--highlight); font-weight: 600; }
.vh-cta { margin-top: 24px; position: relative; z-index: 3; }

/* ══ OUR REEL + WHAT WE MAKE ══ */
.reel-services { display: flex; width: 100%; min-height: 340px; }
.rs-left {
  flex: 0 0 50%; position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.rs-left video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.rs-left::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.2) 40%, rgba(0,0,0,0.55) 100%);
}
.rs-left-inner {
  position: relative; z-index: 2;
  width: 100%; display: flex; align-items: center; justify-content: center;
}
.rs-left-title {
  font-family: var(--font-display); font-size: 3.2rem;
  font-weight: 400; font-style: italic; font-variation-settings: "wdth" 100, "wght" 400;
  text-transform: uppercase; color: var(--pale); letter-spacing: 1px; line-height: 0.95;
  position: absolute; left: var(--page-padding); z-index: 3;
}
.rs-left-title .accent {
  color: var(--yellow); font-weight: 700; font-variation-settings: "wdth" 100, "wght" 700;
}
.rs-right {
  flex: 0 0 50%; background: var(--dark-gray); color: var(--pale);
  padding: 48px 60px;
}
.rs-right h2 {
  font-family: var(--font-display); font-size: 2.6rem;
  font-weight: 400; font-style: italic; font-variation-settings: "wdth" 100, "wght" 400;
  text-transform: uppercase; color: var(--pale); letter-spacing: 1px; margin-bottom: 20px;
}
.rs-right h2 .accent {
  color: var(--yellow); font-weight: 700; font-variation-settings: "wdth" 100, "wght" 700;
}
.rs-tagline {
  font-family: var(--font-body); font-size: 0.68rem; font-weight: 500;
  text-transform: uppercase; color: var(--pale); letter-spacing: 0.5px;
}
.rs-tagline .accent {
  color: var(--yellow); font-weight: 700; position: relative; display: inline-block;
}
.rs-tagline .accent svg {
  position: absolute; bottom: -4px; left: 0; width: 100%; height: 6px;
}

/* ══ SERVICE LIST (video page overrides) ══ */
.rs-right .service-list { margin-bottom: 24px; }
.rs-right .service-list li {
  font-size: 0.68rem; padding: 6px 0 6px 18px;
}
.rs-right .service-list li::before {
  content: ''; width: 6px; height: 6px; background: var(--yellow);
  top: 50%; transform: translateY(-50%); border-radius: 0;
}

/* ══ CTA BUTTON SIZE (video page) ══ */
.vh-cta .contact-btn-svg,
.cta-section .contact-btn-svg { height: 44px; }

/* ══ OUR VIDEO WORK ══ */
.video-work { padding: 56px var(--page-padding) 40px; text-align: center; background: var(--dark); }
.video-work h2 {
  font-family: var(--font-display); font-size: 2.8rem;
  font-weight: 400; font-style: italic; font-variation-settings: "wdth" 100, "wght" 400;
  text-transform: uppercase; color: var(--pale); letter-spacing: 1px; margin-bottom: 32px;
}
.video-work h2 .accent {
  color: var(--yellow); font-weight: 700; font-variation-settings: "wdth" 100, "wght" 700;
}
.work-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  max-width: var(--content-max); margin: 0 auto;
}
.work-card {
  position: relative; aspect-ratio: 16/10; overflow: hidden;
  border: 2px solid var(--yellow); cursor: pointer; transition: transform 0.3s;
  background: #1a1a1a;
}
.work-card:hover { transform: scale(1.02); }
.work-card img { width: 100%; height: 100%; object-fit: cover; }
.work-card .play-badge {
  position: absolute; bottom: 10px; right: 10px;
  display: flex; align-items: center; gap: 5px;
  padding: 5px 14px; background: var(--yellow); border-radius: 14px;
  font-family: var(--font-body); font-size: 0.58rem; font-weight: 700;
  color: var(--dark); letter-spacing: 1px; text-transform: uppercase;
}
.work-card .play-badge svg { width: 10px; height: 10px; fill: var(--dark); }

/* ══ CTA ══ */
.cta-section { padding: 40px var(--page-padding) 48px; text-align: center; background: var(--dark); }

/* ══ OUR PROCESS ══ */
.our-process { position: relative; width: 100%; }
.our-process img { width: 100%; height: auto; display: block; }
.process-btn-wrap {
  position: absolute; bottom: 4%; left: 27%;
}
.process-btn-wrap .contact-btn-svg { height: 44px; }

/* ══ RESPONSIVE ══ */
@media (max-width: 1024px) {
  .video-hero {
    padding: 40px var(--page-padding) 48px;
    min-height: auto;
  }
  .vh-content { max-width: 100%; }
  .vh-title { font-size: 3rem; white-space: normal; }
  .vh-body p { font-size: 0.75rem; }

  /* Reel + Services section */
  .reel-services { flex-direction: column; min-height: auto; }
  .rs-left { flex: none; width: 100%; min-height: 240px; }
  .rs-right { flex: none; width: 100%; padding: 32px var(--page-padding); }
  .rs-left-title { font-size: 2.4rem; }
  .rs-right h2 { font-size: 2rem; }

  /* Work grid */
  .work-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .video-work h2 { font-size: 2rem; }

  /* Process */
  .our-process img { width: 100%; }
  .process-btn-wrap { left: 10%; bottom: 3%; }
}

@media (max-width: 600px) {
  .vh-title { font-size: 2.4rem; }
  .vh-body p { font-size: 0.7rem; }
  .work-grid { grid-template-columns: 1fr; }
  .rs-title { font-size: 2rem; }
  .video-work h2 { font-size: 1.8rem; }
}