/*
Theme Name: Edwards Family Meats – Mobile Fix
Theme URI: https://edwardsfamilymeats.com.au/
Author: Valeryia Klushyna
Description: Custom WordPress theme for Edwards Family Meats, converted from the original static HTML/CSS/JS site.
Version: 1.1.0
Text Domain: edwards-family-meats
*/

/* =====================================================

   RESET

\===================================================== */



* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



html {

    scroll-behavior: smooth;

}



html,

body {

    width: 100%;

    min-height: 100%;

}



body {

    background: #051019;

    color: #ffffff;

    font-family: Georgia, "Times New Roman", serif;

    overflow-x: hidden;

}





/* =====================================================

   MAIN STACKED SCROLL

   Следующая секция поднимается и накрывает предыдущую

\===================================================== */



.stack-section {

    position: sticky;

    top: 0;

    width: 100%;

    transform: translateZ(0);

}



.hero-stack {

    z-index: 1;

}



.story-stack {

    z-index: 2;



    box-shadow:

        0 -28px 55px rgba(0, 0, 0, 0.18);

}



.meats-stack {

    z-index: 3;



    box-shadow:

        0 -30px 60px rgba(0, 0, 0, 0.22);

}



.visit-stack {

    z-index: 4;



    box-shadow:

        0 -30px 60px rgba(0, 0, 0, 0.28);

}



.site-footer {

    position: relative;

    z-index: 5;

}





/* =====================================================

   HERO

\===================================================== */



.hero {

    width: 100%;

    height: 100vh;

    min-height: 700px;



    position: sticky;

    top: 0;



    overflow: hidden;



    background: #051019;

}





/* HERO IMAGE */



.hero::before {

    content: "";



    position: absolute;

    inset: 0;



    background-image:

        linear-gradient(

            rgba(0, 8, 14, 0.05),

            rgba(0, 8, 14, 0.08)

        ),

        url("images/hero.jpg.png");



    background-size: cover;

    background-position: center center;

    background-repeat: no-repeat;



    opacity: 0;

    transform: scale(1.08);



    animation:

        heroImageStart

        1.7s

        cubic-bezier(0.22, 1, 0.36, 1)

        forwards;

}



@keyframes heroImageStart {



    from {

        opacity: 0;

        transform: scale(1.08);

    }



    to {

        opacity: 1;

        transform: scale(1);

    }



}





/* =====================================================

   NAVIGATION

\===================================================== */



.navbar {

    width: min(1240px, calc(100% - 80px));



    margin: 0 auto;



    padding-top: 25px;



    display: grid;



    grid-template-columns:

        1fr

        300px

        1fr;



    align-items: start;



    position: relative;

    z-index: 10;



    opacity: 0;

    transform: translateY(-22px);



    animation:

        navStart

        0.9s

        0.5s

        cubic-bezier(0.22, 1, 0.36, 1)

        forwards;

}





@keyframes navStart {



    to {

        opacity: 1;

        transform: translateY(0);

    }



}





.nav-left,

.nav-right {

    display: flex;

    align-items: flex-start;



    padding-top: 30px;

}





.nav-left {

    gap: 48px;

}





.nav-right {

    justify-content: flex-end;



    gap: 55px;

}





.navbar a {

    position: relative;



    color: #ffffff;



    text-decoration: none;



    font-size: 13px;

    font-weight: 400;



    letter-spacing: 2px;



    white-space: nowrap;



    transition:

        opacity 0.3s ease,

        transform 0.3s ease;

}





.navbar a:hover {

    opacity: 0.65;



    transform: translateY(-2px);

}





/* ACTIVE LINE */



.navbar a.active::after {

    content: "";



    position: absolute;



    left: 0;

    bottom: -12px;



    width: 43px;

    height: 2px;



    background: #d71920;



    transform-origin: left center;



    transform: scaleX(0);



    animation:

        activeLineStart

        0.8s

        0.9s

        ease

        forwards;

}





@keyframes activeLineStart {



    to {

        transform: scaleX(1);

    }



}





/* ORDERS */



.orders {

    line-height: 1.2;

}





.orders span {

    display: block;



    margin-top: 5px;



    color: #c9a33d;



    font-size: 9px;



    letter-spacing: 1px;

}





/* =====================================================

   LOGO

\===================================================== */



.logo {

    display: flex;



    justify-content: center;



    align-items: flex-start;



    opacity: 0;



    transform:

        translateY(-25px)

        scale(0.93);



    animation:

        logoStart

        1s

        0.25s

        cubic-bezier(0.22, 1, 0.36, 1)

        forwards;

}





@keyframes logoStart {



    to {

        opacity: 1;



        transform:

            translateY(0)

            scale(1);

    }



}





.logo img {

    width: 245px;



    height: auto;



    display: block;

}





/* =====================================================

   HERO COPY

\===================================================== */



.hero-copy {

    position: absolute;



    left: 50%;

    bottom: 9%;



    transform: translateX(-50%);



    width: min(900px, calc(100% - 60px));



    text-align: center;



    z-index: 5;

}





.hero-kicker {

    margin-bottom: 14px;



    font-size: 11px;



    letter-spacing: 5px;



    color: rgba(255, 255, 255, 0.78);



    opacity: 0;



    transform: translateY(22px);



    animation:

        heroTextStart

        0.8s

        0.8s

        cubic-bezier(0.22, 1, 0.36, 1)

        forwards;

}





.hero-copy h1 {

    margin: 0;



    font-size:

        clamp(

            38px,

            5vw,

            74px

        );



    line-height: 0.95;



    font-weight: 400;



    letter-spacing: -1.5px;



    text-transform: uppercase;

}





.hero-copy h1 span {

    display: block;



    opacity: 0;



    transform: translateY(45px);

}





.hero-copy h1 span:first-child {

    animation:

        heroTextStart

        1s

        1s

        cubic-bezier(0.22, 1, 0.36, 1)

        forwards;

}





.hero-copy h1 span:last-child {

    animation:

        heroTextStart

        1s

        1.2s

        cubic-bezier(0.22, 1, 0.36, 1)

        forwards;

}





.hero-description {

    max-width: 560px;



    margin: 22px auto 0;



    font-size: 16px;



    line-height: 1.55;



    color: rgba(255, 255, 255, 0.86);



    opacity: 0;



    transform: translateY(25px);



    animation:

        heroTextStart

        0.9s

        1.45s

        cubic-bezier(0.22, 1, 0.36, 1)

        forwards;

}





@keyframes heroTextStart {



    to {

        opacity: 1;

        transform: translateY(0);

    }



}





/* =====================================================

   SECTION LABEL

\===================================================== */



.section-label {

    display: flex;



    align-items: center;



    gap: 18px;



    margin-bottom: 16px;

}





.section-label span:first-child {

    font-size: 13px;



    font-weight: 400;



    letter-spacing: 5px;

}





.red-line {

    display: block;



    width: 48px;

    height: 2px;



    background: #d71920;



    transform-origin: left center;



    transform: scaleX(0);



    transition:

        transform

        0.8s

        cubic-bezier(0.22, 1, 0.36, 1);

}





.visible .red-line {

    transform: scaleX(1);

}





/* =====================================================

   OUR STORY

\===================================================== */



.story {

    width: 100%;



    min-height: 630px;



    position: sticky;

    top: 0;



    display: flex;



    align-items: center;



    overflow: hidden;



    background:

        url("images/story.png")

        center center /

        cover

        no-repeat;

}





.story::after {

    content: "";



    position: absolute;



    inset: 0;



    background:

        linear-gradient(

            90deg,

            rgba(0,0,0,0.01) 0%,

            rgba(0,8,14,0.02) 38%,

            rgba(0,12,20,0.09) 55%,

            rgba(0,8,14,0.02) 100%

        );



    pointer-events: none;

}





.story-content {

    width: 590px;



    position: relative;



    z-index: 2;



    margin-left: 50%;



    opacity: 0;



    transform:

        translateX(-20%)

        translateY(40px);



    transition:

        opacity

        0.95s

        ease,



        transform

        1.05s

        cubic-bezier(0.22, 1, 0.36, 1);

}





.story-content.visible {

    opacity: 1;



    transform:

        translateX(-20%)

        translateY(0);

}





.story h2 {

    margin: 0 0 8px;



    font-size:

        clamp(

            37px,

            3vw,

            52px

        );



    line-height: 1;



    font-weight: 400;



    letter-spacing: -0.5px;



    text-transform: uppercase;

}





.story h2 strong {

    font-weight: 700;

}





.story-subtitle {

    margin-bottom: 31px;



    font-size: 14px;



    line-height: 1.4;



    letter-spacing: 4px;



    text-transform: uppercase;

}





.story-text {

    max-width: 560px;



    font-size: 17px;



    line-height: 1.65;



    color: rgba(255,255,255,0.92);

}





/* =====================================================

   OUR MEATS

\===================================================== */



.meats {

    width: 100%;



    position: sticky;



    top: 0;



    padding:

        48px

        0

        42px;



    background:

        radial-gradient(

            circle at 50% 0%,

            #0b202c 0%,

            #051019 67%

        );



    color: #ffffff;

}





