/* =========================================================
   MOMENTO
   PREMIUM CAFÉ SHOWCASE
========================================================= */


/* =========================================================
   ROOT
========================================================= */

:root {
    --cream: #f4eee5;
    --cream-light: #faf6ef;
    --cream-dark: #e8ded0;

    --brown: #57351f;
    --brown-dark: #21140d;
    --brown-deep: #100b08;

    --gold: #b8783f;
    --gold-light: #e7bd8a;

    --text: #211a15;
    --text-soft: #71665c;

    --white: #ffffff;

    --radius-small: 16px;
    --radius-medium: 24px;
    --radius-large: 34px;

    --shadow:
        0 25px 70px
        rgba(48, 30, 17, 0.12);

    --container: 1280px;
}


/* =========================================================
   RESET
========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {
    margin: 0;

    overflow-x: hidden;

    background: var(--cream);

    color: var(--text);

    font-family: "DM Sans", sans-serif;

    line-height: 1.6;

    -webkit-font-smoothing: antialiased;
}


body.no-scroll {
    overflow: hidden;
}


img {
    display: block;

    width: 100%;
}


a {
    color: inherit;

    text-decoration: none;
}


button {
    font: inherit;
}


figure {
    margin: 0;
}


.container {
    width:
        min(
            calc(100% - 64px),
            var(--container)
        );

    margin-inline: auto;
}


.section {
    position: relative;

    padding: 130px 0;
}


/* =========================================================
   TYPOGRAPHY
========================================================= */

.eyebrow {
    margin: 0 0 18px;

    color: var(--gold);

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

    letter-spacing: 0.24em;

    text-transform: uppercase;
}


.eyebrow--light {
    color: var(--gold-light);
}


.section-title {
    margin: 0;

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(
            48px,
            5vw,
            78px
        );

    font-weight: 400;

    line-height: 1;

    letter-spacing: -0.04em;
}


.section-title span {
    display: block;

    color: var(--brown);
}


.section-title--light {
    color: #fff8ef;
}


.section-title--light span {
    color: var(--gold-light);
}


.section-text {
    max-width: 540px;

    margin: 28px 0 0;

    color: var(--text-soft);

    font-size: 16px;

    line-height: 1.85;
}


.section-text--light {
    color:
        rgba(
            255,
            255,
            255,
            0.67
        );
}


/* =========================================================
   BUTTONS
========================================================= */

.button {
    display: inline-flex;

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

    gap: 25px;

    min-height: 54px;

    padding: 0 27px;

    border: 0;
    border-radius: 999px;

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

    cursor: pointer;

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease;
}


.button:hover {
    transform: translateY(-3px);
}


.button span {
    transition:
        transform 0.25s ease;
}


.button:hover span {
    transform: translateX(4px);
}


.button--cream {
    background: var(--gold-light);

    color: var(--brown-dark);
}


.button--cream:hover {
    background: #f3d2aa;
}


.button--brown {
    background: var(--brown);

    color: #fff;
}


.button--brown:hover {
    background: #3e2618;
}


.button--outline {
    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.45
        );

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

    color: #fff;

    backdrop-filter: blur(10px);
}


.button--outline:hover {
    border-color: var(--gold-light);

    background: var(--gold-light);

    color: var(--brown-dark);
}


/* =========================================================
   HEADER
========================================================= */

.header {
    position: fixed;

    top: 0;
    left: 0;

    z-index: 1000;

    width: 100%;

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

    transition:
        background 0.35s ease,
        box-shadow 0.35s ease,
        backdrop-filter 0.35s ease;
}


.header.is-scrolled {
    background:
        rgba(
            18,
            12,
            8,
            0.86
        );

    box-shadow:
        0 12px 35px
        rgba(
            0,
            0,
            0,
            0.15
        );

    backdrop-filter: blur(18px);
}


.header__inner {
    display: grid;

    grid-template-columns:
        1fr auto 1fr;

    align-items: center;

    min-height: 90px;
}


/* =========================================================
   BRAND
========================================================= */

.brand {
    display: inline-flex;

    flex-direction: column;

    width: fit-content;

    color: #fff;
}


.brand__name {
    font-family:
        "Playfair Display",
        serif;

    font-size: 25px;

    line-height: 1;

    letter-spacing: 0.12em;
}


.brand__sub {
    margin-top: 6px;

    font-size: 7px;

    letter-spacing: 0.48em;
}


/* =========================================================
   NAVIGATION
========================================================= */

.nav {
    display: flex;

    align-items: center;

    gap: 38px;

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

    font-size: 13px;
}


.nav a {
    position: relative;

    padding: 10px 0;

    transition:
        color 0.2s ease;
}


.nav a::after {
    position: absolute;

    bottom: 4px;
    left: 0;

    width: 0;
    height: 1px;

    background: var(--gold-light);

    content: "";

    transition:
        width 0.25s ease;
}


.nav a:hover {
    color: #fff;
}


.nav a:hover::after {
    width: 100%;
}


.header__cta {
    justify-self: end;
}


/* =========================================================
   MOBILE MENU BUTTON
========================================================= */

