/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Sep 10 2026 | 22:28:27 */
/* ============================================================
   LOOP LYFSTYL — SERVICES
   EDITORIAL ART DIRECTION
   ============================================================ */


/* ============================================================
   SECTION
   ============================================================ */

.ll-services-new {
    position: relative;
    width: 100%;
    padding: 140px 6vw;
    overflow: hidden;
    box-sizing: border-box;
}


/* ============================================================
   INTRO
   ============================================================ */

.ll-services-new > .elementor-heading-title {
    margin: 0 !important;
    font-size: clamp(56px, 9vw, 130px);
    line-height: .88;
    letter-spacing: -.055em;
}

.ll-services-new > p {
    max-width: 620px;
    margin: 30px 0 0 !important;
    font-size: 18px;
    line-height: 1.5;
}


/* ============================================================
   STAGE
   ============================================================ */

.ll-services-stage {
    position: relative;

    width: 100%;
    height: 90vh;
    min-height: 720px;

    margin-top: 80px;

    overflow: hidden;

    background: #111;

    border-radius: 18px;
}


/* ============================================================
   SERVICE CANVAS
   ============================================================ */

.ll-services-stage .ll-service-item {
    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    box-sizing: border-box;
}


/* ============================================================
   NUMBER
   FORCE IT ABOVE EVERYTHING
   ============================================================ */

.ll-service-number {
    position: absolute !important;

    z-index: 9999 !important;

    top: auto;
    right: auto;
    bottom: auto;
    left: auto;

    width: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;

    pointer-events: none !important;

    isolation: isolate;
}

.ll-service-number,
.ll-service-number * {
    pointer-events: none !important;
}

.ll-service-number p {
    margin: 0 !important;

    font-size: 14px;
    line-height: 1;

    font-weight: 500;

    letter-spacing: .12em;

    opacity: .55;
}


/* ============================================================
   CONTENT WRAPPER
   IMPORTANT:
   THIS IS NOT A FULL-SCREEN CANVAS.
   ============================================================ */

.ll-service-content {
    position: absolute !important;

    z-index: 100 !important;

    width: 1px !important;
    height: 1px !important;

    margin: 0 !important;
    padding: 0 !important;

    top: 0 !important;
    left: 0 !important;

    transform: none !important;

    pointer-events: none !important;

    overflow: visible !important;
}


/* ============================================================
   HEADING BASE
   ============================================================ */

.ll-service-content .elementor-heading-title {
    position: absolute !important;

    margin: 0 !important;
    padding: 0 !important;

    width: max-content;

    max-width: none;

    font-size: clamp(58px, 6vw, 96px);

    line-height: .82;

    letter-spacing: -.06em;

    white-space: normal;
}


/* ============================================================
   DESCRIPTION BASE
   ============================================================ */

.ll-service-content p {
    position: absolute !important;

    margin: 0 !important;
    padding: 0 !important;

    width: 300px;
    max-width: 300px;

    font-size: 16px;

    line-height: 1.5;

    opacity: .72;
}


/* ============================================================
   IMAGE
   ============================================================ */

.ll-service-image {
    position: absolute !important;

    z-index: 20 !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden;

    box-sizing: border-box;

    border-radius: 4px;

    transform: none;
}

.ll-service-image img {
    display: block;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;

    object-fit: cover;
}


/* ============================================================
   ============================================================
   01 — BRAND & IDENTITY
   ============================================================
   ============================================================ */


/* Number */

.ll-services-stage
.ll-service-item:nth-child(1)
.ll-service-number {
    top: 55px !important;
    left: 55px !important;
}


/* Heading */

.ll-services-stage
.ll-service-item:nth-child(1)
.ll-service-content
.elementor-heading-title {
    left: 6vw;
    top: 50vh;

    transform: translateY(-50%);

    width: 30vw;
    max-width: 430px;

    font-size: clamp(58px, 6vw, 94px);
}


/* Description */

.ll-services-stage
.ll-service-item:nth-child(1)
.ll-service-content
p {
    right: 6vw;
    bottom: 8vh;

    width: 25vw;
    max-width: 350px;
}


/* Image */

.ll-services-stage
.ll-service-item:nth-child(1)
.ll-service-image {
    top: 7%;
    right: 4%;

    width: 56%;
    height: 84%;
}


/* ============================================================
   ============================================================
   02 — CREATIVE PRODUCTION
   CENTERED EDITORIAL COMPOSITION
   ============================================================
   ============================================================ */


/* Number */

.ll-services-stage
.ll-service-item:nth-child(2)
.ll-service-number {
    top: 55px !important;
    right: 55px !important;
}