.meats-inner {

    width: calc(100% - 80px);



    max-width: 1450px;



    margin: 0 auto;

}





/* TITLE */



.meats-label {

    margin-bottom: 25px;



    opacity: 0;



    transform: translateY(26px);



    transition:

        opacity

        0.8s

        ease,



        transform

        0.9s

        cubic-bezier(0.22, 1, 0.36, 1);

}





.meats-label.visible {

    opacity: 1;



    transform: translateY(0);

}





/* GRID */



.meats-grid {

    width: 100%;



    display: grid;



    grid-template-columns:

        repeat(

            3,

            minmax(0, 1fr)

        );



    gap: 20px;

}





/* CARDS */



.meat-card {

    width: 100%;



    min-width: 0;



    text-align: center;



    opacity: 0;



    transform:

        translateY(60px)

        scale(0.955);



    transition:

        opacity

        0.9s

        ease,



        transform

        1s

        cubic-bezier(0.22, 1, 0.36, 1);

}





.meat-card.visible {

    opacity: 1;



    transform:

        translateY(0)

        scale(1);

}





/* cards appear one by one */



.meat-card:nth-child(1) {

    transition-delay: 0.03s;

}





.meat-card:nth-child(2) {

    transition-delay: 0.17s;

}





.meat-card:nth-child(3) {

    transition-delay: 0.31s;

}





/* IMAGE CONTAINER */



.meat-card-image {

    width: 100%;



    aspect-ratio: 1 / 1;



    overflow: hidden;



    background: #071118;

}





/* IMAGE START STATE */



.meat-card-image img {

    width: 100%;



    height: 100%;



    display: block;



    object-fit: cover;



    transform: scale(1.075);



    transition:

        transform

        1.25s

        cubic-bezier(0.22, 1, 0.36, 1),



        filter

        0.5s

        ease;

}





/* WHEN CARD APPEARS */



.meat-card.visible

.meat-card-image img {

    transform: scale(1);

}





/* HOVER AFTER APPEARING */



.meat-card.visible:hover

.meat-card-image img {

    transform: scale(1.045);



    filter: brightness(1.06);

}





/* IMAGE POSITION */



.meat-img {

    object-position: center center;

}





.fish-img {

    object-position: 50% 42%;

}





.smallgoods-img {

    object-position: center center;

}





/* TEXT */



.meat-card h3 {

    margin: 15px 0 5px;



    font-size: 25px;



    line-height: 1;



    font-weight: 400;



    opacity: 0;



    transform: translateY(10px);



    transition:

        opacity

        0.55s

        ease

        0.3s,



        transform

        0.65s

        ease

        0.3s;

}





.meat-card.visible h3 {

    opacity: 1;



    transform: translateY(0);

}





.meat-card p {

    margin: 0;



    font-size: 16px;



    line-height: 1.4;



    color: rgba(255,255,255,0.90);



    opacity: 0;



    transform: translateY(8px);



    transition:

        opacity

        0.55s

        ease

        0.4s,



        transform

        0.65s

        ease

        0.4s;

}





.meat-card.visible p {

    opacity: 1;



    transform: translateY(0);

}





/* =====================================================

   VISIT US

\===================================================== */



.visit-banner {

    width: 100%;



    height: 360px;



    position: sticky;



    top: 0;



    overflow: hidden;



    background: #051019;



    border-top:

        1px solid

        rgba(255,255,255,0.08);



    border-bottom:

        1px solid

        rgba(255,255,255,0.15);

}





.visit-background {

    position: absolute;



    inset: 0;



    width: 100%;



    height: 100%;



    object-fit: cover;



    object-position: center center;



    display: block;



    transform: scale(1.04);



    transition:

        transform

        1.4s

        cubic-bezier(0.22,1,0.36,1);

}





.visit-overlay.visible

~ .visit-background {

    transform: scale(1);

}





.visit-banner:hover

.visit-background {

    transform: scale(1.015);

}





.visit-overlay {

    position: absolute;



    top: 50%;



    left: 39%;



    width: 450px;



    z-index: 2;



    color: #ffffff;



    opacity: 0;



    transform:

        translateY(

            calc(-50% + 35px)

        );



    transition:

        opacity

        0.9s

        ease,



        transform

        1s

        cubic-bezier(0.22,1,0.36,1);

}





.visit-overlay.visible {

    opacity: 1;



    transform:

        translateY(-50%);

}





.visit-label {

    margin-bottom: 13px;

}





.visit-overlay h2 {

    margin: 0 0 21px;



    font-size: 30px;



    line-height: 1.05;



    font-weight: 400;



    letter-spacing: 0.5px;

}





/* CONTACTS */



.visit-contact {

    display: flex;



    align-items: center;



    gap: 14px;



    margin-bottom: 11px;



    font-size: 16px;



    line-height: 1.2;

}





.visit-icon {

    width: 27px;



    flex-shrink: 0;



    display: flex;



    align-items: center;



    justify-content: center;

}





.visit-icon svg {

    width: 20px;



    height: 20px;



    fill: #ffffff;

}





.visit-contact a {

    color: #ffffff;



    text-decoration: none;



    transition: opacity 0.25s ease;

}





.visit-contact a:hover {

    opacity: 0.65;

}





/* SOCIALS */



.visit-socials {

    display: flex;



    align-items: center;



    gap: 12px;



    margin-top: 12px;

}





.social-icon {

    width: 32px;



    height: 32px;



    display: flex;



    align-items: center;



    justify-content: center;



    color: #ffffff;



    text-decoration: none;



    transition:

        opacity 0.25s ease,

        transform 0.25s ease;

}





.social-icon:hover {

    opacity: 0.7;



    transform: translateY(-2px);

}





.social-icon svg {

    width: 30px;



    height: 30px;



    fill: #ffffff;

}





.instagram svg {

    fill: none;



    stroke: #ffffff;



    stroke-width: 1.8;

}





.instagram-dot {

    fill: #ffffff;



    stroke: none;

}





/* =====================================================

   FOOTER

\===================================================== */



.site-footer {

    width: 100%;



    background:

        radial-gradient(

            circle at 50% 0%,

            #0b202c 0%,

            #051019 70%

        );



    border-top:

        1px solid

        rgba(255,255,255,0.12);



    padding:

        18px

        20px;

}





.footer-inner {

    max-width: 1450px;



    margin: 0 auto;



    display: flex;



    justify-content: center;



    align-items: center;



    gap: 42px;



    flex-wrap: wrap;

}





.footer-inner a {

    color: #ffffff;



    text-decoration: none;



    font-size: 13px;



    letter-spacing: 1.5px;



    transition:

        opacity 0.25s ease,

        transform 0.25s ease;

}





.footer-inner a:hover {

    opacity: 0.65;



    transform: translateY(-2px);

}





/* =====================================================

   TABLET

\===================================================== */



@media (max-width: 1100px) {



    .navbar {

        width: calc(100% - 40px);



        grid-template-columns:

            1fr

            190px

            1fr;

    }





    .logo img {

        width: 185px;

    }





    .nav-left,

    .nav-right {

        gap: 20px;

    }





    .navbar a {

        font-size: 10px;



        letter-spacing: 1px;

    }





    .story {

        min-height: 570px;

    }





    .story-content {

        width: 480px;



        margin-left: 46%;



        transform:

            translateY(35px);

    }





    .story-content.visible {

        transform:

            translateY(0);

    }





    .story h2 {

        font-size: 38px;

    }





    .story-text {

        font-size: 15px;

    }





    .meats-inner {

        width: calc(100% - 40px);

    }





    .meats-grid {

        gap: 15px;

    }





    .visit-overlay {

        left: 37%;



        width: 410px;

    }



}





/* =====================================================

   MOBILE

\===================================================== */



