 

<main class="landing-page" id="landing-scope">

    <!-- SECTION 1: HERO -->
    <section class="hero-container">
        <div class="hero-sticky-wrapper">
            <div class="hero-intro" id="hero-intro">
                <div class="line">
                    Your clients are only truly on board <br> when they understand what you are selling. <br><br>
                    Our work sells your work.
                </div>
            </div>

            <div class="hero-panel" id="hero-panel">
                <a href="#" class="media-link">
                    <img src="//d14ty28lkqz1hw.cloudfront.net/data/org/17176/theme/25974/img/2026landing/hero-image.jpg" alt="Hero Model" id="hero-img">
                    <div class="overlay"></div>
                    <div class="hero-bottom-text">
                        <div class="line">
                            We work with early innovators and visionary firms around the world.
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </section>

    <!-- SECTION 2: SHRINK BOTTOM-RIGHT + SLIDE LEFT -->
    <section class="feature-sticky-track" id="section-2">
        <div class="sticky-wrapper">
            <div class="feature-panel" style="transform-origin: 90% 90%;">
                <img src="//d14ty28lkqz1hw.cloudfront.net/data/org/17176/theme/25974/img/2026landing/emblem-models.jpg" alt="Emblem Models">
                <div class="overlay"></div>
            </div>
            <div class="text-wrap slide-from-left">
                <div class="line">Our work lives </div>
                <div class="line">where ‘typical’ fears to tread</div>
            </div>
        </div>
    </section>

    <!-- SECTION 3: CENTER SHRINK + STAGGERED VERTICAL SLIDE -->
    <section class="feature-sticky-track" id="section-3" style="height: 400vh;">
        <div class="sticky-wrapper">
            <div class="feature-panel" style="transform-origin: center center;">
                <video autoplay muted loop playsinline class="feature-video">
                    <source src="//d14ty28lkqz1hw.cloudfront.net/data/org/17176/theme/25974/img/2026landing/wellVID.mp4" type="video/mp4">
                </video>
                <div class="overlay"></div>
            </div>

            <div class="text-wrap slide-from-top">
                <div class="line">communication media that cuts through noise</div>
            </div>

            <div class="text-wrap slide-from-bottom">
                <div class="line">beyond standard methods</div>
            </div>
        </div>
    </section>

    <!-- SECTION 4: YELLOW BACKGROUND + CLUSTER ANIMATION -->
    <section class="feature-sticky-track" id="section-4" style="height: 400vh;">
        <div class="sticky-wrapper yellow-bg">
            <!-- Top Text Group -->
            <div class="sec4-text-group" style="transform-origin: center center;">
                <div class="sec4-toptext1">A model is worth <br>a thousand pictures.</div>
                <div class="sec4-toptext2">How many words is that?</div>
            </div>

            <!-- 3-Image Cluster + Bottom Text Label -->
            <div class="sec4-image-cluster">
                <div class="cluster-images">
                    <img src="//d14ty28lkqz1hw.cloudfront.net/data/org/17176/theme/25974/img/2026landing/wood-models.jpg" alt="Detail 1" class="cluster-img img-1">
                    <img src="//d14ty28lkqz1hw.cloudfront.net/data/org/17176/theme/25974/img/2026landing/colour-details.jpg" alt="Detail 2" class="cluster-img img-2">
                    <img src="//d14ty28lkqz1hw.cloudfront.net/data/org/17176/theme/25974/img/2026landing/white-detail-series.jpg" alt="Detail 3" class="cluster-img img-3">
                </div>
                <div class="sec4-bottom-label">
                    We take pride in our role helping to build cities, infrastructure and neighbourhoods.
                </div>
            </div>
        </div>
    </section>

    <!-- SECTION 5: TAGLINE -->
    <section class="tagline-section" id="section-5">
        <div class="tagline-content">
            <h2>Friction Fit Models builds</h2>
            <h2>scale models and design media.</h2>
        </div>
    </section>

</main>