/* Image is the main visual,
   NOT simply a left-side column */

.ll-services-stage
.ll-service-item:nth-child(2)
.ll-service-image {
    top: 12%;
    left: 15%;

    width: 58%;
    height: 72%;
}


/* Heading sits above the visual */

.ll-services-stage
.ll-service-item:nth-child(2)
.ll-service-content
.elementor-heading-title {
    left: 6vw;
    top: 15%;

    width: 40vw;
    max-width: 560px;

    font-size: clamp(54px, 5.5vw, 88px);
}


/* Description tucked beneath heading */

.ll-services-stage
.ll-service-item:nth-child(2)
.ll-service-content
p {
    left: 6vw;
    top: 44%;

    width: 250px;
    max-width: 250px;
}


/* ============================================================
   ============================================================
   03 — CREATIVE PRODUCTION
   LARGE IMAGE + LEFT TYPOGRAPHY
   ============================================================
   ============================================================ */


/* Number */

.ll-services-stage
.ll-service-item:nth-child(3)
.ll-service-number {
    top: 55px !important;
    left: 55px !important;
}


/* Heading */

.ll-services-stage
.ll-service-item:nth-child(3)
.ll-service-content
.elementor-heading-title {
    left: 6vw;
    top: 42%;

    transform: translateY(-50%);

    width: 28vw;
    max-width: 410px;

    font-size: clamp(58px, 5.8vw, 92px);
}


/* Description */

.ll-services-stage
.ll-service-item:nth-child(3)
.ll-service-content
p {
    right: 6vw;
    bottom: 8vh;

    width: 25vw;
    max-width: 350px;
}


/* Image */

.ll-services-stage
.ll-service-item:nth-child(3)
.ll-service-image {
    top: 6%;
    right: 4%;

    width: 59%;
    height: 88%;
}


/* ============================================================
   ============================================================
   04 — DIGITAL & CONTENT
   MAGAZINE TYPOGRAPHY
   ============================================================
   ============================================================ */


/* Number */

.ll-services-stage
.ll-service-item:nth-child(4)
.ll-service-number {
    top: 55px !important;
    right: 55px !important;
}


/* Supporting text */

.ll-services-stage
.ll-service-item:nth-child(4)
.ll-service-content
p {
    left: 6vw;
    top: 22%;

    width: 240px;
    max-width: 240px;
}


/* Giant heading */

.ll-services-stage
.ll-service-item:nth-child(4)
.ll-service-content
.elementor-heading-title {
    left: 6vw;
    bottom: 7vh;

    width: 68vw;
    max-width: 1000px;

    font-size: clamp(78px, 9vw, 150px);

    line-height: .73;

    letter-spacing: -.07em;
}


/* Small image */

.ll-services-stage
.ll-service-item:nth-child(4)
.ll-service-image {
    top: 13%;
    right: 8%;

    width: 27%;
    height: 51%;
}


/* ============================================================
   ============================================================
   05 — STRATEGY & CONCEPTS
   FULL BLEED CINEMATIC FINALE
   ============================================================
   ============================================================ */

.ll-services-stage
.ll-service-item:nth-child(5) {
    background: #111;
}


/* Number */

.ll-services-stage
.ll-service-item:nth-child(5)
.ll-service-number {
    top: 55px !important;
    left: 55px !important;
}


/* Full image */

.ll-services-stage
.ll-service-item:nth-child(5)
.ll-service-image {
    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    border-radius: 0;

    z-index: 10 !important;
}


/* Gradient */

.ll-services-stage
.ll-service-item:nth-child(5)::after {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 30;

    pointer-events: none;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.92) 0%,
            rgba(0,0,0,.68) 25%,
            rgba(0,0,0,.22) 55%,
            rgba(0,0,0,0) 78%
        );
}


/* 05 heading */

.ll-services-stage
.ll-service-item:nth-child(5)
.ll-service-content
.elementor-heading-title {
    left: 6vw;
    top: 9vh;

    width: 70vw;
    max-width: 900px;

    font-size: clamp(58px, 7vw, 112px);

    line-height: .8;

    z-index: 100;
}


/* 05 description */