@media (max-width: 700px) {



    /*

       На мобильном stacked scroll отключён,

       чтобы длинные карточки не перекрывались.

    */



    .stack-section,

    .hero,

    .story,

    .meats,

    .visit-banner {

        position: relative;



        top: auto;

    }





    /* HERO */



    .hero {

        min-height: 650px;

    }





    .hero::before {

        background-position: 65% center;

    }





    .navbar {

        width: 100%;



        display: flex;



        justify-content: center;



        padding-top: 20px;

    }





    .nav-left,

    .nav-right {

        display: none;

    }





    .logo img {

        width: 180px;

    }





    .hero-copy {

        bottom: 7%;



        width: calc(100% - 40px);

    }





    .hero-kicker {

        font-size: 9px;



        letter-spacing: 3px;

    }





    .hero-copy h1 {

        font-size: 38px;



        line-height: 1;

    }





    .hero-description {

        max-width: 320px;



        margin-top: 16px;



        font-size: 14px;

    }





    /* STORY */



    .story {

        min-height: 680px;



        align-items: flex-end;



        background-position: 42% center;

    }





    .story::before {

        content: "";



        position: absolute;



        inset: 0;



        background:

            linear-gradient(

                to bottom,

                rgba(3,10,15,0.10) 20%,

                rgba(3,10,15,0.65) 58%,

                rgba(3,10,15,0.96) 100%

            );



        z-index: 1;

    }





    .story-content {

        width: 100%;



        margin: 0;



        padding:

            0

            25px

            45px;



        transform:

            translateY(30px);

    }





    .story-content.visible {

        transform:

            translateY(0);

    }





    .story h2 {

        font-size: 33px;

    }





    .story-subtitle {

        margin-bottom: 20px;



        font-size: 10px;



        letter-spacing: 2.5px;

    }





    .story-text {

        font-size: 15px;



        line-height: 1.55;

    }





    /* MEATS */



    .meats {

        padding:

            40px

            0;

    }





    .meats-inner {

        width: calc(100% - 36px);

    }





    .meats-grid {

        grid-template-columns: 1fr;



        gap: 38px;

    }





    /* VISIT */



    .visit-banner {

        height: 600px;

    }





    .visit-background {

        object-position: center center;

    }





    .visit-banner::after {

        content: "";



        position: absolute;



        inset: 0;



        background:

            linear-gradient(

                to bottom,

                rgba(3,10,15,0.10),

                rgba(3,10,15,0.35) 45%,

                rgba(3,10,15,0.92) 100%

            );



        z-index: 1;

    }





    .visit-overlay {

        left: 24px;



        right: 24px;



        top: auto;



        bottom: 35px;



        width: auto;



        transform:

            translateY(30px);



        z-index: 2;

    }





    .visit-overlay.visible {

        transform:

            translateY(0);

    }





    .visit-overlay h2 {

        font-size: 27px;

    }





    .visit-contact {

        font-size: 14px;

    }





    /* FOOTER */



    .site-footer {

        padding:

            16px

            15px

            20px;

    }





    .footer-inner {

        gap:

            18px

            24px;

    }





    .footer-inner a {

        font-size: 11px;



        letter-spacing: 1px;

    }



}





/* =====================================================

   REDUCED MOTION

\===================================================== */



@media (prefers-reduced-motion: reduce) {



    *,

    *::before,

    *::after {

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;

        scroll-behavior: auto !important;

    }



}

/* =====================================================

   SEQUENTIAL SCROLL ANIMATIONS

   ДОПОЛНЕНИЕ К STACKED SCROLL

\===================================================== */





/* -----------------------------------------------------

   ВАЖНО:

   основной sticky / stacked scroll остаётся

\----------------------------------------------------- */



.story-content {

    opacity: 1 !important;

}



.visit-overlay {

    opacity: 1 !important;

}





/* =====================================================

   LETTER BY LETTER

\===================================================== */



.animated-letter {

    display: inline-block;



    opacity: 0;



    transform:

        translateY(18px)

        rotateX(35deg);



    filter: blur(4px);



    transition:

        opacity 0.55s ease,

        transform 0.65s

            cubic-bezier(0.22, 1, 0.36, 1),

        filter 0.55s ease;

}





.animated-letter.letter-visible {

    opacity: 1;



    transform:

        translateY(0)

        rotateX(0deg);



    filter: blur(0);

}





/* strong продолжает быть жирным */



.story h2 strong .animated-letter {

    font-weight: 700;

}





/* =====================================================

   OUR STORY

\===================================================== */





/* убираем старое появление всего блока разом */



.story-content {

    transform:

        translateX(-20%)

        translateY(0)

        !important;

}





/* OUR STORY */



.story .section-label {

    opacity: 0;



    transform:

        translateY(20px);



    transition:

        opacity 0.65s ease,

        transform 0.75s

            cubic-bezier(0.22, 1, 0.36, 1);

}





.story .section-label.sequence-visible {

    opacity: 1;



    transform:

        translateY(0);

}





/* красная линия */



.story .section-label .red-line {

    transform: scaleX(0);

}





.story

.section-label.sequence-visible

.red-line {

    transform: scaleX(1);

}





/* subtitle */



.story-subtitle {

    opacity: 0;



    transform:

        translateY(22px);



    filter: blur(3px);



    transition:

        opacity 0.8s ease,

        transform 0.9s

            cubic-bezier(0.22, 1, 0.36, 1),

        filter 0.8s ease;

}





.story-subtitle.sequence-visible {

    opacity: 1;



    transform:

        translateY(0);



    filter: blur(0);

}





/* paragraph */



.story-text {

    opacity: 0;



    transform:

        translateY(25px);



    transition:

        opacity 0.9s ease,

        transform 1s

            cubic-bezier(0.22, 1, 0.36, 1);

}





.story-text.sequence-visible {

    opacity: 1;



    transform:

        translateY(0);

}





/* =====================================================

   OUR MEATS

\===================================================== */





/* label */



.meats-label {

    opacity: 0 !important;



    transform:

        translateY(22px)

        !important;



    transition:

        opacity 0.7s ease,

        transform 0.8s

            cubic-bezier(0.22, 1, 0.36, 1)

        !important;

}





.meats-label.sequence-visible {

    opacity: 1 !important;



    transform:

        translateY(0)

        !important;

}





/* red line */



.meats-label .red-line {

    transform: scaleX(0);

}





.meats-label.sequence-visible

.red-line {

    transform: scaleX(1);

}





/* cards initial */



.meat-card {

    opacity: 0 !important;



    transform:

        translateY(65px)

        scale(0.94)

        !important;



    filter: blur(5px);



    transition:

        opacity 0.85s ease,

        transform 1s

            cubic-bezier(0.22, 1, 0.36, 1),

        filter 0.8s ease

        !important;

}





/* cards appear */



.meat-card.card-visible {

    opacity: 1 !important;



    transform:

        translateY(0)

        scale(1)

        !important;



    filter: blur(0);

}





/* image starts slightly zoomed */



.meat-card

.meat-card-image

img {

    transform:

        scale(1.09);



    transition:

        transform 1.3s

            cubic-bezier(0.22, 1, 0.36, 1),

        filter 0.5s ease;

}





/* image settles when card appears */



.meat-card.card-visible

.meat-card-image

img {

    transform:

        scale(1);

}





/* hover remains */



.meat-card.card-visible:hover

.meat-card-image

img {

    transform:

        scale(1.045);



    filter:

        brightness(1.06);

}





/* title appears a little later */



.meat-card h3 {

    opacity: 0;



    transform:

        translateY(12px);



    transition:

        opacity 0.55s ease 0.25s,

        transform 0.65s ease 0.25s;

}





.meat-card.card-visible h3 {

    opacity: 1;



    transform:

        translateY(0);

}





/* description */



.meat-card p {

    opacity: 0;



    transform:

        translateY(10px);



    transition:

        opacity 0.55s ease 0.38s,

        transform 0.65s ease 0.38s;

}





.meat-card.card-visible p {

    opacity: 1;



    transform:

        translateY(0);

}





/* =====================================================

   VISIT US

\===================================================== */





/* не скрываем весь overlay сразу */



.visit-overlay {

    transform:

        translateY(-50%)

        !important;

}





/* VISIT US */



.visit-label {

    opacity: 0;



    transform:

        translateY(18px);



    transition:

        opacity 0.65s ease,

        transform 0.75s

            cubic-bezier(0.22, 1, 0.36, 1);

}





.visit-label.sequence-visible {

    opacity: 1;



    transform:

        translateY(0);

}





.visit-label .red-line {

    transform:

        scaleX(0);

}





.visit-label.sequence-visible

.red-line {

    transform:

        scaleX(1);

}





/* each contact starts hidden */



.visit-contact {

    opacity: 0;



    transform:

        translateX(-20px);



    transition:

        opacity 0.65s ease,

        transform 0.75s

            cubic-bezier(0.22, 1, 0.36, 1);

}





.visit-contact.sequence-visible {

    opacity: 1;



    transform:

        translateX(0);

}





/* social icons */



.visit-socials {

    opacity: 0;



    transform:

        translateY(15px);



    transition:

        opacity 0.65s ease,

        transform 0.75s

            cubic-bezier(0.22, 1, 0.36, 1);

}





.visit-socials.sequence-visible {

    opacity: 1;



    transform:

        translateY(0);

}





/* =====================================================

   MOBILE FIXES

\===================================================== */



@media (max-width: 1100px) {



    .story-content {

        transform:

            translateY(0)

            !important;

    }



}





@media (max-width: 700px) {



    .story-content {

        transform:

            translateY(0)

            !important;

    }





    .visit-overlay {

        transform:

            translateY(0)

            !important;

    }





    .animated-letter {

        transform:

            translateY(12px);



        filter:

            blur(2px);

    }





    .animated-letter.letter-visible {

        transform:

            translateY(0);



        filter:

            blur(0);

    }



}

/* FIX FOR STORY TITLE POSITION */



.story h2 {

    width: 100%;

    max-width: 620px;

    white-space: normal;

    word-break: normal;

    overflow-wrap: normal;

}



.story h2 strong {

    white-space: nowrap;

}



/* буквы внутри слов не должны ломать слово */



.story h2 .animated-letter {

    display: inline-block;

}



/* сам блок текста вернуть на прежнее место */



.story-content {

    width: 620px !important;

    margin-left: 48% !important;

    transform:

        translateX(-10%)

        translateY(0)

        !important;

}

@media (min-width: 1101px) {



    .story-content {

        width: 620px !important;

        margin-left: 47% !important;

    }



    .story h2 {

        font-size: 48px;

        line-height: 1.02;

    }



}

