@media (max-width: 900px) {

    .highline-contact-info__grid {

        grid-template-columns:
            repeat(2, 1fr);

    }
    
    .highline-footer {
        padding: 50px 6vw 25px;
    }

    .highline-footer__main {
        grid-template-columns: 1fr 1fr;
        gap: 55px 30px;

        padding-bottom: 50px;
    }

    .highline-about-intro,
    .highline-about-locations {
        grid-template-columns: 1fr;
        gap: 50px;

        padding: 90px 6vw;
    }

    .highline-about-intro__content,
    .highline-about-locations__content {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .highline-about-belief {
        padding: 90px 6vw;
    }

    .highline-about-belief__content {
        grid-template-columns: 1fr 1fr;
        gap: 50px 30px;
    }

    .highline-service {
        grid-template-columns: 1fr;

        gap: 35px;

        padding: 80px 6vw;
    }

    .highline-service__main {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .highline-service ul {
        grid-column: auto;
    }

    .highline-services-process {
        grid-template-columns: 1fr;

        gap: 50px;

        padding: 90px 6vw;
    }

    .highline-services-process__steps {
        grid-template-columns: 1fr 1fr;
        gap: 50px 30px;
    }
    
    .highline-kids-gallery
    .wp-block-gallery {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

    }
    
    .highline-brand {
        flex: 0 0 25%;
        width: 25%;
        padding: 25px 20px;
    }
    
    .highline-work-grid {
        column-count: 2;
        column-gap: 20px;

        padding-left: 5vw;
        padding-right: 5vw;
    }

}

@media (max-width: 767px) {

    .cinematic-hero {
        height: 100vh;
        background: #090909;
    }


    /* -----------------------------------------------------
       STICKY HERO
       ----------------------------------------------------- */

    .cinematic-hero__sticky {

        position: sticky;

        top: 0;

        width: 100%;

        height: 100svh;

        overflow: hidden;
    }


    .cinematic-hero__scene {

        position: relative;

        width: 100%;
        height: 100%;

        overflow: hidden;

        background:
            radial-gradient(
                circle at 70% 35%,
                rgba(115,121,96,.05),
                transparent 45%
            ),
            #090909;
    }


    /* -----------------------------------------------------
       IMAGE FRAME
       ----------------------------------------------------- */
    .cinematic-hero__frame {

        position: absolute;

        top: 11svh;

        left: 6vw;

        right: auto;

        width: 88vw;

        height: 35svh;

        transform: none;

        overflow: hidden;

        z-index: 2;

        /*background: #111;*/

        /*border:*/
        /*    1px solid*/
        /*    rgba(255,255,255,.07);*/

        /*box-shadow:*/
        /*    0 25px 60px*/
        /*    rgba(0,0,0,.45);*/
    }


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

    .cinematic-hero__image-wrap {

        position: absolute;

        inset: 0;

        width: 100%;
        height: 100%;

        overflow: hidden;
    }


    /* -----------------------------------------------------
       IMAGES
       ----------------------------------------------------- */

    .cinematic-hero__image {

        position: absolute;

        inset: 0;

        width: 100%;
        height: 100%;

        object-fit: cover;

        opacity: 0;

        clip-path:
            polygon(
                100% 0,
                100% 0,
                100% 100%,
                100% 100%
            );

        transform:
            scale(1.08)
            translate3d(4%,0,0);

        will-change:
            clip-path,
            transform,
            opacity;
    }


    .cinematic-hero__image.is-active {

        opacity: 1;

        clip-path:
            polygon(
                0 0,
                100% 0,
                100% 100%,
                0 100%
            );

        transform:
            scale(1)
            translate3d(0,0,0);
    }


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

    .cinematic-hero__image::after {

        content: "";

        position: absolute;

        inset: 0;

        pointer-events: none;

        background:
            linear-gradient(
                180deg,
                rgba(0,0,0,.03),
                transparent 45%,
                rgba(0,0,0,.18)
            );
    }


    /* -----------------------------------------------------
       FRAME
       ----------------------------------------------------- */

    .cinematic-hero__frame::before {

        content: "";

        position: absolute;

        inset: 0;

        z-index: 20;

        pointer-events: none;

        /*border:*/
        /*    1px solid*/
        /*    rgba(255,255,255,.035);*/
    }


    /*.cinematic-hero__frame::after {*/

    /*    content: "";*/

    /*    position: absolute;*/

    /*    left: -1px;*/

    /*    top: 15%;*/

    /*    width: 2px;*/

    /*    height: 70%;*/

    /*    z-index: 30;*/

    /*    background:*/
    /*        rgba(115,121,96,.45);*/

    /*    opacity: .7;*/
    /*}*/


    /* -----------------------------------------------------
       TRANSITION EDGE
       ----------------------------------------------------- */

    .cinematic-hero__transition-edge {

        position: absolute;

        top: -20%;

        left: 0;

        width: 1px;

        height: 140%;

        z-index: 50;

        background:
            rgba(255,255,255,.65);

        opacity: 0;

        transform:
            rotate(12deg);

        transform-origin: center;

        pointer-events: none;

        box-shadow:
            0 0 12px
            rgba(255,255,255,.12);
    }


    /* -----------------------------------------------------
       TRANSITION SHADOW
       ----------------------------------------------------- */

    .cinematic-hero__transition-shadow {

        position: absolute;

        inset: 0;

        z-index: 40;

        pointer-events: none;

        opacity: 0;

        background:
            linear-gradient(
                90deg,
                transparent 30%,
                rgba(0,0,0,.20) 50%,
                transparent 70%
            );
    }


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

    .cinematic-hero__content {

        position: absolute;

        left: 6vw;

        right: 6vw;

        bottom: 14vh;

        top: auto;

        width: auto;

        z-index: 10;

        transform: none;

        display: flex;

        flex-direction: column;

        align-items: flex-start;
    }


    /* -----------------------------------------------------
       CATEGORY
       ----------------------------------------------------- */

    .cinematic-hero__eyebrow {

        margin-bottom: 50px;

        color: #9b9b96;

        font-size: 10px;

        line-height: 1;

        font-weight: 600;

        letter-spacing: .18em;

        text-transform: uppercase;
    }


    /* -----------------------------------------------------
       TITLE
       ----------------------------------------------------- */

    .cinematic-hero__content h1 {

        margin: 0;

        max-width: 330px;

        color: #f5f5f2;

        font-size:
            clamp(
                40px,
                11.5vw,
                48px
            );

        line-height: .96;

        letter-spacing: -.045em;

        font-weight: 500;
    }
    
    .cinematic-hero__content h1 div:first-child {
        margin-bottom: 30px;
    }


    /* -----------------------------------------------------
       DESCRIPTION
       ----------------------------------------------------- */

    .cinematic-hero__content p {

        max-width: 320px;

        margin-top: 17px;

        color: #969692;

        font-size: 15px;

        line-height: 1.5;
    }


    /* -----------------------------------------------------
       CTA
       ----------------------------------------------------- */

    .cinematic-hero__cta {

        display: inline-flex;

        align-items: center;

        gap: 10px;

        margin-top: 20px;

        color: #f5f5f2;

        font-size: 9px;

        line-height: 1;

        font-weight: 600;

        letter-spacing: .15em;

        text-decoration: none;
    }


    .cinematic-hero__cta span {

        font-size: 16px;
    }
    
    .cinematic-hero__button {
        margin-top: 10px;
    }


    /* -----------------------------------------------------
       COUNTER
       ----------------------------------------------------- */

    .cinematic-hero__counter {

        position: absolute;

        right: 6vw;

        bottom: 6svh;

        z-index: 60;

        display: flex;

        align-items: center;

        gap: 7px;

        color: #777773;

        font-size: 9px;

        line-height: 1;

        letter-spacing: .12em;
    }


    .cinematic-hero__counter span:first-child {

        color: #f5f5f2;
    }


    .cinematic-hero__counter::after {

        content: "";

        position: absolute;

        right: 0;

        bottom: -9px;

        width: 42px;

        height: 1px;

        background:
            rgba(255,255,255,.18);
    }

    .selected-work {

        padding:
            50px
            6vw;

    }


    .selected-work__intro {

        display: block;

        margin-bottom:
            65px;

    }


    .selected-work__intro-right {

        margin-top:
            35px;

        max-width:
            310px;

    }


    .selected-work h2 {

        font-size:
            clamp(
                42px,
                11vw,
                50px
            );

        line-height:
            .96;

    }


    .selected-work__grid {

        display:
            flex;

        flex-direction:
            column;

        gap:
            30px;

    }
    
    .selected-work__footer {
        padding-top: 50px;
    }


    .work-card,
    .work-card--large,
    .work-card--wide {

        width:
            100%;

    }


    .work-card__media,
    .work-card--large
    .work-card__media,
    .work-card--wide
    .work-card__media {

        height:
            72vw;

        max-height:
            none;

    }


    .work-card__arrow {

        opacity:
            1;

        transform:
            none;

        width:
            40px;

        height:
            40px;

    }


    .work-card h3 {

        font-size:
            18px;

    }

    .highline-work-intro {

        display: block;

        padding:
            50px
            6vw
            50px;

    }


    .highline-work-intro__content {

        margin-top:
            25px;

    }


    .highline-work-intro h1 {

        font-size:
            clamp(
                42px,
                11vw,
                52px
            );

    }


    .highline-work-filter {

        gap:
            15px;

        padding:
            0
            6vw
            40px;

        overflow-x:
            auto;

        flex-wrap:
            wrap;

    }


    .highline-work-filter__item {

        flex:
            0 0 auto;

    }


    .highline-work-grid {
        column-count: 1;
        column-gap: 0;

        padding-left: 20px;
        padding-right: 20px;
    }

    .highline-work-grid
    .highline-work-card {
        margin-bottom: 20px;
    }


    .highline-work-card,
    .highline-work-card--large {

        width:
            100%;

    }


    .highline-work-card__media,
    .highline-work-card--large
    .highline-work-card__media {

        height:
            60vh;

        max-height:
            none;

    }


    .highline-work-card__arrow {

        opacity:
            1;

        transform:
            none;

        width:
            38px;

        height:
            38px;

    }
    
    .highline-work-card__arrow::before {
        width: 9px;
        height: 9px;
        top: 12px;
        right: 12px;
    }
    
    .highline-work-card__arrow::after {
        width: 14px;
        top: 18px;
        left: 13px;
    }


    .highline-work-card__info h2 {

        font-size:
            18px;

    }

    .highline-project-header {

        padding:
            50px
            6vw
            50px;

    }


    .highline-project-header__top {

        margin-bottom: 0;

    }


    .highline-project-header h1 {

        font-size:
            clamp(
                48px,
                13vw,
                65px
            );

    }


    .highline-project-meta {

        display:
            grid;

        grid-template-columns:
            repeat(2, 1fr);

        gap:
            30px;

        margin-top:
            30px;

    }


    .highline-project-description {

        display:
            block;

        padding:
            50px
            6vw
            90px;

    }


    .highline-project-description__content {

        margin-top:
            30px;

        font-size:
            15px;

    }
    
    .highline-project-media {
        grid-template-columns: 1fr;

        gap: 16px;

        padding: 0 6vw 50px;
    }

    .highline-project-media__column {
        gap: 10px;
    }

    .highline-project-media__item {
        margin-bottom: 16px;
    }

    .highline-project-media__item--video {

        width:
            100%;

        max-width:
            100%;

    }

    .highline-page-header {
        padding: 105px 6vw 30px;
    }

    .highline-page-header__eyebrow {
        margin-bottom: 18px;
        font-size: 9px;
    }
    
    .highline-page-header__inner {
        display: block;
    }

    .highline-page-header h1 {
        max-width: 340px;

        font-size: clamp(42px, 11vw, 52px);
        line-height: .96;
        letter-spacing: -.045em;
    }

    .highline-page-header p {
        max-width: 310px;
        margin: 0;
        font-size: 15px;
        line-height: 1.55;
    }

    .highline-lightbox {
        padding: 20px;
    }

    .highline-lightbox__content {
        max-width: 92vw;
        max-height: 82vh;
    }

    .highline-lightbox__content img,
    .highline-lightbox__content video {
        max-width: 92vw;
        max-height: 82vh;
    }

    .highline-lightbox__close {
        top: 15px;
        right: 15px;

        font-size: 27px;
    }

    .highline-lightbox__counter {
        top: 25px;
        left: 20px;
    }

    .highline-lightbox__nav {
        top: auto;
        bottom: 20px;

        width: 45px;
        height: 45px;

        transform: none;
    }

    .highline-lightbox__nav:hover {
        transform: none;
    }

    .highline-lightbox__prev {
        left: 20px;
    }

    .highline-lightbox__next {
        right: 20px;
    }

    .highline-project-media__item {
        margin-bottom: 16px;
    }

    .highline-about {

        padding:
            50px
            6vw;

    }


    .highline-about__content {

        display:
            block;

    }


    .highline-about h2 {

        font-size:
            clamp(
                42px,
                11vw,
                52px
            );

    }


    .highline-about__text {

        margin-top:
            45px;

        max-width:
            320px;

    }

    section.highline-services {

        padding:
            50px
            6vw;

    }


    section.highline-services .highline-services__intro {

        display:
            block;

        margin-bottom:
            30px;

    }


    section.highline-services .highline-services__intro h2 {

        margin-top:
            20px;

        font-size:
            clamp(
                42px,
                11vw,
                52px
            );

    }


    section.highline-services .highline-service {

        display:
            grid;

        grid-template-columns:
            40px 1fr;

        gap:
            15px;

        padding:
            25px 0;

    }


    section.highline-services .highline-service h3 {

        font-size:
            20px;

    }


    section.highline-services .highline-service p {

        grid-column:
            2;

        font-size:
            13px;

    }


    section.highline-services .highline-services__footer {

        justify-content:
            flex-start;
        padding-top: 50px;

    }

    .highline-brands {
        padding: 50px 6vw;
    }

    .highline-brands__intro {
        display: block;
        margin-bottom: 40px;
    }

    .highline-brands h2 {
        max-width: 340px;
        font-size: clamp(42px, 11vw, 52px);
        line-height: .96;
    }

    .highline-brands__description {
        margin-top: 40px;
        max-width: 310px;
    }

    .highline-brands__description p {
        font-size: 13px;
        line-height: 1.55;
    }
    
    .highline-brands__footer {
        padding-top: 50px;
    }

    .highline-enquiry {

        padding:
            50px
            6vw;

    }
    
    .highline-enquiry__inner .col-layout {
        display: block;
    }

    .highline-enquiry h2 {

        font-size:
            clamp(
                48px,
                13vw,
                62px
            );

    }

    .highline-clients-archive {
        padding: 0 6vw 110px;
    }

    .highline-clients-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .highline-client-card {
        min-height: 120px;
    }

    .highline-client-card__inner {
        min-height: 120px;
        padding: 25px 15px;
    }

    .highline-client-card img {
        max-width: 105px;
        max-height: fit-content;
    }

    .highline-client-card__name {
        font-size: 9px;
        letter-spacing: .12em;
    }


    /* CTA */

    .highline-clients-cta {
        padding: 110px 6vw 120px;
    }

    .highline-clients-cta h2 {
        max-width: 340px;

        font-size: clamp(48px, 12vw, 62px);
        line-height: .94;
    }

    .highline-clients-cta .highline-link {
        margin-top: 35px;
    }

    .highline-enquire__panel {

        width: 100%;
        overflow-x: hidden;

    }


    .highline-enquire__inner {

        padding:
            80px 24px 40px;

    }


    .highline-enquire__close {

        top: 18px;
        right: 18px;

    }


    .highline-enquire__intro h2 {

        font-size:
            clamp(48px, 15vw, 68px);

    }


    .highline-enquire__intro {

        margin-bottom: 50px;

    }

    .highline-contact-info {

        padding:
            50px 24px;

    }


    .highline-contact-info__grid {

        grid-template-columns:
            1fr;

        gap:
            30px;

    }


    .highline-contact-info__item {

        min-height:
            auto;

    }


    .highline-contact-cta {

        padding:
            50px 24px;

    }


    .highline-contact-cta__button {

        width: 100%;

        gap: 20px;

    }

    .highline-footer {
        padding: 60px 6vw 25px;
    }

    .highline-footer__main {
        grid-template-columns: 1fr;

        gap: 45px;

        padding-bottom: 60px;
    }

    .highline-footer__brand p {
        margin-top: 25px;
    }

    .highline-footer__bottom {
        align-items: flex-start;
        flex-direction: column;

        gap: 12px;
    }

    .highline-about-belief__content {
        grid-template-columns: 1fr;
    }

    .highline-about-cta {
        padding: 90px 6vw;
    }

    .highline-service {
        padding: 50px 6vw;
    }

    .highline-services-process__steps {
        grid-template-columns: 1fr;
    }

    .highline-services-cta {
        padding: 90px 6vw;
    }
    
    .highline-about-intro,
    .highline-about-locations {
        padding: 50px 6vw;
         gap: 15px;
    }
    
    .highline-about-intro__content, .highline-about-locations__content {
        gap: 30px;
    }
    
    .highline-service__main {
        gap: 30px;
    }
    
    .highline-work-page .navigation.pagination {
        margin-bottom: 60px;
    }

    .highline-work-page .navigation.pagination .nav-links {
        gap: 6px;
    }

    .highline-work-page .navigation.pagination .page-numbers {
        min-width: 38px;
        height: 38px;

        font-size: 11px;
    }
    
    .highline-kids-gallery {

        width: calc(100% - 32px);

        margin-bottom: 80px;

    }


    .highline-kids-gallery
    .wp-block-gallery {

        grid-template-columns: 1fr;

        gap: 8px !important;

    }
    
    .highline-enquire .wpcf7-spinner {
        right: 0;
        background-color: #676767;
    }
    
    .highline-brand {
        flex: 0 0 50%;
        width: 50%;
        padding: 20px 15px;
    }

    .highline-brand img {
        max-width: 130px;
        height: auto;
    }
    
    .highline-brands-carousel__dots {
        flex-wrap: wrap;
        gap: 12px;
    }

}