/* ==========================================================================
   "What We Do" video showcase — matches the Figma Make "video section":
   a clean, near-full-bleed autoplaying reel whose frame WIDENS to full width
   as it scrolls into view (the Make wrapper uses will-change:width). No browser
   chrome, no 3D tilt. Reveal is driven by .is-in (IntersectionObserver).
   ========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700;800&family=JetBrains+Mono:wght@400;500&display=swap");

.dd-showcase {
  position: relative; background: #07080d; overflow: hidden;
  padding-block: clamp(4rem, 8vw, 8rem) !important;
  font-family: "Manrope", system-ui, sans-serif;
}
/* Don't pin the video section: the source stacks it (position:sticky) so the next
   "Our Work" section scrolls up over it, which looks messy over a full-bleed video.
   Force normal flow so it scrolls away cleanly before Our Work appears. */
.stickySectionsWrapper .whatWeDo.dd-showcase,
.whatWeDo.dd-showcase { position: relative !important; top: auto !important; }
.dd-showcase * { box-sizing: border-box; }
.dd-showcase__inner {
  position: relative; z-index: 1; max-width: 1152px; margin: 0 auto;
  padding-inline: clamp(1rem, 4vw, 2rem); text-align: center;
}
.dd-showcase__eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(255,255,255,0.5);
}
.dd-showcase__eyebrow::before, .dd-showcase__eyebrow::after { content: ""; width: 22px; height: 1px; background: rgba(255,255,255,0.35); }
.dd-showcase__title {
  margin: 18px auto 0 !important; max-width: 18ch;
  font-family: "Manrope", sans-serif; font-weight: 800; color: #fff !important;
  font-size: clamp(1.9rem, 4.4vw, 3.25rem) !important; line-height: 1.05 !important; letter-spacing: -0.02em !important;
}
.dd-showcase__sub {
  margin: 16px auto 0 !important; max-width: 52ch;
  font-size: 15px !important; line-height: 1.6 !important; color: rgba(255,255,255,0.55) !important;
}

/* full-width stage; the frame widens on reveal */
.dd-showcase__stage { position: relative; z-index: 1; width: 100%; }
.dd-showcase__frame {
  width: 74%; margin: 0 auto; border-radius: 12px; overflow: hidden;
  box-shadow: 0 40px 120px -50px rgba(0,0,0,0.85);
  opacity: 0.6; will-change: width;
  transition: width 1.3s cubic-bezier(0.22,1,0.36,1), opacity 1s ease, border-radius 1.3s ease;
}
.dd-showcase.is-in .dd-showcase__frame { width: 100%; opacity: 1; border-radius: 0; }
@media (prefers-reduced-motion: reduce) {
  .dd-showcase__frame { width: 100%; opacity: 1; border-radius: 0; transition: none; }
}
.dd-showcase__shot { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #0b0b0b; }
.dd-showcase__shot video,
.dd-showcase__shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }

@media (max-width: 900px) {
  .dd-showcase__frame { width: 90%; }
  .dd-showcase.is-in .dd-showcase__frame { width: 100%; }
}