/* =====================================================

   KEEP WORDS TOGETHER

\===================================================== */



.animated-word {

    display: inline-block;

    white-space: nowrap;

}





/* STORY POSITION LIKE REFERENCE */



@media (min-width: 1101px) {



    .story-content {

        width: 610px !important;



        margin-left: 49% !important;



        transform:

            translateX(-8%)

            translateY(0)

            !important;

    }





    .story h2 {

        width: 100%;



        max-width: none;



        font-size: 43px;



        line-height: 1;



        white-space: nowrap;

    }





    .story-subtitle {

        white-space: nowrap;

    }





    .story-text {

        max-width: 560px;

    }





    /* VISIT LIKE REFERENCE */



    .visit-overlay {

        left: 39.5% !important;



        width: 460px !important;

    }





    .visit-overlay h2 {

        width: 100%;



        font-size: 30px;



        line-height: 1.05;

    }





    .visit-overlay h2 br {

        display: block;

    }



}

/* =====================================================

   FOOTER CLICK FIX

   Footer должен быть выше sticky-секций

\===================================================== */



.site-footer {

    position: relative !important;

    z-index: 99999 !important;

    pointer-events: auto !important;

}



.footer-inner {

    position: relative !important;

    z-index: 100000 !important;

    pointer-events: auto !important;

}



.footer-inner a {

    position: relative !important;

    z-index: 100001 !important;



    display: inline-block;



    pointer-events: auto !important;

    cursor: pointer !important;



    color: #ffffff;

    text-decoration: none;

}

.visit-stack {

    z-index: 4 !important;

}



.visit-banner {

    pointer-events: auto;

}



.visit-background {

    pointer-events: none;

}

/* =====================================================

   DELIVERY TICKER

\===================================================== */



.delivery-ticker {

    position: relative;

    z-index: 9999;



    width: 100%;

    overflow: hidden;



    background: linear-gradient(90deg, #021827 0%, #05233a 50%, #021827 100%);

    border-top: 1px solid rgba(255, 255, 255, 0.12);

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



    padding: 18px 0;

}



.ticker-track {

    display: flex;

    width: max-content;

    animation: tickerMove 22s linear infinite;

}



.ticker-content {

    display: flex;

    align-items: center;

    flex-shrink: 0;

    white-space: nowrap;

}



.ticker-content span {

    color: #ffffff;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 18px;

    font-weight: 600;

    letter-spacing: 2px;

    text-transform: uppercase;

    margin-right: 28px;

}



.ticker-content span:nth-child(even) {

    color: #c9a646;

}



@keyframes tickerMove {

    0% {

        transform: translateX(0);

    }

    100% {

        transform: translateX(-50%);

    }

}

/* =====================================================

   DELIVERY TICKER

\===================================================== */



.delivery-ticker {

    position: relative;

    z-index: 9999;

    width: 100%;

    overflow: hidden;

    background: linear-gradient(90deg, #021827 0%, #05233a 50%, #021827 100%);

    border-top: 1px solid rgba(255, 255, 255, 0.12);

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

    padding: 16px 0;

}



.ticker-track {

    display: flex;

    width: max-content;

    animation: tickerMove 22s linear infinite;

}



.ticker-content {

    display: flex;

    align-items: center;

    flex-shrink: 0;

    white-space: nowrap;

}



.ticker-item {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-right: 24px;

}



.ticker-text {

    color: #ffffff;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 18px;

    font-weight: 600;

    letter-spacing: 2px;

    text-transform: uppercase;

}



.ticker-separator {

    color: #c9a646;

    font-size: 20px;

    margin-right: 24px;

}



.ticker-icon {

    width: 34px;

    height: 34px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

}



.ticker-icon svg {

    width: 34px;

    height: 34px;

    display: block;

}



.ticker-icon rect,

.ticker-icon path:nth-of-type(1),

.ticker-icon circle {

    fill: #f6f3eb;

}



.ticker-icon path:last-of-type {

    fill: #c9a646;

}



@keyframes tickerMove {

    0% {

        transform: translateX(0);

    }

    100% {

        transform: translateX(-50%);

    }

}



@media (max-width: 700px) {

    .ticker-text {

        font-size: 14px;

        letter-spacing: 1.2px;

    }



    .ticker-icon,

    .ticker-icon svg {

        width: 28px;

        height: 28px;

    }



    .ticker-item {

        gap: 10px;

        margin-right: 18px;

    }



    .ticker-separator {

        margin-right: 18px;

    }

}

/* =====================================================

   FINAL MOBILE VERSION

   Phones

\===================================================== */



@media (max-width: 700px) {



    /* ======================================

       GENERAL

    ======================================= */



    html,

    body {

        width: 100%;

        overflow-x: hidden;

    }



    body {

        margin: 0;

    }





    /* ======================================

       ОТКЛЮЧАЕМ STACKED SCROLL НА ТЕЛЕФОНЕ

    ======================================= */



    .stack-section,

    .hero,

    .story,

    .meats,

    .visit-banner {

        position: relative !important;

        top: auto !important;

    }





    /* ======================================

       HERO

    ======================================= */



    .hero {

        width: 100%;

        height: 100svh;

        min-height: 620px;



        overflow: hidden;

    }



    .hero::before {

        background-position: 67% center;

        background-size: cover;

    }





    /* ======================================

       HEADER / LOGO

    ======================================= */



    .navbar {

        width: 100%;



        display: flex;

        justify-content: center;

        align-items: flex-start;



        padding: 22px 20px 0;



        position: relative;

        z-index: 20;

    }



    .logo {

        width: 100%;



        display: flex;

        justify-content: center;

    }



    .logo img {

        width: 190px;

        max-width: 55vw;

        height: auto;

    }





    /* скрываем десктопное меню */



    .nav-left,

    .nav-right {

        display: none !important;

    }





    /* ======================================

       OUR STORY

    ======================================= */



    .story {

        width: 100%;



        min-height: 720px;



        display: flex;

        align-items: flex-end;



        background-position: 38% center;

        background-size: cover;



        position: relative;

    }





    /* затемнение снизу для текста */



    .story::before {

        content: "";



        position: absolute;

        inset: 0;



        background:

            linear-gradient(

                to bottom,

                rgba(2, 8, 12, 0.05) 10%,

                rgba(2, 8, 12, 0.25) 42%,

                rgba(2, 8, 12, 0.92) 78%,

                #051019 100%

            );



        z-index: 1;

    }



    .story-content {

        position: relative;



        z-index: 2;



        width: 100% !important;



        margin: 0 !important;



        padding:

            0

            24px

            45px !important;



        transform: none !important;

    }





    .story .section-label {

        margin-bottom: 13px;

    }



    .section-label span:first-child {

        font-size: 10px;



        letter-spacing: 3px;

    }



    .red-line {

        width: 35px;

    }





    .story h2 {

        width: 100% !important;



        max-width: 100% !important;



        margin-bottom: 12px;



        font-size: clamp(31px, 9vw, 42px) !important;



        line-height: 0.98 !important;



        letter-spacing: -0.5px;



        white-space: normal !important;

    }





    .story-subtitle {

        margin-bottom: 20px;



        font-size: 10px;



        line-height: 1.5;



        letter-spacing: 2px;



        white-space: normal !important;

    }





    .story-text {

        max-width: 100%;



        font-size: 15px;



        line-height: 1.6;

    }





    /* ======================================

       OUR MEATS

    ======================================= */



    .meats {

        width: 100%;



        padding:

            42px

            0

            50px;

    }





    .meats-inner {

        width: calc(100% - 36px);



        margin: 0 auto;

    }





    .meats-label {

        margin-bottom: 24px;

    }





    .meats-grid {

        display: grid;



        grid-template-columns: 1fr !important;



        gap: 38px;

    }





    .meat-card {

        width: 100%;

    }





    .meat-card-image {

        width: 100%;



        aspect-ratio: 1 / 1;



        border-radius: 0;

    }





    .meat-card h3 {

        margin-top: 14px;



        font-size: 23px;

    }





    .meat-card p {

        max-width: 300px;



        margin:

            5px

            auto

            0;



        font-size: 14px;



        line-height: 1.5;

    }





    /* ======================================

       VISIT US

    ======================================= */



    .visit-banner {

        width: 100%;



        height: 650px;



        position: relative;



        overflow: hidden;

    }





    .visit-background {

        width: 100%;

        height: 100%;



        object-fit: cover;



        object-position: 50% center;

    }





    /* затемнение */



    .visit-banner::after {

        content: "";



        position: absolute;

        inset: 0;



        background:

            linear-gradient(

                to bottom,

                rgba(2, 8, 12, 0.05) 20%,

                rgba(2, 8, 12, 0.28) 48%,

                rgba(2, 8, 12, 0.92) 100%

            );



        z-index: 1;



        pointer-events: none;

    }





    .visit-overlay {

        position: absolute;



        left: 22px !important;

        right: 22px !important;



        top: auto !important;

        bottom: 35px;



        width: auto !important;



        z-index: 2;



        transform: none !important;

    }





    .visit-overlay h2 {

        width: 100%;



        margin-bottom: 20px;



        font-size: 27px !important;



        line-height: 1.05;

    }





    .visit-contact {

        gap: 10px;



        margin-bottom: 12px;



        font-size: 14px;

    }





    .visit-icon {

        width: 24px;

    }





    .visit-icon svg {

        width: 18px;

        height: 18px;

    }





    .visit-socials {

        margin-top: 16px;

    }





    /* ======================================

       DELIVERY TICKER

    ======================================= */



    .delivery-ticker {

        padding:

            13px

            0;



        overflow: hidden;

    }





    .ticker-track {

        animation-duration: 18s;

    }





    .ticker-item {

        gap: 9px;



        margin-right: 18px;

    }





    .ticker-text {

        font-size: 13px;



        letter-spacing: 1.3px;



        white-space: nowrap;

    }





    .ticker-icon,

    .ticker-icon svg {

        width: 28px;

        height: 28px;

    }





    .ticker-separator {

        margin-right: 18px;



        font-size: 17px;

    }





    /* ======================================

       LETTER ANIMATIONS

    ======================================= */



    .animated-word {

        display: inline-block;



        white-space: nowrap;

    }





    .animated-letter {

        transform:

            translateY(10px);



        filter:

            blur(1px);

    }





    .animated-letter.letter-visible {

        transform:

            translateY(0);



        filter:

            blur(0);

    }



}

/* =====================================================

   MOBILE BURGER MENU

\===================================================== */



.mobile-menu-btn,

.mobile-menu {

    display: none;

}



@media (max-width: 700px) {



    .navbar {

        position: relative;

    }



    .mobile-menu-btn {

        display: flex;



        position: absolute;



        top: 28px;

        right: 22px;



        width: 34px;

        height: 28px;



        padding: 0;



        flex-direction: column;

        justify-content: space-between;



        background: transparent;



        border: 0;



        cursor: pointer;



        z-index: 10002;

    }



    .mobile-menu-btn span {

        display: block;



        width: 100%;

        height: 2px;



        background: #ffffff;



        border-radius: 2px;



        transition:

            transform 0.3s ease,

            opacity 0.3s ease;

    }





    /* FULL SCREEN MENU */



    .mobile-menu {

        display: flex;



        position: fixed;



        inset: 0;



        width: 100%;

        height: 100dvh;



        background:

            radial-gradient(

                circle at 50% 0%,

                #0b202c 0%,

                #051019 68%

            );



        z-index: 100000;



        opacity: 0;



        visibility: hidden;



        pointer-events: none;



        transform: translateY(-20px);



        transition:

            opacity 0.35s ease,

            transform 0.4s ease,

            visibility 0.35s ease;

    }





    .mobile-menu.open {

        opacity: 1;



        visibility: visible;



        pointer-events: auto;



        transform: translateY(0);

    }





    .mobile-menu-inner {

        width: 100%;



        display: flex;



        flex-direction: column;



        justify-content: center;



        align-items: center;



        gap: 28px;



        padding: 80px 30px 50px;



        text-align: center;

    }





    .mobile-menu-inner a {

        color: #ffffff;



        text-decoration: none;



        font-family: Georgia, "Times New Roman", serif;



        font-size: 30px;



        line-height: 1;



        letter-spacing: 2px;



        text-transform: uppercase;



        transition:

            opacity 0.25s ease,

            transform 0.25s ease;

    }





    .mobile-menu-inner a:hover {

        opacity: 0.65;



        transform: translateY(-2px);

    }





    .mobile-orders {

        display: flex;



        flex-direction: column;



        align-items: center;



        gap: 8px;

    }





    .mobile-orders span {

        color: #c9a33d;



        font-size: 10px;



        letter-spacing: 2px;

    }





    /* CLOSE BUTTON */



    .mobile-menu-close {

        position: absolute;



        top: 20px;

        right: 22px;



        width: 42px;

        height: 42px;



        padding: 0;



        border: 0;



        background: transparent;



        color: #ffffff;



        font-family: Arial, sans-serif;



        font-size: 40px;



        font-weight: 200;



        line-height: 1;



        cursor: pointer;



        z-index: 100001;

    }





    body.menu-open {

        overflow: hidden;

    }



}

/* =====================================================

   MOBILE HERO IMAGE

\===================================================== */



@media (max-width: 700px) {



    .hero::before {

        background-image:

            linear-gradient(

                rgba(0, 8, 14, 0.05),

                rgba(0, 8, 14, 0.10)

            ),

            url("images/hero-mobile.png") !important;



        background-size: cover !important;

        background-position: center center !important;

        background-repeat: no-repeat !important;

    }



}

/* =====================================================

   MOBILE STORY IMAGE

\===================================================== */



@media (max-width: 700px) {



    .story {

        background-image: url("images/story-mobile.png") !important;

        background-size: cover !important;

        background-position: center center !important;

        background-repeat: no-repeat !important;



        min-height: 720px;

    }



}

/* =====================================================

   MOBILE VISIT IMAGE

\===================================================== */



@media (max-width: 700px) {



    .visit-background {

        content: url("images/visit-mobile.png") !important;



        width: 100% !important;

        height: 100% !important;



        object-fit: cover !important;

        object-position: center center !important;

    }



    .visit-banner {

        height: 650px !important;

    }



}

/* =====================================================

   MOBILE SCROLL REVEAL

\===================================================== */



@media (max-width: 700px) {



    /* HERO */



    .hero::before {

        opacity: 0;

        transform: scale(1.07);



        transition:

            opacity 1.1s ease,

            transform 1.5s cubic-bezier(0.22, 1, 0.36, 1);

    }



    .hero.mobile-visible::before {

        opacity: 1;

        transform: scale(1);

    }





    /* STORY BACKGROUND */



    .story {

        opacity: 0;

        transform: translateY(35px) scale(0.985);



        transition:

            opacity 0.9s ease,

            transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);

    }



    .story.mobile-visible {

        opacity: 1;

        transform: translateY(0) scale(1);

    }





    /* MEATS */



    .meats {

        opacity: 0;

        transform: translateY(35px);



        transition:

            opacity 0.9s ease,

            transform 1s cubic-bezier(0.22, 1, 0.36, 1);

    }



    .meats.mobile-visible {

        opacity: 1;

        transform: translateY(0);

    }





    /* VISIT */



    .visit-banner {

        opacity: 0;

        transform: translateY(35px) scale(0.985);



        transition:

            opacity 0.9s ease,

            transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);

    }



    .visit-banner.mobile-visible {

        opacity: 1;

        transform: translateY(0) scale(1);

    }





    /* VISIT IMAGE — лёгкий cinematic zoom */



    .visit-background {

        transform: scale(1.07);



        transition:

            transform 1.5s cubic-bezier(0.22, 1, 0.36, 1);

    }



    .visit-banner.mobile-visible .visit-background {

        transform: scale(1);

    }



}



