/* =========================================================
   MARAMATTA EXPERIENCE LANDING PAGE
   01 HERO
   ========================================================= */

/* =========================================================
   HERO FULL-BLEED FOUNDATION
   ========================================================= */

.ms-landing > .landing-hero {

    position: relative;

    width: 100vw !important;
    max-width: 100vw !important;

    min-height:
        clamp(
            680px,
            calc(100svh - var(--header-height, 80px)),
            900px
        );

   /* margin-left: 50%;*/
    /*transform: translateX(-50%);*/

    padding: 0;

    overflow: hidden;

    background: var(--ms-green);
}



/* =========================================================
   HERO FULL-BLEED FRAME
   ========================================================= */

.landing-hero > .container {

    position: relative;

    width: 100vw !important;
    max-width: 100vw !important;

    height: 100%;

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

    /*left: 50%;*/
    /*transform: translateX(-50%);*/

}


/* =========================================================
   HERO BODY
   FULL-BLEED POSITIONING FRAME
   ========================================================= */

.landing-hero,
.landing-hero .section-body {

    position: relative;

    width: 100%;

    min-height:
        clamp(
            680px,
            calc(100svh - var(--header-height, 80px)),
            900px
        );

    margin: 0;

    padding: 0;

    overflow: hidden;
    
    
}



/* =========================================================
   HERO MEDIA
   ========================================================= */

.landing-hero__media {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    margin: 0;

    overflow: hidden;

    z-index: 0;
}


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

.landing-hero__media > .landing-hero__image {

    display: block;

    width: 100%;
    height: 100%;

    max-width: none;

    object-fit: cover;

    object-position: center center;

    transform: scale(1.01);

    transition:
        transform 1.8s
        cubic-bezier(.22,.61,.36,1);
}


/*
 * Very restrained image movement.
 *
 * The photograph should feel alive,
 * never like a promotional carousel.
 */

.landing-hero:hover
.landing-hero__image {
    transform: scale(1.035);
}


/* =========================================================
   IMAGE TONAL LAYERS
   ========================================================= */

/*
 * Bottom-to-top gradient gives the typography
 * enough contrast while preserving the photograph.
 */

.landing-hero__media::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.08) 0%,
            rgba(0,0,0,.10) 35%,
            rgba(0,0,0,.48) 100%
        );

    pointer-events: none;
}


/*
 * Additional side atmosphere.
 *
 * This helps the copy sit naturally within the
 * image instead of looking like text pasted on it.
 */

.landing-hero__media::before {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(20,32,19,.42) 0%,
            rgba(20,32,19,.18) 38%,
            transparent 70%
        );

    pointer-events: none;

    z-index: 1;
}

/* ---------------------------------------------------------
   CINEMATIC OVERLAY
   --------------------------------------------------------- */

.landing-hero::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 1;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(20, 30, 17, .72) 0%,
            rgba(20, 30, 17, .48) 28%,
            rgba(20, 30, 17, .12) 58%,
            rgba(20, 30, 17, .02) 100%
        );
}




/* =========================================================
   HERO CONTENT
   ========================================================= */

.landing-hero__content {
    position: absolute;/*position: relative;*/

   isolation: isolate;

    display: flex;

    flex-direction: column;

    justify-content: center;/*justify-content: flex-end;*/

    min-height: 0;/*min-height: min(
        88vh,
        900px
    );*/

   max-width: 600px;

    padding:
        clamp(5rem, 11vw, 9rem)
        clamp(1.25rem, 5vw, 5rem)
        clamp(3rem, 7vw, 6rem);

    color: var(--ms-white);
    
    
    z-index: 3;

    left: clamp(2rem, 8vw, 9rem);/*left: clamp(32px, 7vw, 110px);*/
    top: 50%;

    width: min(600px, 42vw);

    transform: translateY(-50%);

    padding-block: 2rem;


}



/* =========================================================
   EYEBROW
   ========================================================= */

.landing-hero__eyebrow {
    display: inline-flex;

    align-items: center;

    width: fit-content;

    margin-bottom: 1.5rem;/*margin-bottom: var(--space-md);*/

    color: var(--ms-white);

    font-size: .72rem;

    font-weight: 700;

    letter-spacing: .18em;

    text-transform: uppercase;

    line-height: 1.4;
    
    gap: .85rem;

}


/*
 * Small editorial marker.
 */

.landing-hero__eyebrow::before {
    content: "";

    display: inline-block;

    width: 30px;/*width: 34px;*/
    height: 1px;

    margin-right: .8rem;

    background: currentColor;/*background:
        rgba(255,255,255,.75);*/

    opacity: .7;
}


/* =========================================================
   TITLE
   ========================================================= */