.menu-toggle {
    display: none;

    position: relative;

    width: 46px;
    height: 46px;

    padding: 0;

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

    border-radius: 50%;

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

    cursor: pointer;
}


.menu-toggle span {
    position: absolute;

    left: 50%;

    width: 20px;
    height: 1px;

    background: #fff;

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


.menu-toggle span:first-child {
    top: 18px;

    transform:
        translateX(-50%);
}


.menu-toggle span:last-child {
    top: 26px;

    transform:
        translateX(-50%);
}


.menu-toggle.is-active span:first-child {
    top: 22px;

    transform:
        translateX(-50%)
        rotate(45deg);
}


.menu-toggle.is-active span:last-child {
    top: 22px;

    transform:
        translateX(-50%)
        rotate(-45deg);
}


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

.hero {
    position: relative;

    display: flex;

    align-items: center;

    min-height: 100svh;

    overflow: hidden;

    background: var(--brown-deep);

    color: #fff;
}


.hero__image {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transform: scale(1.02);

    animation:
        heroZoom
        12s
        ease-out
        forwards;
}


@keyframes heroZoom {

    from {
        transform: scale(1.07);
    }

    to {
        transform: scale(1.02);
    }

}


.hero__overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(10, 7, 5, 0.93) 0%,
            rgba(10, 7, 5, 0.72) 36%,
            rgba(10, 7, 5, 0.28) 68%,
            rgba(10, 7, 5, 0.16) 100%
        );
}


.hero__content {
    position: relative;

    z-index: 2;

    padding-top: 70px;
}


.hero h1 {
    margin: 0;

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(
            78px,
            10vw,
            145px
        );

    font-weight: 400;

    line-height: 0.82;

    letter-spacing: 0.025em;
}


.hero__claim {
    max-width: 680px;

    margin: 36px 0 0;

    color: var(--gold-light);

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(
            38px,
            4.4vw,
            66px
        );

    line-height: 1.03;

    letter-spacing: -0.03em;
}


.hero__claim span {
    display: block;
}


.hero__meta {
    display: flex;

    align-items: center;

    gap: 15px;

    margin: 30px 0 38px;

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

    font-size: 14px;
}


.hero__meta i {
    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: var(--gold-light);
}


.hero__scroll {
    position: absolute;

    z-index: 3;

    bottom: 35px;
    left:
        max(
            32px,
            calc(
                (100% - var(--container))
                / 2
            )
        );

    display: flex;

    align-items: center;

    gap: 13px;

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

    font-size: 11px;

    letter-spacing: 0.04em;
}


.hero__mouse {
    position: relative;

    width: 22px;
    height: 34px;

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

    border-radius: 20px;
}


.hero__mouse i {
    position: absolute;

    top: 7px;
    left: 50%;

    width: 2px;
    height: 6px;

    border-radius: 4px;

    background: #fff;

    transform:
        translateX(-50%);

    animation:
        mouseScroll
        1.6s
        infinite;
}


@keyframes mouseScroll {

    0% {
        opacity: 0;
        transform:
            translate(-50%, 0);
    }

    35% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform:
            translate(-50%, 9px);
    }

}


/* =========================================================
   ABOUT
========================================================= */

.about {
    overflow: hidden;

    background: var(--cream);
}


.about::before {
    position: absolute;

    top: -180px;
    right: -180px;

    width: 430px;
    height: 430px;

    border-radius: 50%;

    background:
        rgba(
            181,
            119,
            61,
            0.07
        );

    filter: blur(5px);

    content: "";
}


.about__layout {
    position: relative;

    display: grid;

    grid-template-columns:
        1.15fr 0.85fr;

    align-items: center;

    min-height: 680px;
}


.about__photo {
    height: 680px;

    overflow: hidden;

    border-radius: var(--radius-large);
}


.about__photo img {
    height: 100%;

    object-fit: cover;

    transition:
        transform
        0.8s
        cubic-bezier(.2,.8,.2,1);
}


.about__photo:hover img {
    transform: scale(1.035);
}


.about__card {
    position: relative;

    z-index: 2;

    margin-left: -85px;

    padding: 70px;

    border:
        1px solid
        rgba(
            84,
            52,
            29,
            0.07
        );

    border-radius: var(--radius-large);

    background:
        rgba(
            250,
            246,
            239,
            0.97
        );

    box-shadow: var(--shadow);
}


.about__features {
    display: grid;

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

    gap: 18px;

    margin-top: 42px;
}


.feature {
    display: flex;

    flex-direction: column;

    gap: 10px;

    color: #54483e;

    font-size: 12px;

    line-height: 1.35;
}


.feature__icon {
    color: var(--gold);

    font-size: 27px;
}


.feature strong {
    font-weight: 500;
}


/* =========================================================
   NUMBERS
========================================================= */

.numbers {
    padding: 60px 0;

    background: var(--brown-dark);

    color: #fff;
}