/* =====================================================
   HERO NEWSLETTER — FINAL CLEAN VERSION
===================================================== */

.hero-newsletter {
    position: absolute;
    left: 4%;
    bottom: 220px;
    top: auto;

    width: 520px;
    max-width: 34vw;

    padding: 30px 34px;

    z-index: 10;
    color: #ffffff;

    background: rgba(5, 16, 25, 0.40);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 18px;

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);

    opacity: 0;
    transform: translateY(28px);

    transition:
        opacity 0.9s ease,
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-newsletter.show {
    opacity: 1;
    transform: translateY(0);
}

.hero-newsletter h2 {
    margin: 0 0 16px;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 29px;
    font-weight: 400;
    line-height: 1.08;

    color: #ffffff;
    text-transform: uppercase;
}

.hero-newsletter p {
    margin: 0 0 22px;
    max-width: 100%;

    font-size: 15px;
    line-height: 1.55;

    color: rgba(255, 255, 255, 0.86);
}

.newsletter-form {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;

    width: 100%;
    margin: 0;
}

.newsletter-form input {
    flex: 1;
    min-width: 0;

    height: 56px;
    padding: 0 18px;

    border: 0;
    border-radius: 9px;
    outline: none;

    background: rgba(255, 255, 255, 0.96);
    color: #111111;

    font-family: Arial, sans-serif;
    font-size: 15px;
}

.newsletter-form input::placeholder {
    color: #888888;
}

.newsletter-form button {
    width: 170px;
    height: 56px;
    flex-shrink: 0;

    padding: 0 20px;

    border: 0;
    border-radius: 9px;

    background: #6e8741;
    color: #ffffff;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.2px;

    cursor: pointer;

    transition:
        background 0.25s ease,
        transform 0.25s ease;
}

.newsletter-form button:hover {
    background: #7f9950;
    transform: translateY(-2px);
}

/* =====================================================
   NEWSLETTER — TABLET / MOBILE
===================================================== */

@media (max-width: 900px) {
    .hero-newsletter {
        left: 20px;
        right: 20px;
        bottom: 35px;
        top: auto;

        width: auto;
        max-width: none;

        padding: 24px 22px;

        background: rgba(5, 16, 25, 0.48);
    }

    .hero-newsletter h2 {
        font-size: 24px;
    }

    .hero-newsletter p {
        margin-bottom: 18px;
        font-size: 14px;
        line-height: 1.5;
    }

    .newsletter-form {
        flex-direction: column;
        gap: 10px;
    }

    .newsletter-form input,
    .newsletter-form button {
        width: 100%;
        height: 54px;
    }
}
/* =====================================================
   VISIT US — CLICKABLE GOOGLE MAP
===================================================== */