.ll-services-stage
.ll-service-item:nth-child(5)
.ll-service-content
p {
    left: 6vw;
    bottom: 8vh;

    width: 30vw;
    max-width: 420px;

    color: #fff;

    z-index: 100;
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 1100px) {

    .ll-services-new {
        padding-left: 4vw;
        padding-right: 4vw;
    }

    .ll-services-stage {
        min-height: 650px;
    }


    /* 01 */

    .ll-services-stage
    .ll-service-item:nth-child(1)
    .ll-service-content
    .elementor-heading-title {

        left: 5vw;

        width: 32vw;

        font-size: clamp(50px, 6vw, 78px);
    }


    /* 02 */

    .ll-services-stage
    .ll-service-item:nth-child(2)
    .ll-service-image {

        left: 12%;
        width: 62%;
    }


    /* 03 */

    .ll-services-stage
    .ll-service-item:nth-child(3)
    .ll-service-content
    .elementor-heading-title {

        left: 5vw;

        width: 30vw;

        font-size: clamp(50px, 5.8vw, 78px);
    }


    /* 04 */

    .ll-services-stage
    .ll-service-item:nth-child(4)
    .ll-service-content
    .elementor-heading-title {

        left: 5vw;

        width: 72vw;

        font-size: clamp(68px, 8vw, 108px);
    }


    /* 05 */

    .ll-services-stage
    .ll-service-item:nth-child(5)
    .ll-service-content
    .elementor-heading-title {

        left: 5vw;

        font-size: clamp(52px, 7vw, 90px);
    }
}


/* ============================================================
   MOBILE
   COMPLETE RESET
   ============================================================ */

@media (max-width: 767px) {

    .ll-services-new {
        padding: 80px 20px;
        overflow: visible;
    }


    .ll-services-stage {
        height: auto;
        min-height: 0;

        margin-top: 50px;

        overflow: visible;

        background: transparent;

        border-radius: 0;
    }


    /* ----------------------------------------
       SERVICE
       ---------------------------------------- */

    .ll-services-stage
    .ll-service-item {

        position: relative !important;

        inset: auto !important;

        width: 100% !important;
        height: auto !important;

        min-height: 0 !important;

        display: flex !important;

        flex-direction: column !important;

        gap: 22px;

        margin: 0 0 100px !important;

        padding: 0 !important;

        overflow: visible !important;

        opacity: 1 !important;
        visibility: visible !important;

        transform: none !important;
    }


    /* ----------------------------------------
       NUMBER
       ---------------------------------------- */

    .ll-services-stage
    .ll-service-item
    .ll-service-number {

        position: relative !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        order: 1;

        width: auto !important;

        transform: none !important;

        z-index: 10 !important;
    }


    /* ----------------------------------------
       CONTENT
       ---------------------------------------- */

    .ll-services-stage
    .ll-service-item
    .ll-service-content {

        position: relative !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        width: 100% !important;
        height: auto !important;

        order: 2;

        transform: none !important;

        overflow: visible !important;

        z-index: 20 !important;
    }


    /* Reset heading */

    .ll-services-stage
    .ll-service-item
    .ll-service-content
    .elementor-heading-title {

        position: relative !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        width: 100% !important;

        transform: none !important;

        font-size: clamp(46px, 14vw, 76px) !important;

        line-height: .86;

        white-space: normal;
    }


    /* Reset description */

    .ll-services-stage
    .ll-service-item
    .ll-service-content
    p {

        position: relative !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        width: 100% !important;

        max-width: 500px !important;

        margin: 20px 0 0 !important;
    }


    /* ----------------------------------------
       IMAGE
       ---------------------------------------- */

    .ll-services-stage
    .ll-service-item
    .ll-service-image {

        position: relative !important;

        inset: auto !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        order: 3;

        width: 100% !important;

        height: 58vh !important;

        min-height: 360px;

        transform: none !important;

        border-radius: 4px;

        z-index: 5 !important;
    }


    /* ----------------------------------------
       05 MOBILE
       ---------------------------------------- */

    .ll-services-stage
    .ll-service-item:nth-child(5)::after {

        display: none;
    }


    /* ----------------------------------------
       INTRO
       ---------------------------------------- */

    .ll-services-new > .elementor-heading-title {

        font-size: clamp(50px, 15vw, 82px);
    }


    .ll-services-new > p {

        font-size: 16px;

        margin-top: 24px !important;
    }
}


/* ============================================================
   SMALL PHONES
   ============================================================ */

@media (max-width: 480px) {

    .ll-services-new {
        padding: 65px 18px;
    }

    .ll-services-stage {
        margin-top: 40px;
    }

    .ll-services-stage
    .ll-service-item {

        margin-bottom: 80px !important;
    }

    .ll-services-stage
    .ll-service-item
    .ll-service-content
    .elementor-heading-title {

        font-size: clamp(43px, 14vw, 68px) !important;
    }

    .ll-services-stage
    .ll-service-item
    .ll-service-image {

        height: 52vh !important;

        min-height: 330px;
    }
}