.numbers__grid {
    display: grid;

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


.numbers__grid > div {
    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 4px;

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

    text-align: center;
}


.numbers__grid > div:last-child {
    border-right: 0;
}


.numbers strong {
    color: var(--gold-light);

    font-family:
        "Playfair Display",
        serif;

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

    line-height: 1;
}


.numbers span {
    margin-top: 8px;

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

    font-size: 12px;
}


/* =========================================================
   STORY / O NÁS
========================================================= */

.story {
    background: #f8f3eb;
}


.story__layout {
    display: grid;

    grid-template-columns:
        0.82fr 1.18fr;

    gap: 100px;

    align-items: center;
}


.story__content {
    padding-left: 30px;
}


.story__photo {
    height: 650px;

    overflow: hidden;

    border-radius:
        120px
        var(--radius-large)
        var(--radius-large)
        var(--radius-large);
}


.story__photo img {
    height: 100%;

    object-fit: cover;

    transition:
        transform
        0.8s
        cubic-bezier(.2,.8,.2,1);
}


.story__photo:hover img {
    transform: scale(1.035);
}


/* =========================================================
   COFFEE
========================================================= */

.coffee {
    overflow: hidden;

    background: var(--brown-dark);

    color: #fff;
}


.coffee::after {
    position: absolute;

    right: -150px;
    bottom: -220px;

    width: 500px;
    height: 500px;

    border-radius: 50%;

    background:
        rgba(
            191,
            127,
            68,
            0.08
        );

    content: "";
}


.coffee__layout {
    display: grid;

    grid-template-columns:
        1.12fr 0.88fr;

    gap: 90px;

    align-items: center;
}


.coffee__photo {
    position: relative;

    z-index: 1;

    height: 620px;

    overflow: hidden;

    border-radius:
        var(--radius-large)
        var(--radius-large)
        130px
        var(--radius-large);
}


.coffee__photo img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform
        0.8s
        cubic-bezier(.2,.8,.2,1);
}


.coffee__photo:hover img {
    transform: scale(1.04);
}


.coffee__content {
    position: relative;

    z-index: 2;
}


.text-link {
    display: inline-flex;

    align-items: center;

    gap: 28px;

    margin-top: 38px;

    padding-bottom: 7px;

    border-bottom:
        1px solid
        rgba(
            231,
            189,
            138,
            0.4
        );

    color: var(--gold-light);

    font-size: 13px;
}


.text-link span {
    transition:
        transform 0.25s ease;
}


.text-link:hover span {
    transform: translateX(5px);
}


/* =========================================================
   MENU
========================================================= */

.menu {
    overflow: hidden;

    background: var(--cream);
}


.section-heading {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 50px;

    margin-bottom: 65px;
}


.section-heading__description {
    max-width: 380px;

    margin: 0 0 7px;

    color: var(--text-soft);

    font-size: 15px;

    line-height: 1.8;
}


/* =========================================================
   MENU SLIDER
========================================================= */

.menu-slider {
    position: relative;
}


.menu-track {
    display: flex;

    gap: 24px;

    overflow-x: auto;
    overflow-y: hidden;

    padding:
        8px
        4px
        38px;

    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;

    scrollbar-width: none;

    overscroll-behavior-x: contain;

    -webkit-overflow-scrolling: touch;
}


.menu-track::-webkit-scrollbar {
    display: none;
}


/* =========================================================
   PRODUCT CARD
========================================================= */

.product-card {
    flex:
        0 0
        calc(
            (100% - 48px)
            / 3.15
        );

    min-width: 0;

    overflow: hidden;

    border:
        1px solid
        rgba(
            84,
            52,
            29,
            0.07
        );

    border-radius: var(--radius-medium);

    background: #fff;

    box-shadow:
        0 14px 38px
        rgba(
            57,
            36,
            21,
            0.07
        );

    scroll-snap-align: start;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}


.product-card:hover {
    transform: translateY(-7px);

    box-shadow:
        0 25px 55px
        rgba(
            57,
            36,
            21,
            0.13
        );
}


.product-card__image {
    height: 320px;

    overflow: hidden;
}


.product-card__image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform
        0.65s
        cubic-bezier(.2,.8,.2,1);
}


.product-card:hover
.product-card__image img {
    transform: scale(1.055);
}


.product-card__content {
    position: relative;

    min-height: 190px;

    padding: 28px;
}


.product-card h3 {
    margin: 0;

    font-family:
        "Playfair Display",
        serif;

    font-size: 27px;
    font-weight: 500;
}


.product-card p {
    min-height: 46px;

    margin: 9px 0 23px;

    color: var(--text-soft);

    font-size: 13px;

    line-height: 1.65;
}