.visit-map-link {
    position: absolute;

    right: 4%;
    top: 50%;
    transform: translateY(-50%);

    width: 460px;
max-width: 32vw;

    padding: 8px;

    z-index: 6;

    background: rgba(5, 16, 25, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.22);

    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.30);

    text-decoration: none;

    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.visit-map-link:hover {
    transform: translateY(-50%) translateY(-4px);
    border-color: rgba(255, 255, 255, 0.45);
    box-shadow: 0 20px 42px rgba(0, 0, 0, 0.38);
}

.visit-map-image {
    display: block;
    width: 100%;
    height: auto;
}


/* MOBILE */
@media (max-width: 700px) {

    .visit-map-link {
        position: absolute;

        left: 22px;
        right: 22px;
        top: 28px;

        width: auto;
        max-width: none;

        transform: none;

        padding: 6px;
    }

    .visit-map-link:hover {
        transform: translateY(-3px);
    }

}
/* =====================================================
   CONTACT FORM
===================================================== */

.contact-section {
    position: relative;
    z-index: 6;

    width: 100%;

    padding: 65px 20px 70px;

    background:
        radial-gradient(
            circle at 50% 0%,
            #0b202c 0%,
            #051019 72%
        );

    border-top: 1px solid rgba(255, 255, 255, 0.10);
}


.contact-inner {
    width: min(760px, calc(100% - 40px));

    margin: 0 auto;
}


.contact-heading {
    text-align: center;

    margin-bottom: 34px;
}


.contact-label {
    justify-content: center;

    margin-bottom: 20px;
}


.contact-heading p {
    max-width: 720px;

    margin: 0 auto;

    color: rgba(255, 255, 255, 0.82);

    font-size: 16px;
    line-height: 1.7;
}


/* FORM */

.contact-form {
    width: 100%;
}


.contact-row {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 16px;

    margin-bottom: 16px;
}


.contact-form input,
.contact-form textarea {
    width: 100%;

    border: 1px solid rgba(255, 255, 255, 0.14);

    border-radius: 0;

    outline: none;

    background: rgba(255, 255, 255, 0.96);

    color: #111111;

    font-family: Arial, sans-serif;

    font-size: 14px;
}


.contact-form input {
    height: 54px;

    padding: 0 18px;
}


.contact-form textarea {
    height: 145px;

    padding: 17px 18px;

    resize: vertical;

    margin-bottom: 16px;
}


.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: #888888;
}


.contact-form input:focus,
.contact-form textarea:focus {
    border-color: rgba(110, 135, 65, 0.85);

    box-shadow: 0 0 0 2px rgba(110, 135, 65, 0.12);
}


/* SEND */

.contact-form button {
    min-width: 105px;

    height: 48px;

    padding: 0 25px;

    border: none;

    background: #6e8741;

    color: #ffffff;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 13px;
    font-weight: 600;

    letter-spacing: 1.3px;

    cursor: pointer;

    transition:
        background 0.25s ease,
        transform 0.25s ease;
}


.contact-form button:hover {
    background: #7f9950;

    transform: translateY(-2px);
}


/* MOBILE */

@media (max-width: 700px) {

    .contact-section {
        padding:
            48px
            20px
            55px;
    }


    .contact-inner {
        width: 100%;
    }


    .contact-heading {
        text-align: left;

        margin-bottom: 28px;
    }


    .contact-label {
        justify-content: flex-start;
    }


    .contact-heading p {
        font-size: 14px;
        line-height: 1.6;
    }


    .contact-row {
        grid-template-columns: 1fr;

        gap: 12px;

        margin-bottom: 12px;
    }


    .contact-form textarea {
        height: 130px;

        margin-bottom: 12px;
    }

}
/* =========================================
   CONTACT FORM REVEAL
========================================= */

.contact-reveal {
    opacity: 0;
    transform: translateY(45px);

    transition:
        opacity 0.9s ease,
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.contact-reveal.contact-visible {
    opacity: 1;
    transform: translateY(0);
}
/* =========================================
   PROMO TICKER KNIVES ICON
========================================= */

.ticker-icon img {
    width: 34px;
    height: 34px;

    display: block;

    object-fit: contain;
}

@media (max-width: 700px) {

    .ticker-icon img {
        width: 28px;
        height: 28px;
    }

}
/* =========================================
   TICKER KNIVES FIX
========================================= */

.ticker-icon {
    width: 40px;
    height: 40px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;
    overflow: visible;
}

.ticker-icon img {
    width: 38px;
    height: 38px;

    display: block;

    object-fit: contain;

    filter:
        brightness(0)
        invert(1);

    opacity: 1;
}
/* =====================================================
   NEWSLETTER — FINAL CLIENT VERSION
===================================================== */

@media (min-width: 901px) {

    .hero-newsletter {
        position: absolute;

        left: 5%;
        top: 29%;

        width: 520px;
        max-width: 34vw;

        padding: 30px 34px;

        z-index: 10;

        color: #ffffff;

        text-align: center;

        background: rgba(5, 16, 25, 0.42);

        border: 1px solid rgba(255, 255, 255, 0.10);
        border-radius: 18px;

        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);

        box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
    }


    .hero-newsletter h2 {
        margin: 0 0 16px;

        font-family: Georgia, "Times New Roman", serif;

        font-size: 29px;
        font-weight: 400;

        line-height: 1.08;

        color: #ffffff;

        text-transform: uppercase;
        text-align: center;
    }


    .hero-newsletter p {
        max-width: 430px;

        margin: 0 auto 24px;

        font-size: 15px;
        line-height: 1.55;

        color: rgba(255, 255, 255, 0.88);

        text-align: center;
    }


    .newsletter-form {
        display: flex;

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

        gap: 12px;

        width: 100%;

        margin: 0;

        flex-wrap: nowrap;
    }


    .newsletter-form input {
        flex: 1;

        min-width: 0;

        height: 56px;

        padding: 0 18px;

        border: none;
        border-radius: 9px;

        outline: none;

        background: rgba(255, 255, 255, 0.96);

        color: #111111;

        font-family: Arial, sans-serif;

        font-size: 15px;
    }


    .newsletter-form input::placeholder {
        color: #888888;
    }


    .newsletter-form button {
        width: 170px;
        height: 56px;

        flex-shrink: 0;

        border: none;
        border-radius: 9px;

        background: #c9a33d;

        color: #051019;

        font-family: Georgia, "Times New Roman", serif;

        font-size: 13px;
        font-weight: 700;

        letter-spacing: 1.2px;

        cursor: pointer;

        transition:
            background 0.25s ease,
            transform 0.25s ease;
    }


    .newsletter-form button:hover {
        background: #d8b34a;

        transform: translateY(-2px);
    }

}


/* =====================================================
   NEWSLETTER — MOBILE
===================================================== */

@media (max-width: 900px) {

    .hero-newsletter {
        position: absolute;

        left: 20px;
        right: 20px;

        top: auto;
        bottom: 35px;

        width: auto;
        max-width: none;

        padding: 24px 22px;

        text-align: center;

        background: rgba(5, 16, 25, 0.48);

        border: 1px solid rgba(255, 255, 255, 0.10);
        border-radius: 16px;
    }


    .hero-newsletter h2 {
        margin-bottom: 14px;

        font-size: 24px;
        line-height: 1.1;

        text-align: center;
    }


    .hero-newsletter p {
        margin: 0 auto 18px;

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

        text-align: center;
    }


    .newsletter-form {
        display: flex;

        flex-direction: column;

        gap: 10px;
    }


    .newsletter-form input,
    .newsletter-form button {
        width: 100%;
        height: 54px;
    }

}
/* =====================================================
   NEWSLETTER — REFERENCE POSITION
===================================================== */

@media (min-width: 901px) {

    .hero-newsletter {
        position: absolute;

        left: 13% !important;
        top: 17% !important;

        width: 470px !important;
        max-width: 31vw !important;

        padding: 24px 28px !important;

        color: #ffffff;
        text-align: center;

        background: rgba(5, 16, 25, 0.42) !important;

        border: 1px solid rgba(255, 255, 255, 0.10) !important;
        border-radius: 16px !important;

        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);

        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);

        z-index: 10;
    }


    .hero-newsletter h2 {
        margin: 0 0 12px !important;

        font-size: 27px !important;
        line-height: 1.05 !important;

        text-align: center !important;
    }


    .hero-newsletter p {
        max-width: 400px !important;

        margin: 0 auto 18px !important;

        font-size: 14px !important;
        line-height: 1.45 !important;

        text-align: center !important;
    }


    .newsletter-form {
        display: flex !important;

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

        gap: 10px !important;

        flex-wrap: nowrap !important;
    }


    .newsletter-form input {
        height: 50px !important;

        padding: 0 16px !important;

        font-size: 14px !important;
    }


    .newsletter-form button {
        width: 155px !important;
        height: 50px !important;

        background: #c9a33d !important;
        color: #051019 !important;

        font-size: 12px !important;
        font-weight: 700 !important;

        letter-spacing: 1.1px !important;
    }

}
/* =====================================================
   NEWSLETTER — FINAL POSITION + COMPACT HEIGHT
===================================================== */

