<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Story: — We Produce</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) -->
    <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"
              data-mega="production-service"
              >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>

    <div data-barba="wrapper">
      <main
        id="main"
        class="page"
        data-barba="container"
        data-barba-namespace="home"
      >
        <!-- HERO REEL -->
        <section class="hero hero--home s-dark" data-video>
          <div class="hero__media" data-parallax>
            <img
              src="https://picsum.photos/seed/story-reel/1920/1080"
              alt="Story reel"
            />
            <span class="grain"></span>
          </div>
          <button
            class="hero__play play-badge play-badge--xl"
            aria-label="Reproducir reel"
          >
            <svg viewBox="0 0 16 16" fill="#111">
              <path d="M3 2l11 6-11 6z" />
            </svg>
          </button>
        </section>

        <!-- OUR STORY -->
        <section class="section s-peach">
          <div class="wrap">
            <h2 class="h-section story__title" data-split>Our Story:</h2>
            <p class="story__lead" data-lines>
              We are a <strong>family-run Production Company</strong> with a
              diverse team of collaborators from around the world. With over
              <strong>40 years of experience in Mexico</strong> and
              <strong>20 years in Europe</strong> in the Advertising Industry,
              and now expanding into Colombia and Chile, we prioritize listening
              to our clients' needs and teamwork to
              <strong>achieve excellence.</strong>
            </p>
            <div class="story__cols reveal">
              <p>
                Our commitment to environmental sustainability and inclusivity
                sets us apart in Mexico's production industry. After
                implementing waste management on set we have successfully
                reduced waste in our productions by 60%. We believe in
                empowering our employees and collaborators
              </p>
              <p>
                through continuous training on sustainable practices, which are
                seamlessly integrated into our daily operations. This proactive
                approach not only strengthens our team but also advances our
                mission to positively impact both the environment and society.
              </p>
            </div>
          </div>
        </section>

        <!-- MOUNTAIN -->
        <section class="s-peach" style="padding-bottom: clamp(40px, 6vw, 90px)">
          <div class="wrap">
            <div class="media-frame reveal-img" data-zoom>
              <img
                src="https://picsum.photos/seed/story-mountain/1600/800"
                alt=""
              />
            </div>
          </div>
        </section>

        <!-- OUR IKIGAI -->
        <section class="section s-peach" style="padding-top: 0">
          <div class="wrap">
            <h2 class="h-section centered" data-split>Our Ikigai</h2>
            <p class="story__lead story__lead--center" data-lines>
              We live for the art of <em>beautiful storytelling.</em> With the
              help from our talented and diverse team, we provide clients with a
              <em>seamless experience</em> and <em>produce work</em> that
              inspires.
            </p>
          </div>
        </section>

        <!-- OUR WORK CTA -->
        <section class="s-peach">
          <a
            class="media-cta"
            href="production-service.html"
            data-video
            data-video-src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4"
          >
            <img
              src="https://picsum.photos/seed/story-ourwork/1920/820"
              alt="Our Work"
            />
            <span class="media-cta__label">Our Work</span>
          </a>
        </section>

        <!-- INCLUSIVITY -->
        <section class="section s-bone" data-counters>
          <div class="wrap incl-grid">
            <div>
              <h2 class="h-block" data-split>Inclusivity</h2>
              <p class="story__lead story__lead--sm" data-lines>
                One of our core missions is to
                <strong>help women grow in this industry</strong>, reflecting
                our commitment to gender diversity and inclusivity.
              </p>
              <p
                class="reveal"
                style="margin-top: 18px; max-width: 34ch; color: #555"
              >
                For nearly 20 years, we have been encouraging talented women to
                express their unique and powerful points of view through their
                work.
              </p>
            </div>
            <div class="stats">
              <div class="stat-bubble stat-bubble--lg" data-bubble>
                <div>
                  <div class="num" data-count="70" data-suffix="%">0%</div>
                  <div class="cap">of our team are women</div>
                </div>
              </div>
              <div class="stat-bubble stat-bubble--sm" data-bubble>
                <div>
                  <div class="cap" style="margin-bottom: 6px">more than</div>
                  <div class="num" data-count="50" data-suffix="%">0%</div>
                  <div class="cap">of our company is woman-owned</div>
                </div>
              </div>
            </div>
          </div>
        </section>

        <!-- SUSTAINABILITY -->
        <section class="section s-bone" style="padding-top: 0">
          <div class="wrap sustain-grid">
            <div class="media-frame reveal-img sustain-img" data-zoom>
              <img
                src="https://picsum.photos/seed/story-forest/800/600"
                alt=""
              />
            </div>
            <div>
              <h2 class="h-block" data-split>Sustainability</h2>
              <p class="story__lead story__lead--sm" data-lines>
                In Story: we are commited to our
                <strong>ESG Standards and Practices.</strong>
              </p>
              <p class="prose reveal" style="margin-top: 20px; color: #444">
                We recognize that sustainable practices depend on well-trained
                collaborators. Our ongoing training programs empower our team
                with strategies that align with our Sustainability Goals while
                promoting social responsibility and strong governance.
              </p>
              <p class="prose reveal" style="margin-top: 14px; color: #444">
                We foster an inclusive workplace and implement initiatives like
                rainwater harvesting and energy efficiency improvements. By
                continually assessing our processes, we seek innovative ways to
                enhance our sustainability efforts and create a positive impact
                on our community and the environment.
              </p>
              <button class="btn-pill reveal">LEARN MORE</button>
            </div>
          </div>
        </section>

        <!-- RECOGNITION -->
        <section class="recognition section s-butter">
          <div class="wrap">
            <h2 data-split>Recognition</h2>
            <div class="reveal-img recog-img" data-zoom>
              <img
                src="https://picsum.photos/seed/story-field/1240/620"
                alt=""
              />
            </div>
          </div>
          <div class="marquee" data-marquee>
            <div class="marquee__track">
              <span class="award">DC'E</span
              ><span class="award">CANNES LIONS</span>
              <span class="award">LAUS</span
              ><span class="award">YDA · Young Director Award</span>
              <span class="award">Berlin Music Video Awards</span
              ><span class="award">c de c</span>
              <span class="award" aria-hidden="true">DC'E</span
              ><span class="award" aria-hidden="true">CANNES LIONS</span>
              <span class="award" aria-hidden="true">LAUS</span
              ><span class="award" aria-hidden="true"
                >YDA · Young Director Award</span
              >
              <span class="award" aria-hidden="true"
                >Berlin Music Video Awards</span
              ><span class="award" aria-hidden="true">c de c</span>
            </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">
            <a href="/production-service/mexico.html">México</a>
            <a href="/production-service/colombia.html">Colombia</a>
            <a href="/production-service/chile.html">Chile</a>
            <a href="/production-service/panama.html">Panamá</a>
            <a href="/production-service/costa-rica.html">Costa Rica</a>
          </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>

    <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>