.landing-hero__content .landing-hero__title {
    max-width: 620px;/*max-width: 9ch;*/

    margin: 0 0 1.5rem;/*margin: 0 0 var(--space-lg);*/

    color: var(--ms-white) !important;

    font-size: clamp(
        4rem,
        6.2vw,
        7rem
    );/*font-size: clamp(
        3.4rem,
        7vw,
        7.2rem
    );*/

    font-weight: 500;

    line-height: .92;/*line-height: .94;*/

    letter-spacing: -.045em;
    
}


/* =========================================================
   INTRODUCTION
   ========================================================= */

.landing-hero__intro {
    max-width: 560px;/*max-width: 56ch;*/

    margin: 0 0 2rem;/*margin: 0 0 var(--space-xl);*/

    color:
        rgba(255,255,255,.92);

    font-size: clamp(
        1rem,
        1.15vw,
        1.18rem
    );/*font-size: clamp(
        .95rem,
        1.3vw,
        1.12rem
    );*/
 
    line-height: 1.7;
}


/* =========================================================
   ACTIONS
   ========================================================= */

.landing-hero__actions {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 1.5rem;/*gap: var(--space-lg);*/
    
}


/* =========================================================
   PRIMARY CTA
   ========================================================= */

.landing-hero__button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: .9rem;

    min-height: 52px;

    padding:
        .9rem 1.35rem;

    background: var(--ms-white);

    color: var(--ms-green);

    text-decoration: none;

    font-size: .72rem;

    font-weight: 700;

    letter-spacing: .14em;/*letter-spacing: .08em;*/

    text-transform: uppercase;

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease;
   
}


.landing-hero__button span {
    font-size: 1.1rem;

    line-height: 1;

    transition:
        transform .3s ease;
}


.landing-hero__button:hover {
    background: var(--ms-orange);

    color: var(--ms-white);

    transform: translateY(-2px);
    
}


.landing-hero__button:hover span {
    transform: translateX(4px);
}


/* =========================================================
   SECONDARY LINK
   ========================================================= */

.landing-hero__actions .landing-hero__link {
    position: relative;
    
    display: inline-flex;

    align-items: center;

    gap: .55rem;

    color: var(--ms-white);

    text-decoration: none;

    font-size: .72rem;

    font-weight: 700;

    letter-spacing: .14em;

    text-transform: uppercase;

    border-bottom:
        1px solid
        rgba(255,255,255,.55);

    padding-bottom: .35rem;

    transition:
        border-color .3s ease,
        opacity .3s ease;

    min-height: 54px;

}

.landing-hero__actions .landing-hero__link::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 7px;

    height: 1px;

    background: currentColor;

    opacity: .55;

    transform-origin: left;
    transition: transform .3s ease;
}


.landing-hero__actions .landing-hero__link span {
    font-size: 1rem;

    transition:
        transform .3s ease;
}


.landing-hero__actions .landing-hero__link:hover {
    border-color: var(--ms-white);

    opacity: .85;
}
.landing-hero__actions .landing-hero__link:hover::after {
    transform: scaleX(.45);
}


.landing-hero__actions .landing-hero__link:hover span {
    transform: translateY(3px);
}

/* =========================================================
   TRANSITION INTO ORIENTATION
   ========================================================= */

.landing-hero + .landing-orientation {
    position: relative;
    z-index: 2;
}





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

@media (max-width: 1024px) {

    .landing-hero,
    .landing-hero .section-body {
        min-height: 760px;/*min-height: 82vh;*/
    }


    .landing-hero__content {
        left: 6vw;
        
        min-height: 82vh;

        width: min(560px, 55vw);/*max-width: 680px;*/

        padding:
            5rem
            2rem
            4rem;
    }


    .landing-hero__title {
        font-size: clamp(
            3.5rem,
            7vw,
            5.5rem
        );
    }
    

}


/* =========================================================
   MOBILE
   =========================================================*/