@media (min-width: 901px) {

    .hero-newsletter {
        position: absolute !important;

        /* ТОЧНО В ЗОНУ БЕЛОГО ПРЯМОУГОЛЬНИКА */
        left: 13% !important;
        top: 17% !important;

        /* ВАЖНО: убираем старое растягивание вниз */
        right: auto !important;
        bottom: auto !important;

        width: 470px !important;
        max-width: 31vw !important;

        height: auto !important;
        min-height: 0 !important;

        padding: 24px 28px !important;

        text-align: center !important;

        background: rgba(5, 16, 25, 0.42) !important;

        border: 1px solid rgba(255, 255, 255, 0.10) !important;
        border-radius: 16px !important;

        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);

        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);

        z-index: 10;
    }


    .hero-newsletter h2 {
        margin: 0 0 12px !important;

        text-align: center !important;

        font-size: 27px !important;
        line-height: 1.05 !important;
    }


    .hero-newsletter p {
        max-width: 400px !important;

        margin: 0 auto 18px !important;

        text-align: center !important;

        font-size: 14px !important;
        line-height: 1.45 !important;
    }


    .newsletter-form {
        display: flex !important;

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

        gap: 10px !important;

        margin: 0 !important;

        flex-wrap: nowrap !important;
    }


    .newsletter-form input {
        flex: 1 1 auto !important;

        width: auto !important;
        min-width: 0 !important;

        height: 50px !important;
        min-height: 50px !important;

        padding: 0 16px !important;

        font-size: 14px !important;
    }


    .newsletter-form button {
        width: 155px !important;

        height: 50px !important;
        min-height: 50px !important;

        flex-shrink: 0 !important;

        background: #c9a33d !important;
        color: #051019 !important;

        font-size: 12px !important;
        font-weight: 700 !important;

        letter-spacing: 1.1px !important;
    }

}
/* =====================================================
   INTERACTIVE GOOGLE MAP
===================================================== */

.visit-map-interactive {
    position: absolute;

    right: 5%;
    top: 50%;
    transform: translateY(-50%);

    width: 320px;
    height: 235px;

    padding: 7px;

    z-index: 6;

    background: rgba(5, 16, 25, 0.60);

    border: 1px solid rgba(255, 255, 255, 0.22);

    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.30);

    overflow: hidden;
}


.visit-map-interactive iframe {
    width: 100%;
    height: 100%;

    display: block;

    border: 0;

    /* делаем Google Map темнее под дизайн сайта */
    filter:
        grayscale(1)
        invert(0.92)
        hue-rotate(180deg)
        brightness(0.72)
        contrast(1.08);
}


/* MOBILE */

@media (max-width: 700px) {

    .visit-map-interactive {
        left: 22px;
        right: 22px;

        top: 25px;

        width: auto;
        height: 220px;

        transform: none;
    }

}
/* =========================================
   CONTACT SEND BUTTON — GOLD
========================================= */

.contact-form button {
    background: #c9a33d !important;
    color: #051019 !important;

    border: none !important;

    font-weight: 700 !important;
}

.contact-form button:hover {
    background: #d8b34a !important;
}
/* =========================================
   KNIVES — KEEP ORIGINAL SVG COLORS
========================================= */

.ticker-icon img {
    width: 38px !important;
    height: 38px !important;

    display: block !important;
    object-fit: contain !important;

    filter: none !important;
    opacity: 1 !important;
}
/* =====================================================
   MOBILE NEWSLETTER — EXTRA COMPACT
===================================================== */

@media (max-width: 700px) {

    .hero-newsletter {
        left: 16px !important;
        right: 16px !important;

        bottom: 22px !important;

        width: auto !important;
        max-width: none !important;

        height: auto !important;
        min-height: 0 !important;

        padding: 16px 14px !important;

        border-radius: 14px !important;

        text-align: center !important;
    }

    .hero-newsletter h2 {
        margin: 0 0 9px !important;

        font-size: 20px !important;
        line-height: 1.05 !important;

        text-align: center !important;
    }

    .hero-newsletter p {
        margin: 0 auto 12px !important;

        max-width: 360px !important;

        font-size: 12px !important;
        line-height: 1.4 !important;

        text-align: center !important;
    }

    .newsletter-form {
        display: flex !important;
        flex-direction: column !important;

        gap: 8px !important;

        width: 100% !important;
    }

    .newsletter-form input {
        width: 100% !important;

        height: 40px !important;
        min-height: 40px !important;

        padding: 0 12px !important;

        font-size: 14px !important;
    }

    .newsletter-form button {
        width: 100% !important;

        height: 42px !important;
        min-height: 42px !important;

        background: #c9a33d !important;
        color: #051019 !important;

        font-size: 12px !important;
        font-weight: 700 !important;

        letter-spacing: 1px !important;
    }

}


/* =====================================================
   WORDPRESS MOBILE SAFETY FIX — v1.1.0
   Keeps all mobile content visible even when a scroll
   observer is delayed or blocked by the WP Customizer.
===================================================== */
@media (max-width: 700px) {
    /* Sections must never become blank on phones. */
    .hero,
    .story,
    .meats,
    .visit-banner {
        opacity: 1 !important;
        transform: none !important;
        visibility: visible !important;
    }

    .hero::before {
        opacity: 1 !important;
        transform: none !important;
    }

    /* Text/content that previously depended on IntersectionObserver. */
    .story-content,
    .story .section-label,
    .story-subtitle,
    .story-text,
    .meats-label,
    .meat-card,
    .meat-card h3,
    .meat-card p,
    .visit-overlay,
    .visit-label,
    .visit-contact,
    .visit-socials,
    .contact-reveal,
    .hero-newsletter {
        opacity: 1 !important;
        transform: none !important;
        visibility: visible !important;
    }

    /* If JS has split headings into letters, show them immediately on mobile. */
    .animated-letter,
    .animated-letter.letter-visible {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }

    /* Restore decorative label lines that were animation-gated. */
    .story .section-label .red-line,
    .meats-label .red-line,
    .visit-label .red-line,
    .contact-label .red-line {
        transform: scaleX(1) !important;
        opacity: 1 !important;
    }

    /* Make mobile sections content-driven where possible. */
    .meats {
        min-height: 0 !important;
    }

    /* Keep the visit block usable with the mobile image + map + details. */
    .visit-background {
        opacity: 1 !important;
        visibility: visible !important;
    }
}
/* =========================================
   NEWSLETTER - FORMINATOR FORM #37
========================================= */

/* Hide labels */
#forminator-module-37 .forminator-label {
    display: none !important;
}

/* Remove default spacing */
#forminator-module-37 .forminator-row,
#forminator-module-37 .forminator-col,
#forminator-module-37 .forminator-field {
    margin: 0 !important;
    padding: 0 !important;
}

/* Put email + button in one line */
#forminator-module-37 {
    display: flex !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: 100% !important;
}

/* Email area */
#forminator-module-37 .forminator-row:first-of-type {
    flex: 1 1 auto !important;
    width: auto !important;
}

/* Button area */
#forminator-module-37 .forminator-row:last-of-type {
    flex: 0 0 auto !important;
    width: auto !important;
}

/* Email input */
#forminator-module-37 input[type="email"] {
    width: 100% !important;
    height: 50px !important;

    background: #f3f3f3 !important;
    color: #111 !important;

    border: none !important;
    border-radius: 8px !important;

    padding: 0 18px !important;

    font-size: 16px !important;
    box-shadow: none !important;
}

/* Placeholder */
#forminator-module-37 input[type="email"]::placeholder {
    color: #8a8a8a !important;
    opacity: 1 !important;
}

/* Subscribe button */
#forminator-module-37 .forminator-button-submit {
    height: 50px !important;

    background: #D6AB3A !important;
    color: #111 !important;

    border: none !important;
    border-radius: 8px !important;

    padding: 0 26px !important;

    font-size: 14px !important;
    font-weight: 700 !important;

    white-space: nowrap !important;
    box-shadow: none !important;
}

/* Hover */
#forminator-module-37 .forminator-button-submit:hover {
    background: #c89d2f !important;
}

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

@media (max-width: 768px) {

    #forminator-module-37 {
        display: block !important;
    }

    #forminator-module-37 .forminator-row:first-of-type,
    #forminator-module-37 .forminator-row:last-of-type {
        width: 100% !important;
    }

    #forminator-module-37 .forminator-row:last-of-type {
        margin-top: 10px !important;
    }

    #forminator-module-37 .forminator-button-submit {
        width: 100% !important;
    }
}/* =========================================
   NEWSLETTER SUCCESS MESSAGE
========================================= */

#forminator-module-37 .forminator-response-message {
    width: 100% !important;
    margin: 0 0 14px 0 !important;
    padding: 12px 16px !important;

    background: #bfeee8 !important;
    color: #223 !important;

    border: none !important;
    border-left: 3px solid #25a99a !important;
    border-radius: 4px !important;

    font-size: 15px !important;
    line-height: 1.4 !important;

    grid-column: 1 / -1 !important;
    flex: 0 0 100% !important;
}

