@media(max-width:900px) {
    .container {
        width: min(100% - 34px, 680px)
    }

    .topbar-inner {
        font-size: .58rem
    }

    .nav-menu {
        gap: 16px
    }

    .intro-grid,
    .split-section {
        gap: 45px
    }

    .category-row {
        grid-template-columns: 1fr 1.4fr
    }

    .menu-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .gallery-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .gallery-item,
    .gallery-item:nth-child(2),
    .gallery-item:nth-child(5) {
        height: 260px;
        transform: none
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .form-layout {
        gap: 35px
    }
}

@media(max-width:650px) {
    .breakfast-specials {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    .breakfast-offer__title {
    font-size: clamp(1.1rem, 2vw, 2rem);
    }
    .container {
        width: calc(100% - 32px)
    }
.values-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
}
.filter-bar {
    display: grid;
}

    .topbar-inner span {
        display: none
    }

    .topbar-inner {
        justify-content: center
    }
.brand.brand-light img {
    border-radius: 50px;
    max-width: 80px;
}
.topbar-inner{
  padding: 2px;
}
    .navbar {
        min-height: 72px
    }

    .menu-toggle {
        display: block;
        position: relative;
        z-index: 31
    }

    .nav-menu {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: min(86vw, 320px);
        right: auto;
        background: var(--cream);
        border-right: 1px solid var(--gold);
        box-shadow: 12px 0 35px rgba(46, 5, 8, .2);
        display: flex;
        padding: 105px 28px 28px;
        align-items: stretch;
        flex-direction: column;
        gap: 0;
        transform: translateX(-105%);
        transition: transform .3s ease;
        z-index: 30;
        overflow-y: auto
    }

    .nav-menu.open {
        transform: translateX(0)
    }

    .nav-menu>a {
        padding: 14px 0
    }

    .nav-menu .button {
        margin-top: 8px
    }

    .hero {
        min-height: 620px
    }

    .hero-content {
        padding: 80px 0 65px
    }

    .hero p {
        font-size: .94rem
    }

    .hero-deco {
        font-size: 2rem;
        right: 7%;
        bottom: 19%
    }

    .hero-actions {
        flex-wrap: wrap;
        display: grid;
    }

    .hero-actions .button {
        flex: 1;
        min-width: 145px;
        padding: 13px 12px
    }

    .heading {
        font-size: 2.4rem
    }

    .script-heading {
        font-size: 3rem
    }

    .section-head {
        display: block;
        margin-bottom: 30px
    }

    .section-head .link-arrow {
        margin-top: 12px
    }

    .intro-grid,
    .split-section {
        grid-template-columns: 1fr;
        gap: 35px
    }

    .intro-image,
    .split-image {
        height: 380px
    }

    .split-section.reverse .split-image {
        order: 0
    }

    .categories {
        padding: 0 16px
    }

    .category-row {
        grid-template-columns: 1fr;
        min-height: 210px;
        padding: 30px 0;
        gap: 15px
    }

    .category-copy {
        align-items: start
    }

    .category-copy p {
        font-size: .86rem
    }

    .menu-grid {
        grid-template-columns: 1fr
    }

    .menu-card img {
        height: 230px
    }

    .promo {
        padding: 88px 18px
    }

    .gallery-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px
    }

    .gallery-item,
    .gallery-item:nth-child(2),
    .gallery-item:nth-child(5) {
        height: 180px
    }

    .testimonial-grid {
        grid-template-columns: 1fr
    }

    .quote {
        font-size: 1.15rem
    }

    .contact-grid,
    .contact-details {
        display: block
    }

    .contact-details>div {
        margin-top: 18px
    }

    .page-hero {
        padding: 74px 0 68px
    }

    .page-hero h1 {
        font-size: 3.7rem
    }

    .category-page-grid {
        grid-template-columns: 1fr 1fr
    }

    .form-layout {
        grid-template-columns: 1fr
    }

    .form-card {
        padding: 22px
    }

    .form-row {
        grid-template-columns: 1fr
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 28px
    }

    .footer-grid>div:first-child {
        grid-column: 1/-1
    }

    .footer-bottom {
        display: block;
        line-height: 2
    }

    .footer-bottom span {
        display: block
    }

    .footer-bottom a {
        margin: 0 15px 0 0
    }
}