@media (max-width: 767px) {
    
    /*.ms-landing > .landing-hero {

        /*min-height:
            clamp(
                680px,
                100svh,
                820px
            );
    }*/
    .ms-landing .landing-hero{
        
         position: relative;

        width: 100%;

        min-height: 0;/*min-height: auto;*/

        height: auto;

        margin: 0;

        padding: 0;

        overflow: hidden;

        background: var(--ms-green);
    }
    
 

    /* =========================================
       IMPORTANT:
       REMOVE DESKTOP HERO OVERLAY ON MOBILE
       ========================================= */

    .landing-hero::after {

        display: none;
    }
    
    .landing-hero > .container {
        width: 100%;
        max-width: none;

        padding: 0;
    }

    
    /* Stronger mobile photographic framing */
    .landing-hero .section-body {

        /*min-height: clamp( 680px, 100svh, 820px);*/
        position: relative;

        display: flex;
        flex-direction: column;

        width: 100%;

        min-height: auto;
        height: auto;

        margin: 0;
        padding: 0;

        overflow: hidden;

        background: var(--ms-green);
    
    }
    
   
   
 
    /* =========================================================
   MOBILE HERO MEDIA
   DEFINITE MEDIA FRAME
   =========================================================*/
.landing-hero__media {

        position: relative;

        order: 1;

        display: block;

        flex: 0 0 auto;

        width: 100%;

        height: clamp(
            350px,
            52svh,
            480px
        );

        min-height: 350px;

        margin: 0;
        padding: 0;

        overflow: hidden;

        background: #1f351d;

        z-index: 0;

        isolation: isolate;
    }
    

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

    .landing-hero__media::before {

        content: "";

        position: absolute;

        inset: 0;

        z-index: 1;

        pointer-events: none;

        background:
            linear-gradient(
                180deg,
                rgba(20,32,19,.02) 0%,
                rgba(20,32,19,.04) 50%,
                rgba(20,32,19,.28) 100%
            );
    }

    .landing-hero__media::after {

        content: "";

        position: absolute;

        inset: 0;

        z-index: 2;

        pointer-events: none;

        background:
            linear-gradient(
                180deg,
                transparent 60%,
                rgba(20,32,19,.25) 100%
            );
    }
    

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

    .landing-hero__image {

        position: absolute;

        inset: 0;

        display: block;

        width: 100%;
        height: 100%;

        max-width: none;
        max-height: none;

        margin: 0;

        object-fit: cover;

        /*
         * Start here.
         * Adjust only the first percentage if
         * the migration needs different framing.
         */
        object-position: 58% center;

        transform: scale(1.015);

        transition:
            transform 1.8s
            cubic-bezier(.22,.61,.36,1);

        z-index: 0;
    }

     
      /* =========================================
       MOBILE CONTENT
       ========================================= */

    .landing-hero__content {

        position: relative;

        order: 2;

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

        transform: none;

        width: 100%;

        min-height: auto;

        display: flex;

        flex-direction: column;

        justify-content: center;

        padding:
            2.75rem
            1.5rem
            3rem;

        background: var(--ms-green);

        color: var(--ms-white);

        z-index: 3;
    }

   


    .landing-hero__eyebrow {

        margin-bottom: 1.15rem;

        font-size: .64rem;

        letter-spacing: .16em;
    }


    .landing-hero__eyebrow::before {

        width: 24px;

        margin-right: .55rem;
    }


  
    .landing-hero__content .landing-hero__title {

        max-width: 9ch;

        margin: 0 0 1.25rem;

        font-size:
            clamp(
                3rem,
                12vw,
                4.25rem
            );

        line-height: .91;

        letter-spacing: -.045em;
    }


    
    .landing-hero__intro {

        max-width: 42ch;

        margin: 0 0 1.75rem;

        font-size: .94rem;

        line-height: 1.65;

        color:
            rgba(255,255,255,.88);
    }


    .landing-hero__actions {

        display: flex;

        flex-direction: column;

        align-items: flex-start;

        gap: .85rem;
    }


    .landing-hero__button {

        width: auto;

        min-height: 52px;

        padding:
            .9rem
            1.2rem;

        font-size: .64rem;
    }
    .landing-hero__link {

        min-height: 44px;

        font-size: .64rem;
    }

}




/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .ms-landing > .landing-hero {

        min-height: auto;

        height: auto;
    }
    
    .landing-hero .section-body {

        min-height: auto;

        height: auto;
    } 
    
    
    
    .landing-hero__media {

        /*height: clamp(
            350px,
            44svh,
            430px
        );*/
        
        width: 100%;

        height: 390px;

        min-height: 390px;
    }
    
    
    .landing-hero__image {

        object-position: 60% center;
    }


   
    .landing-hero__content {

         padding:
            2.35rem
            1.25rem
            2.5rem;
    }

    
    .landing-hero__content .landing-hero__title {

        font-size:
            clamp(
                2.8rem,
                13vw,
                3.7rem
            );

        max-width: 9ch;
        
        line-height: .91;
    }

    .landing-hero__intro {

        font-size: .9rem;

        line-height: 1.6;
        
    }
    .landing-hero__actions {
        align-items: flex-start;
        flex-direction: column;
    }


    .landing-hero__button {
        width: auto;/*width: 100%;*/
    }
}















/* =========================================================
   TOUCH DEVICES
   ========================================================= */

@media (hover: none) {

    .landing-hero:hover
    .landing-hero__image {
        transform: none;
    }


    .landing-hero__button:hover {
        transform: none;
    }

}