/* Keep email + button on one row after success message */
#forminator-module-37.forminator-ui {
    flex-wrap: wrap !important;
}

/* Hide empty response spacing */
#forminator-module-37 .forminator-response-message:empty {
    display: none !important;
}/* =====================================================
   MOBILE SCROLL ANIMATIONS
   Safe version
===================================================== */

@media (max-width: 700px) {

    /* ---------------------------------
       STORY
    --------------------------------- */

    .story-content {
        transform: none !important;
    }

    .story .section-label {
        opacity: 0 !important;
        transform: translateY(20px) !important;

        transition:
            opacity 0.7s ease,
            transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) !important;
    }

    .story .section-label.sequence-visible {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }


    .story-subtitle {
        opacity: 0 !important;

        transform:
            translateY(22px) !important;

        filter: blur(3px) !important;
    }

    .story-subtitle.sequence-visible {
        opacity: 1 !important;

        transform:
            translateY(0) !important;

        filter: blur(0) !important;
    }


    .story-text {
        opacity: 0 !important;

        transform:
            translateY(22px) !important;

        filter: blur(3px) !important;

        transition:
            opacity 0.8s ease,
            transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
            filter 0.8s ease !important;
    }

    .story-text.sequence-visible {
        opacity: 1 !important;

        transform:
            translateY(0) !important;

        filter: blur(0) !important;
    }


    /* LETTER ANIMATION */

    .story .animated-letter,
    .visit-banner .animated-letter {
        opacity: 0 !important;

        transform:
            translateY(18px)
            rotateX(35deg) !important;

        filter: blur(4px) !important;
    }

    .story .animated-letter.letter-visible,
    .visit-banner .animated-letter.letter-visible {
        opacity: 1 !important;

        transform:
            translateY(0)
            rotateX(0deg) !important;

        filter: blur(0) !important;
    }


    /* ---------------------------------
       OUR MEATS
    --------------------------------- */

    .meats-label {
        opacity: 0 !important;

        transform:
            translateY(20px) !important;

        transition:
            opacity 0.7s ease,
            transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) !important;
    }

    .meats-label.sequence-visible {
        opacity: 1 !important;

        transform:
            translateY(0) !important;
    }


    .meat-card {
        opacity: 0 !important;

        transform:
            translateY(35px)
            scale(0.97) !important;

        filter: blur(4px) !important;

        transition:
            opacity 0.7s ease,
            transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
            filter 0.7s ease !important;
    }

    .meat-card.card-visible {
        opacity: 1 !important;

        transform:
            translateY(0)
            scale(1) !important;

        filter: blur(0) !important;
    }


    .meat-card h3 {
        opacity: 0 !important;
        transform: translateY(12px) !important;
    }

    .meat-card.card-visible h3 {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }


    .meat-card p {
        opacity: 0 !important;
        transform: translateY(10px) !important;
    }

    .meat-card.card-visible p {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }


    /* ---------------------------------
       VISIT US
    --------------------------------- */

    .visit-label,
    .visit-contact,
    .visit-socials {
        opacity: 0 !important;

        transform:
            translateY(22px) !important;

        filter: blur(3px) !important;

        transition:
            opacity 0.7s ease,
            transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
            filter 0.7s ease !important;
    }


    .visit-label.sequence-visible,
    .visit-contact.sequence-visible,
    .visit-socials.sequence-visible {
        opacity: 1 !important;

        transform:
            translateY(0) !important;

        filter: blur(0) !important;
    }


    /* ---------------------------------
       CONTACT
    --------------------------------- */

    .contact-reveal {
        opacity: 0 !important;

        transform:
            translateY(35px) !important;

        transition:
            opacity 0.8s ease,
            transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) !important;
    }

    .contact-reveal.contact-visible {
        opacity: 1 !important;

        transform:
            translateY(0) !important;
    }

}/* =====================================================
   MOBILE VISUAL / IMAGE ANIMATIONS
===================================================== */

@media (max-width: 700px) {

    /* -----------------------------
       HERO / FIRST BANNER
    ----------------------------- */

    .hero {
        opacity: 0;
        transform: scale(1.035);
        transition:
            opacity 1s ease,
            transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .hero.mobile-hero-visible {
        opacity: 1;
        transform: scale(1);
    }


    /* Newsletter */
    .hero-newsletter {
        opacity: 0 !important;
        transform: translateY(35px) !important;

        transition:
            opacity 0.8s ease,
            transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) !important;
    }

    .hero-newsletter.show {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }


    /* -----------------------------
       STORY IMAGE / BLOCK
    ----------------------------- */

    .story {
        opacity: 0;
        transform:
            translateY(40px)
            scale(0.97);

        transition:
            opacity 0.9s ease,
            transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .story.mobile-block-visible {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
    }


    /* -----------------------------
       MEAT / FISH / SMALLGOODS
    ----------------------------- */

    .meat-card .meat-card-image {
        opacity: 0 !important;

        transform:
            translateY(45px)
            scale(0.90) !important;

        filter: blur(5px);

        transition:
            opacity 0.8s ease,
            transform 1s cubic-bezier(0.22, 1, 0.36, 1),
            filter 0.8s ease !important;
    }

    .meat-card.card-visible .meat-card-image {
        opacity: 1 !important;

        transform:
            translateY(0)
            scale(1) !important;

        filter: blur(0);
    }


    .meat-card.card-visible:nth-child(1) .meat-card-image {
        transition-delay: 0.05s !important;
    }

    .meat-card.card-visible:nth-child(2) .meat-card-image {
        transition-delay: 0.15s !important;
    }

    .meat-card.card-visible:nth-child(3) .meat-card-image {
        transition-delay: 0.25s !important;
    }


    /* image itself zooms into position */
    .meat-card .meat-card-image img {
        transform: scale(1.12) !important;

        transition:
            transform 1.3s cubic-bezier(0.22, 1, 0.36, 1) !important;
    }

    .meat-card.card-visible .meat-card-image img {
        transform: scale(1) !important;
    }


    /* -----------------------------
       VISIT US BANNER
    ----------------------------- */

    .visit-background {
        opacity: 0;

        transform:
            scale(1.08)
            translateY(25px);

        transition:
            opacity 1s ease,
            transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .visit-banner.mobile-block-visible .visit-background {
        opacity: 1;

        transform:
            scale(1)
            translateY(0);
    }


    /* Visit overlay */
    .visit-overlay {
        opacity: 0;
        transform: translateY(30px);

        transition:
            opacity 0.8s ease 0.15s,
            transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
    }

    .visit-banner.mobile-block-visible .visit-overlay {
        opacity: 1;
        transform: translateY(0);
    }


    /* -----------------------------
       GOOGLE MAP
    ----------------------------- */

    .visit-map-interactive {
        opacity: 0;

        transform:
            translateY(40px)
            scale(0.96);

        transition:
            opacity 0.8s ease,
            transform 1s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .visit-map-interactive.mobile-block-visible {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }

}/* =====================================================
   FINAL MOBILE IMAGE + CONTACT ANIMATIONS
===================================================== */

@media (max-width: 700px) {

    /* =========================================
       STORY BACKGROUND IMAGE
    ========================================= */

    .story {
        background: none !important;
    }

    .story::before {
        content: "";

        position: absolute;
        inset: 0;

        background:
            url("images/story-mobile.png")
            center center / cover
            no-repeat;

        opacity: 0;

        transform:
            scale(1.10)
            translateY(25px);

        filter: blur(4px);

        transition:
            opacity 0.9s ease,
            transform 1.4s cubic-bezier(0.22, 1, 0.36, 1),
            filter 0.9s ease;

        z-index: 0;
    }

    .story.story-image-visible::before {
        opacity: 1;

        transform:
            scale(1)
            translateY(0);

        filter: blur(0);
    }


    /* Make sure story text stays above image */

    .story-content {
        position: relative;
        z-index: 2;
    }

    .story::after {
        z-index: 1;
    }


    /* =========================================
       VISIT US IMAGE
    ========================================= */

    .visit-background {
        opacity: 0 !important;

        transform:
            scale(1.12)
            translateY(30px) !important;

        filter: blur(5px);

        transition:
            opacity 0.9s ease,
            transform 1.4s cubic-bezier(0.22, 1, 0.36, 1),
            filter 0.9s ease !important;
    }

    .visit-background.visit-image-visible {
        opacity: 1 !important;

        transform:
            scale(1)
            translateY(0) !important;

        filter: blur(0);
    }


    /* =========================================
       CONTACT US FORM
    ========================================= */

    .contact-inner {
        opacity: 0 !important;

        transform:
            translateY(45px)
            scale(0.98) !important;

        filter: blur(4px);

        transition:
            opacity 0.9s ease,
            transform 1s cubic-bezier(0.22, 1, 0.36, 1),
            filter 0.9s ease !important;
    }

    .contact-inner.contact-mobile-visible {
        opacity: 1 !important;

        transform:
            translateY(0)
            scale(1) !important;

        filter: blur(0);
    }

}