<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Story: — Production Service Mexico</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Spectral:ital,wght@0,400;0,600;0,700;1,400&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="css/main.css">
</head>
<body>

  <!-- HEADER (persistente entre transiciones) -->
  <header class="site-header">
    <div class="wrap">
      <nav class="nav-left"><div class="nav-group">
        <a class="nav-link" data-ns="production-service" href="production-service.html">Production Service</a>
        <a class="nav-link" data-ns="film-tv" href="film-tv.html">Film &amp; TV</a>
        <a class="nav-link" data-ns="photography" href="photography.html">Photography</a>
      </div></nav>
      <a class="brand-logo nav-center" data-ns="home" href="index.html">Story:</a>
      <nav class="nav-right"><div class="nav-group">
        <a class="nav-link" href="#" data-mega="brands">Brands</a>
        <a class="nav-link" href="#">Shop</a>
        <a class="nav-link" href="#" data-mega="search">Search</a>
        <a class="nav-link" data-ns="team" href="team.html">Contact</a>
      </div>
      <button class="nav-toggle">Menu</button></nav>
    </div>
  </header>

  <!-- WRAPPER BARBA -->
  <div data-barba="wrapper">
    <main id="main" class="page" data-barba="container" data-barba-namespace="production-service" data-bg="grey">

      <!-- HERO -->
      <section class="hero">
        <div class="hero__media" data-parallax>
          <img src="https://picsum.photos/seed/story-prodservice/1800/1000" alt="Production Service">
        </div>
        <div class="hero__inner">
          <h1 class="hero__title display" data-split>Production Service<br><span class="sub">Mexico</span></h1>
        </div>
      </section>

      <!-- WORK GRID -->
      <section class="section">
        <div class="wrap">
          <div class="work-grid" data-stagger>

            <article class="work-item">
              <div class="work-item__media" data-video>
                <img src="https://picsum.photos/seed/patron/900/560" alt="Patrón">
                <span class="play-badge"><svg viewBox="0 0 16 16" fill="#111"><path d="M3 2l11 6-11 6z"/></svg></span>
              </div>
              <h3 class="work-item__title">Patrón</h3>
              <p class="work-item__meta">Dir. Guillermo del Toro</p>
            </article>

            <article class="work-item">
              <div class="work-item__media" data-video>
                <img src="https://picsum.photos/seed/usbank/900/560" alt="US Bank">
                <span class="play-badge"><svg viewBox="0 0 16 16" fill="#111"><path d="M3 2l11 6-11 6z"/></svg></span>
              </div>
              <h3 class="work-item__title">US Bank</h3>
              <p class="work-item__meta">Dir. Adam Patch</p>
            </article>

            <article class="work-item work-item--wide">
              <div class="work-item__media" data-video>
                <img src="https://picsum.photos/seed/pinterest/1600/700" alt="Pinterest">
                <span class="play-badge"><svg viewBox="0 0 16 16" fill="#111"><path d="M3 2l11 6-11 6z"/></svg></span>
              </div>
              <h3 class="work-item__title">Pinterest</h3>
              <p class="work-item__meta">Dir. Charlotte Rutherford</p>
            </article>

            <article class="work-item">
              <div class="work-item__media" data-video>
                <img src="https://picsum.photos/seed/bose/900/560" alt="Bose">
                <span class="play-badge"><svg viewBox="0 0 16 16" fill="#111"><path d="M3 2l11 6-11 6z"/></svg></span>
              </div>
              <h3 class="work-item__title">Bose</h3>
              <p class="work-item__meta">Dir. Hannan Hussein</p>
            </article>

            <article class="work-item">
              <div class="work-item__media" data-video>
                <img src="https://picsum.photos/seed/winners/900/560" alt="Winners">
                <span class="play-badge"><svg viewBox="0 0 16 16" fill="#111"><path d="M3 2l11 6-11 6z"/></svg></span>
              </div>
              <h3 class="work-item__title">Winners</h3>
              <p class="work-item__meta">Dir. Allie Avital</p>
            </article>

            <article class="work-item">
              <div class="work-item__media" data-video>
                <img src="https://picsum.photos/seed/verizon/900/560" alt="Verizon">
                <span class="play-badge"><svg viewBox="0 0 16 16" fill="#111"><path d="M3 2l11 6-11 6z"/></svg></span>
              </div>
              <h3 class="work-item__title">Verizon</h3>
              <p class="work-item__meta">Dir. Ty &amp; Mike</p>
            </article>

            <article class="work-item">
              <div class="work-item__media" data-video>
                <img src="https://picsum.photos/seed/seedfilm/900/560" alt="Seed">
                <span class="play-badge"><svg viewBox="0 0 16 16" fill="#111"><path d="M3 2l11 6-11 6z"/></svg></span>
              </div>
              <h3 class="work-item__title">Seed</h3>
              <p class="work-item__meta">Dir. Clara Balzary</p>
            </article>

          </div>
        </div>
      </section>

    </main>
  </div>

  <!-- FOOTER (persistente) -->
  <footer class="site-footer">
    <div class="wrap">
      <div class="footer-top">
        <div>
          <a href="index.html" class="footer-logo">Story:</a>
          <p class="footer-address">Fernando Montes de Oca #5<br>Colonia Condesa, 06140<br>México City, México</p>
        </div>
        <div class="footer-social">
          <a href="#">Instagram</a><a href="#">LinkedIn</a><a href="#">Facebook</a><a href="#">Vimeo</a>
        </div>
        <div class="footer-countries">México<br>Colombia<br>Chile<br>Panamá<br>Costa Rica</div>
      </div>
      <div class="footer-partners">
        <img class="partner-logo" src="assets/logos/iq.svg" alt="International Quorum of Motion Picture Producers">
        <img class="partner-logo" src="assets/logos/entrepreneurs-organization.svg" alt="Entrepreneurs' Organization">
        <img class="partner-logo" src="assets/logos/yda.svg" alt="Young Director Award Friend">
        <img class="partner-logo" src="assets/logos/pandora.svg" alt="Pandora">
        <img class="partner-logo" src="assets/logos/owned.svg" alt="Owned">
      </div>
    </div>
  </footer>

  <!-- LIBS -->
  <script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/ScrollTrigger.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/SplitText.min.js"></script>
  <script src="https://unpkg.com/lenis@1.1.13/dist/lenis.min.js"></script>
  <script src="https://unpkg.com/@barba/core"></script>
  <script src="js/main.js"></script>
</body>
</html>