.product-card strong {
    color: var(--gold);

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


/* =========================================================
   SLIDER ARROWS
========================================================= */

.slider-arrow {
    position: absolute;

    top: 145px;

    z-index: 10;

    display: grid;

    place-items: center;

    width: 52px;
    height: 52px;

    padding: 0;

    border:
        1px solid
        rgba(
            84,
            52,
            29,
            0.12
        );

    border-radius: 50%;

    background:
        rgba(
            250,
            246,
            239,
            0.92
        );

    color: var(--brown);

    font-size: 20px;

    cursor: pointer;

    box-shadow:
        0 12px 35px
        rgba(
            45,
            28,
            16,
            0.13
        );

    backdrop-filter: blur(12px);

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


.slider-arrow:hover {
    background: var(--brown);

    color: #fff;

    transform: scale(1.08);
}


.slider-arrow:disabled {
    opacity: 0.3;

    pointer-events: none;
}


.slider-arrow--prev {
    left: -25px;
}


.slider-arrow--next {
    right: -25px;
}


.menu__footer {
    margin-top: 15px;

    text-align: center;
}


/* =========================================================
   GALLERY
========================================================= */

.gallery {
    background: #e9dfd1;
}


.gallery__grid {
    display: grid;

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

    grid-auto-rows: 260px;

    gap: 18px;
}


.gallery__item {
    overflow: hidden;

    border-radius: var(--radius-medium);
}


.gallery__item:nth-child(1) {
    grid-column: span 7;
    grid-row: span 2;
}


.gallery__item:nth-child(2) {
    grid-column: span 5;
}


.gallery__item:nth-child(3) {
    grid-column: span 5;
}


.gallery__item:nth-child(4) {
    grid-column: 3 / span 8;

    height: 330px;

    margin-top: 12px;
}


.gallery__item img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform
        0.8s
        cubic-bezier(.2,.8,.2,1);
}


.gallery__item:hover img {
    transform: scale(1.045);
}


/* =========================================================
   CONTACT
========================================================= */

.contact {
    overflow: hidden;

    background: var(--brown-deep);

    color: #fff;
}


.contact__layout {
    display: grid;

    grid-template-columns:
        0.75fr 1.25fr;

    gap: 90px;

    align-items: center;
}


.contact__details {
    display: grid;

    gap: 30px;

    margin-top: 50px;
}


.contact__details > div {
    display: flex;

    flex-direction: column;

    gap: 5px;
}


.contact__details span {
    color: var(--gold-light);

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

    letter-spacing: 0.17em;

    text-transform: uppercase;
}


.contact__details strong {
    color:
        rgba(
            255,
            255,
            255,
            0.76
        );

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

    line-height: 1.7;
}


.contact__map {
    position: relative;

    min-height: 500px;

    overflow: hidden;

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

    border-radius:
        90px
        var(--radius-large)
        var(--radius-large)
        var(--radius-large);

    background:
        radial-gradient(
            circle at 50% 45%,
            #30251d 0%,
            #18120e 45%,
            #0c0907 100%
        );
}


.contact__map::before,
.contact__map::after {
    position: absolute;

    width: 140%;

    height: 1px;

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

    content: "";
}


.contact__map::before {
    top: 35%;

    left: -20%;

    transform: rotate(-17deg);
}


.contact__map::after {
    top: 65%;

    left: -20%;

    transform: rotate(13deg);
}


.contact__pin {
    position: absolute;

    top: 50%;
    left: 50%;

    z-index: 2;

    display: flex;

    flex-direction: column;

    align-items: center;

    transform:
        translate(-50%, -50%);

    text-align: center;
}


.contact__pin span {
    margin-bottom: 12px;

    color: var(--gold-light);

    font-size: 35px;
}


.contact__pin strong {
    font-family:
        "Playfair Display",
        serif;

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

    letter-spacing: 0.12em;
}


.contact__pin small {
    margin-top: 5px;

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

    font-size: 9px;

    letter-spacing: 0.35em;
}


/* =========================================================
   FOOTER
========================================================= */

.footer {
    padding: 38px 0;

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

    background: #080604;

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


.footer__inner {
    display: flex;

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

    gap: 30px;
}


.footer p {
    margin: 0;

    font-size: 11px;
}


.footer__socials {
    display: flex;

    gap: 26px;

    font-size: 12px;
}


.footer__socials a {
    transition:
        color 0.2s ease;
}


.footer__socials a:hover {
    color: var(--gold-light);
}


/* =========================================================
   FULL MENU MODAL
========================================================= */

.menu-modal {
    position: fixed;

    inset: 0;

    z-index: 5000;

    display: grid;

    place-items: center;

    padding: 35px;

    visibility: hidden;

    opacity: 0;

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
}


.menu-modal.is-open {
    visibility: visible;

    opacity: 1;
}


.menu-modal__backdrop {
    position: absolute;

    inset: 0;

    background:
        rgba(
            9,
            6,
            4,
            0.82
        );

    backdrop-filter:
        blur(14px);
}


.menu-modal__window {
    position: relative;

    z-index: 2;

    width:
        min(
            900px,
            100%
        );

    max-height:
        calc(100vh - 70px);

    padding: 14px;

    overflow: auto;

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

    border-radius: 30px;

    background: #1a120d;

    box-shadow:
        0 40px 120px
        rgba(
            0,
            0,
            0,
            0.55
        );

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

    transition:
        transform
        0.35s
        cubic-bezier(.2,.8,.2,1);
}


.menu-modal.is-open
.menu-modal__window {
    transform:
        translateY(0)
        scale(1);
}


.menu-modal__window img {
    width: 100%;
    height: auto;

    border-radius: 19px;
}


.menu-modal__close {
    position: sticky;

    top: 10px;

    z-index: 5;

    display: grid;

    place-items: center;

    width: 46px;
    height: 46px;

    margin:
        0 0
        -46px
        auto;

    padding: 0;

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

    border-radius: 50%;

    background:
        rgba(
            20,
            14,
            10,
            0.82
        );

    color: #fff;

    font-size: 27px;
    font-weight: 300;

    cursor: pointer;

    backdrop-filter: blur(10px);

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


.menu-modal__close:hover {
    background: var(--brown);

    transform: rotate(8deg);
}


/* =========================================================
   REVEAL ANIMATIONS
========================================================= */

.reveal {
    opacity: 0;

    transform:
        translateY(35px);

    transition:
        opacity
        0.8s
        ease,
        transform
        0.8s
        cubic-bezier(.2,.8,.2,1);
}


.reveal.is-visible {
    opacity: 1;

    transform:
        translateY(0);
}


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

@media (max-width: 1050px) {

    .container {
        width:
            min(
                calc(100% - 40px),
                920px
            );
    }


    .section {
        padding: 100px 0;
    }


    /* HEADER */

    .header__inner {
        grid-template-columns:
            1fr auto;
    }


    .nav,
    .header__cta {
        display: none;
    }


    .menu-toggle {
        display: block;
    }


    .nav.is-open {
        position: absolute;

        top: 90px;
        left: 20px;
        right: 20px;

        display: flex;

        flex-direction: column;

        align-items: stretch;

        gap: 0;

        padding: 18px;

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

        border-radius: 22px;

        background:
            rgba(
                19,
                13,
                9,
                0.96
            );

        box-shadow:
            0 25px 70px
            rgba(
                0,
                0,
                0,
                0.3
            );

        backdrop-filter: blur(20px);
    }


    .nav.is-open a {
        padding: 15px 12px;

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


    .nav.is-open a:last-child {
        border-bottom: 0;
    }


    /* ABOUT */

    .about__layout {
        grid-template-columns:
            1fr 0.85fr;
    }


    .about__photo {
        height: 610px;
    }


    .about__card {
        margin-left: -55px;

        padding: 50px;
    }


    /* STORY */

    .story__layout {
        gap: 55px;
    }


    .story__content {
        padding-left: 0;
    }


    .story__photo {
        height: 560px;
    }


    /* COFFEE */

    .coffee__layout {
        gap: 55px;
    }


    .coffee__photo {
        height: 540px;
    }


    /* MENU */

    .product-card {
        flex:
            0 0
            calc(
                (100% - 24px)
                / 2.15
            );
    }


    /* CONTACT */

    .contact__layout {
        gap: 55px;
    }

}


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

@media (max-width: 700px) {

    .container {
        width:
            calc(100% - 32px);
    }


    .section {
        padding: 78px 0;
    }


    /* HEADER */

    .header__inner {
        min-height: 76px;
    }


    .brand__name {
        font-size: 21px;
    }


    .brand__sub {
        font-size: 6px;
    }


    .nav.is-open {
        top: 76px;

        left: 16px;
        right: 16px;
    }


    /* HERO */

    .hero {
        min-height: 760px;
    }


    .hero__overlay {
        background:
            linear-gradient(
                90deg,
                rgba(8, 5, 4, 0.88),
                rgba(8, 5, 4, 0.52)
            );
    }


    .hero__content {
        padding-top: 30px;
    }


    .hero h1 {
        font-size:
            clamp(
                58px,
                20vw,
                88px
            );
    }


    .hero__claim {
        max-width: 360px;

        font-size:
            clamp(
                34px,
                11vw,
                48px
            );
    }


    .hero__meta {
        flex-wrap: wrap;

        max-width: 300px;

        font-size: 12px;
    }


    .hero__scroll {
        left: 16px;

        bottom: 25px;
    }


    /* TITLES */

    .section-title {
        font-size:
            clamp(
                43px,
                13vw,
                62px
            );
    }


    /* ABOUT */

    .about__layout {
        display: block;

        min-height: 0;
    }


    .about__photo {
        height: 460px;

        border-radius: 26px;
    }


    .about__card {
        width:
            calc(100% - 20px);

        margin:
            -70px
            auto
            0;

        padding:
            42px 26px;

        border-radius: 26px;
    }


    .about__features {
        grid-template-columns: 1fr;

        gap: 20px;

        margin-top: 35px;
    }


    .feature {
        flex-direction: row;

        align-items: center;

        gap: 14px;
    }


    /* NUMBERS */

    .numbers {
        padding: 45px 0;
    }


    .numbers__grid {
        grid-template-columns: 1fr;

        gap: 30px;
    }


    .numbers__grid > div {
        padding-bottom: 30px;

        border-right: 0;

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


    .numbers__grid > div:last-child {
        padding-bottom: 0;

        border-bottom: 0;
    }


    /* STORY */

    .story__layout {
        grid-template-columns: 1fr;

        gap: 45px;
    }


    .story__photo {
        height: 470px;

        border-radius:
            70px
            26px
            26px
            26px;
    }


    /* COFFEE */

    .coffee__layout {
        display: flex;

        flex-direction: column-reverse;

        gap: 50px;
    }


    .coffee__photo {
        width: 100%;
        height: 430px;

        border-radius:
            26px
            26px
            80px
            26px;
    }


    /* SECTION HEADING */

    .section-heading {
        align-items: flex-start;

        flex-direction: column;

        gap: 25px;

        margin-bottom: 42px;
    }


    .section-heading__description {
        max-width: 100%;
    }


    /* MENU */

    .menu-track {
        gap: 16px;

        margin-right: -16px;

        padding-right: 16px;
    }


    .product-card {
        flex:
            0 0
            86%;
    }


    .product-card__image {
        height: 285px;
    }


    .product-card__content {
        min-height: 180px;

        padding: 24px;
    }


    .slider-arrow {
        display: none;
    }


    .menu__footer {
        margin-top: 5px;
    }


    /* GALLERY */

    .gallery__grid {
        display: grid;

        grid-template-columns: 1fr;

        grid-auto-rows: auto;

        gap: 14px;
    }


    .gallery__item,
    .gallery__item:nth-child(1),
    .gallery__item:nth-child(2),
    .gallery__item:nth-child(3),
    .gallery__item:nth-child(4) {
        grid-column: auto;
        grid-row: auto;

        width: 100%;
        height: 340px;

        margin: 0;

        border-radius: 22px;
    }


    .gallery__item:nth-child(1) {
        height: 450px;
    }


    /* CONTACT */

    .contact__layout {
        grid-template-columns: 1fr;

        gap: 55px;
    }


    .contact__map {
        min-height: 380px;

        border-radius:
            65px
            26px
            26px
            26px;
    }


    /* FOOTER */

    .footer__inner {
        align-items: flex-start;

        flex-direction: column;

        gap: 22px;
    }


    /* MODAL */

    .menu-modal {
        padding: 15px;
    }


    .menu-modal__window {
        max-height:
            calc(
                100svh - 30px
            );

        padding: 8px;

        border-radius: 22px;
    }


    .menu-modal__window img {
        border-radius: 16px;
    }


    .menu-modal__close {
        width: 42px;
        height: 42px;

        margin-bottom: -42px;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

    html {
        scroll-behavior: auto;
    }


    *,
    *::before,
    *::after {
        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;
    }

}
.about__features {
    display: grid;

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

    gap: 0;

    margin-top: 45px;
}


.feature {
    position: relative;

    display: flex;
    flex-direction: column;

    align-items: center;

    padding: 0 24px;

    text-align: center;
}


.feature:not(:last-child)::after {
    position: absolute;

    top: 22px;
    right: 0;

    width: 1px;
    height: 95px;

    background:
        rgba(87, 53, 31, 0.14);

    content: "";
}


.feature__icon {
    display: flex;

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

    width: 48px;
    height: 48px;

    margin-bottom: 12px;

    color: var(--gold);
}


.feature__icon svg {
    width: 42px;
    height: 42px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;
}


.about__features {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(150px, 1fr));

    gap: 36px;

    width: 100%;
    max-width: 620px;

    margin-top: 48px;
}


.feature {
    position: relative;

    display: flex;
    flex-direction: column;

    align-items: center;

    min-width: 0;

    padding: 0 18px;

    text-align: center;
}


.feature:not(:last-child)::after {
    position: absolute;

    top: 18px;
    right: -18px;

    width: 1px;
    height: 125px;

    background:
        rgba(87, 53, 31, 0.14);

    content: "";
}


.feature__icon {
    display: flex;

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

    width: 50px;
    height: 50px;

    margin-bottom: 16px;

    color: var(--gold);
}


.feature__icon svg {
    width: 40px;
    height: 40px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;
}


.feature strong {
    max-width: 130px;

    color: var(--text);

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

    line-height: 1.3;
}


.feature p {
    max-width: 145px;

    margin: 14px 0 0;

    color: var(--text-soft);

    font-size: 12px;

    line-height: 1.55;
}
/* =========================================================
   CONTACT MAP
========================================================= */

.contact__map {
    position: relative;

    min-height: 500px;

    overflow: hidden;

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

    border-radius:
        90px
        var(--radius-large)
        var(--radius-large)
        var(--radius-large);

    background: #18120e;
}


.contact__map iframe {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    border: 0;

    filter:
        grayscale(1)
        sepia(0.25)
        brightness(0.65)
        contrast(1.15);

    transition:
        filter 0.4s ease,
        transform 0.6s ease;
}


.contact__map:hover iframe {
    filter:
        grayscale(0.7)
        sepia(0.18)
        brightness(0.78)
        contrast(1.08);
}


.contact__map-badge {
    position: absolute;

    left: 28px;
    bottom: 28px;

    z-index: 2;

    display: flex;
    flex-direction: column;

    padding: 15px 20px;

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

    border-radius: 16px;

    background:
        rgba(18, 12, 8, 0.82);

    box-shadow:
        0 15px 40px
        rgba(0, 0, 0, 0.25);

    backdrop-filter: blur(14px);

    pointer-events: none;
}


.contact__map-badge span {
    color: #fff8ef;

    font-family:
        "Playfair Display",
        serif;

    font-size: 18px;

    letter-spacing: 0.12em;
}


.contact__map-badge small {
    margin-top: 3px;

    color: var(--gold-light);

    font-size: 10px;

    letter-spacing: 0.08em;
}
/* =========================================================
   MOMENTO
   MOBILE VERSION
   0 - 700px
========================================================= */

@media (max-width: 700px) {

    /* =====================================================
       GLOBAL
    ====================================================== */

    .container {
        width: calc(100% - 32px);
    }

    .section {
        padding: 78px 0;
    }

    body {
        overflow-x: hidden;
    }

    .eyebrow {
        margin-bottom: 14px;

        font-size: 10px;
        letter-spacing: 0.22em;
    }

    .section-title {
        font-size: clamp(42px, 13vw, 58px);

        line-height: 0.98;
        letter-spacing: -0.04em;
    }

    .section-text {
        margin-top: 22px;

        font-size: 14px;
        line-height: 1.75;
    }


    /* =====================================================
       HEADER
    ====================================================== */

    .header__inner {
        grid-template-columns: 1fr auto;

        min-height: 72px;
    }

    .brand__name {
        font-size: 20px;
    }

    .brand__sub {
        margin-top: 5px;

        font-size: 5px;
        letter-spacing: 0.42em;
    }

    .nav,
    .header__cta {
        display: none;
    }

    .menu-toggle {
        display: block;

        width: 44px;
        height: 44px;
    }

    .nav.is-open {
        position: absolute;

        top: 80px;
        left: 16px;
        right: 16px;

        display: flex;
        flex-direction: column;

        gap: 0;

        padding: 12px 18px;

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

        border-radius: 22px;

        background:
            rgba(18, 12, 8, 0.96);

        box-shadow:
            0 25px 70px
            rgba(0, 0, 0, 0.35);

        backdrop-filter: blur(20px);
    }

    .nav.is-open a {
        padding: 16px 4px;

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

        font-size: 14px;
    }

    .nav.is-open a:last-child {
        border-bottom: 0;
    }


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

    .hero {
        min-height: 100svh;
    }

    .hero__image {
        object-position: 62% center;
    }

    .hero__overlay {
        background:
            linear-gradient(
                90deg,
                rgba(8, 5, 3, 0.91) 0%,
                rgba(8, 5, 3, 0.72) 48%,
                rgba(8, 5, 3, 0.32) 100%
            );
    }

    .hero__content {
        padding-top: 20px;
        padding-bottom: 80px;
    }

    .hero h1 {
        font-size: clamp(58px, 19vw, 82px);

        line-height: 0.9;
        letter-spacing: 0;
    }

    .hero__claim {
        max-width: 330px;

        margin-top: 28px;

        font-size: clamp(34px, 10.5vw, 47px);
        line-height: 1.03;
    }

    .hero__meta {
        flex-wrap: wrap;

        gap: 10px;

        max-width: 310px;

        margin: 24px 0 30px;

        font-size: 11px;
    }

    .hero .button {
        min-height: 52px;

        padding: 0 23px;
    }

    .hero__scroll {
        bottom: 22px;
        left: 16px;

        font-size: 10px;
    }


    /* =====================================================
       ABOUT / VÍCE NEŽ JEN KAVÁRNA
    ====================================================== */

    .about {
        padding-top: 70px;
        padding-bottom: 80px;
    }

    .about__layout {
        display: flex;
        flex-direction: column;

        min-height: 0;
    }

    .about__photo {
        width: 100%;
        height: 430px;

        border-radius: 28px;
    }

    .about__photo img {
        object-position: center;
    }

    .about__card {
        width: calc(100% - 20px);

        margin:
            -55px
            auto
            0;

        padding:
            40px
            22px
            42px;

        border-radius: 28px;
    }

    .about__card .section-title {
        font-size: clamp(40px, 12vw, 54px);
    }


    /* =====================================================
       ABOUT FEATURES
    ====================================================== */

    .about__features {
        display: grid;

        grid-template-columns: 1fr;

        gap: 0;

        width: 100%;
        max-width: none;

        margin-top: 38px;
    }

    .feature {
        display: grid;

        grid-template-columns:
            52px
            1fr;

        grid-template-rows:
            auto
            auto;

        column-gap: 17px;

        align-items: center;

        padding: 22px 0;

        text-align: left;
    }

    .feature:not(:last-child)::after {
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;

        width: 100%;
        height: 1px;

        background:
            rgba(87, 53, 31, 0.12);
    }

    .feature__icon {
        grid-column: 1;
        grid-row: 1 / 3;

        width: 46px;
        height: 46px;

        margin: 0;
    }

    .feature__icon svg {
        width: 38px;
        height: 38px;
    }

    .feature strong {
        grid-column: 2;
        grid-row: 1;

        max-width: none;

        font-size: 14px;

        text-align: left;
    }

    .feature p {
        grid-column: 2;
        grid-row: 2;

        max-width: 230px;

        margin: 5px 0 0;

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

        text-align: left;
    }


    /* =====================================================
       NUMBERS
    ====================================================== */

    .numbers {
        padding: 48px 0;
    }

    .numbers__grid {
        grid-template-columns: 1fr;

        gap: 0;
    }

    .numbers__grid > div {
        padding: 27px 0;

        border-right: 0;

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

    .numbers__grid > div:first-child {
        padding-top: 0;
    }

    .numbers__grid > div:last-child {
        padding-bottom: 0;

        border-bottom: 0;
    }

    .numbers strong {
        font-size: 44px;
    }


    /* =====================================================
       STORY / O NÁS
    ====================================================== */

    .story__layout {
        display: flex;
        flex-direction: column;

        gap: 42px;
    }

    .story__content {
        padding: 0;
    }

    .story__photo {
        width: 100%;
        height: 440px;

        border-radius:
            70px
            26px
            26px
            26px;
    }

    .story__photo img {
        object-position: center;
    }


    /* =====================================================
       COFFEE STORY
    ====================================================== */

    .coffee__layout {
        display: flex;
        flex-direction: column-reverse;

        gap: 44px;
    }

    .coffee__content {
        width: 100%;
    }

    .coffee__photo {
        width: 100%;
        height: 400px;

        border-radius:
            26px
            26px
            75px
            26px;
    }

    .coffee__photo img {
        object-position: center;
    }

    .text-link {
        margin-top: 30px;
    }


    /* =====================================================
       MENU
    ====================================================== */

    .menu {
        padding-bottom: 85px;
    }

    .section-heading {
        display: block;

        margin-bottom: 38px;
    }

    .section-heading__description {
        max-width: 330px;

        margin-top: 20px;

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


    /* =====================================================
       MENU INFINITE CAROUSEL
    ====================================================== */

    .menu-slider {
        width: 100%;
    }

    .menu-track {
        gap: 14px;

        width: calc(100% + 16px);

        margin-right: -16px;

        padding:
            6px
            16px
            30px
            0;

        scroll-padding-left: 0;
    }

    .product-card {
        flex: 0 0 86%;

        border-radius: 22px;
    }

    .product-card__image {
        height: 270px;
    }

    .product-card__content {
        min-height: 165px;

        padding: 22px;
    }

    .product-card h3 {
        font-size: 25px;
    }

    .product-card p {
        min-height: auto;

        margin: 7px 0 18px;

        font-size: 12px;
    }

    .slider-arrow {
        display: none;
    }

    .menu__footer {
        margin-top: 8px;
    }

    .menu__footer .button {
        width: 100%;
        max-width: 230px;
    }


    /* =====================================================
       GALLERY
    ====================================================== */

    .gallery {
        padding-top: 80px;
    }

    .gallery__grid {
        display: grid;

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

        grid-auto-rows: auto;

        gap: 10px;
    }

    .gallery__item,
    .gallery__item:nth-child(1),
    .gallery__item:nth-child(2),
    .gallery__item:nth-child(3),
    .gallery__item:nth-child(4) {
        width: 100%;

        margin: 0;

        border-radius: 18px;
    }

    .gallery__item:nth-child(1) {
        grid-column: 1 / -1;

        height: 300px;
    }

    .gallery__item:nth-child(2) {
        grid-column: 1;

        height: 230px;
    }

    .gallery__item:nth-child(3) {
        grid-column: 2;

        height: 230px;
    }

    .gallery__item:nth-child(4) {
        grid-column: 1 / -1;

        height: 260px;
    }

    .gallery__item img {
        object-position: center;
    }


    /* =====================================================
       CONTACT
    ====================================================== */

    .contact {
        padding:
            80px
            0
            70px;
    }

    .contact__layout {
        display: flex;
        flex-direction: column;

        gap: 52px;
    }

    .contact__details {
        gap: 25px;

        margin-top: 38px;
    }

    .contact__details strong {
        font-size: 13px;
    }


    /* =====================================================
       MAP
    ====================================================== */

    .contact__map {
        width: 100%;
        min-height: 390px;

        border-radius:
            55px
            24px
            24px
            24px;
    }

    .contact__map iframe {
        min-height: 390px;
    }

    .contact__map-badge {
        left: 16px;
        bottom: 16px;

        padding: 12px 15px;

        border-radius: 13px;
    }

    .contact__map-badge span {
        font-size: 15px;
    }

    .contact__map-badge small {
        font-size: 9px;
    }


    /* =====================================================
       FOOTER
    ====================================================== */

    .footer {
        padding: 34px 0;
    }

    .footer__inner {
        display: flex;

        flex-direction: column;
        align-items: flex-start;

        gap: 22px;
    }

    .footer__socials {
        gap: 22px;
    }


    /* =====================================================
       FULL MENU MODAL
    ====================================================== */

    .menu-modal {
        padding: 12px;
    }

    .menu-modal__window {
        width: 100%;
        max-height: calc(100svh - 24px);

        padding: 7px;

        border-radius: 20px;
    }

    .menu-modal__window img {
        width: 100%;
        height: auto;

        border-radius: 15px;
    }

    .menu-modal__close {
        top: 8px;

        width: 42px;
        height: 42px;

        margin:
            0
            0
            -42px
            auto;

        font-size: 24px;
    }

}