/* ==========================================================
   THELAB RESTAURANT — UNIFIED CORPORATE DESIGN SYSTEM
   Emerald • Warm natural surfaces • Responsive components
========================================================== */

/* ==========================================================
   CSS VARIABLES
========================================================== */

:root {
    /* Authoritative corporate palette */
    --primary: #0F6B4F;
    --primary-dark: #084C38;
    --secondary: #F1EBDD;
    --background: #FBF7EF;
    --surface: #FFFCF7;
    --dark: #173B2E;
    --text: #34443D;
    --text-light: #6E756E;
    --border: #DDD5C8;
    --vine: #567A45;
    --olive: #7D8756;
    --warm-gold: #B88A4A;
    --terracotta: #B56D4D;

    /* Shadows */
    --shadow-sm: 0 4px 14px rgba(45, 55, 45, .07);
    --shadow: 0 14px 38px rgba(45, 55, 45, .10);
    --shadow-lg: 0 24px 64px rgba(35, 53, 42, .15);

    /* Radius */
    --radius-sm: 10px;
    --radius: 18px;
    --radius-lg: 28px;
    --radius-pill: 999px;

    /* Layout */
    --container: 1200px;
    --header-height: 90px;

    /* Animation */
    --transition: .35s ease;
}

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

*,
*::before,
*::after{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    background:var(--background);

    color:var(--text);

    font-family:"Inter",sans-serif;

    line-height:1.7;

    -webkit-font-smoothing:antialiased;

}

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

h1,
h2,
h3,
h4,
h5{

    font-family:"Abhaya Libre",serif;

    color:var(--dark);

    line-height:1.2;

}

h1{

    font-size:4rem;

}

h2{

    font-size:2.8rem;

}

h3{

    font-size:1.75rem;

}

h4{

    font-size:1.25rem;

}

p{

    color:var(--text-light);

    margin-top:12px;

}

/* ==========================================================
   LINKS
========================================================== */

a{

    text-decoration:none;

    color:inherit;

    transition:var(--transition);

}

/* ==========================================================
   IMAGES
========================================================== */

img{

    display:block;

    width:100%;

    max-width:100%;

}

/* ==========================================================
   CONTAINER
========================================================== */

.container{

    width:min(var(--container),92%);

    margin-inline:auto;

}

/* ==========================================================
   SECTIONS
========================================================== */

section{

    padding:100px 0;

}

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

.primary-btn,
.reserve-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:14px 30px;

    background:var(--primary);

    color:#fff;

    border:none;

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

    font-weight:600;

    cursor:pointer;

    transition:var(--transition);

}

.primary-btn:hover,
.reserve-btn:hover{

    background:var(--primary-dark);

    transform:translateY(-3px);

}

.secondary-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:14px 30px;

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

    border:2px solid #fff;

    color:#fff;

    transition:var(--transition);

}

.secondary-btn:hover{

    background:#fff;

    color:var(--dark);

}

/* ==========================================================
   UTILITIES
========================================================== */

.bg-white{

    background:#fff;

}

.bg-natural{

    background:var(--secondary);

}

.bg-dark{

    background:var(--dark);

    color:#fff;

}

.text-center{

    text-align:center;

}

.hidden{

    opacity:0;

    transform:translateY(40px);

}

.show{

    opacity:1;

    transform:translateY(0);

    transition:.8s;

}

/* ==========================================================
   HEADER & NAVIGATION
========================================================== */

header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:1000;

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

    backdrop-filter:blur(18px);

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

    box-shadow:0 2px 18px rgba(0,0,0,.05);

    transition:var(--transition);

}

.nav{

    height:var(--header-height);

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:30px;

}

/* ==========================================================
   LOGO
========================================================== */

.logo{

    display:flex;

    align-items:center;

}

.logo img{

    height:68px;

    width:auto;

}

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

nav{

    display:flex;

    align-items:center;

    gap:32px;

}

nav a{

    position:relative;

    font-size:.95rem;

    font-weight:600;

    color:var(--dark);

    transition:var(--transition);

}

/* Underline animation */

nav a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:var(--primary);

    transition:width .3s ease;

}

nav a:hover,

nav a.active{

    color:var(--primary);

}

nav a:hover::after,

nav a.active::after{

    width:100%;

}

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

.header-actions{

    display:flex;

    align-items:center;

    gap:15px;

}

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

.menu-toggle{

    display:none;

    width:46px;

    height:46px;

    border:none;

    background:transparent;

    cursor:pointer;

    align-items:center;

    justify-content:center;

}

.menu-toggle span{

    display:block;

    width:26px;

    height:3px;

    margin:5px 0;

    border-radius:20px;

    background:var(--dark);

    transition:var(--transition);

}

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

header.scrolled{

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

    box-shadow:0 8px 30px rgba(0,0,0,.08);

}

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

@media (max-width:768px){

    .nav{

        height:80px;

    }

    .logo img{

        height:56px;

    }

    .menu-toggle{

        display:flex;

        flex-direction:column;

    }

    nav{

        position:absolute;

        top:100%;

        left:0;

        width:100%;

        background:#fff;

        display:none;

        flex-direction:column;

        gap:0;

        padding:20px 0;

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

    }

    nav.open{

        display:flex;

    }

    nav a{

        width:100%;

        text-align:center;

        padding:18px 0;

    }

    nav a::after{

        display:none;

    }

    header .reserve-btn{
    display:none;
}

}

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

/* Shared Hero Styles */

.hero,
.page-hero{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    text-align:center;

}

/* Home Page Hero */

.hero{

    min-height:100vh;

    padding-top:var(--header-height);

}

/* Internal Pages */

.page-hero{

    min-height:260px;

    padding-top:var(--header-height);

}

/* Hero Images */

.hero img,
.page-hero img{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

}

/* Dark Overlay */

.overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
        rgba(0,0,0,.45),
        rgba(0,0,0,.55)
    );

}

/* Hero Content */

.hero-content{

    position:relative;

    z-index:2;

    width:min(850px,90%);

    padding:20px;

    color:#fff;

}

.hero-content h1{

    color:#fff;

    margin-bottom:20px;

    text-shadow:0 3px 15px rgba(0,0,0,.30);

}

.hero-content p{

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

    max-width:700px;

    margin:0 auto 35px;

    font-size:1.1rem;

}

.hero-buttons{

    display:flex;

    justify-content:center;

    gap:18px;

    flex-wrap:wrap;

}

/* Page Title */

.page-title{

    position:relative;

    z-index:2;

    color:#fff;

}

.page-title h1{

    color:#fff;

    margin-bottom:10px;

}

.page-title p{

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

    margin:0;

}

/* Decorative Fade */

.hero::after,
.page-hero::after{

    content:"";

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    height:120px;

    background:linear-gradient(
        transparent,
        var(--background)
    );

}

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

@media (max-width:992px){

    .hero{

        min-height:90vh;

    }

    .page-hero{

        min-height:190px;

    }

    .hero-content h1{

        font-size:3rem;

    }

}

@media (max-width:768px){

    .hero{

        min-height:80vh;

    }

    .page-hero{

        min-height:180px;

    }

    .hero-content{

        width:92%;

    }

    .hero-content h1{

        font-size:2.3rem;

    }

    .hero-content p{

        font-size:1rem;

    }

    .hero-buttons{

        flex-direction:column;

        align-items:center;

    }

    .hero-buttons a{

        width:220px;

    }

}

/* ==========================================================
   HOME PAGE SECTIONS
========================================================== */

/* Section Heading */

.section-heading{

    text-align:center;

    max-width:720px;

    margin:0 auto 70px;

}

.section-heading p{

    margin-top:18px;

}

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

.about-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.about-content{

    display:flex;

    flex-direction:column;

    gap:20px;

}

.about-image img{

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

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

    transition:var(--transition);

}

.about-image img:hover{

    transform:scale(1.03);

}

/* ==========================================================
   STORY SECTIONS
========================================================== */

.story{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

    margin:100px 0;

}

.story:nth-child(even) .story-image{

    order:2;

}

.story-image img{

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

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

    transition:var(--transition);

}

.story-image img:hover{

    transform:scale(1.03);

}

.story-content{

    display:flex;

    flex-direction:column;

    gap:20px;

}

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

.features{

    display:grid;

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

    gap:35px;

}

.feature{

    background:var(--surface);

    padding:40px 35px;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    text-align:center;

    transition:var(--transition);

}

.feature:hover{

    transform:translateY(-8px);

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

}

.feature-icon{

    width:70px;

    height:70px;

    margin:0 auto 25px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:var(--secondary);

    color:var(--primary);

    font-size:2rem;

}

.feature h3{

    margin-bottom:15px;

}

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

.card{

    background:var(--surface);

    border-radius:var(--radius);

    overflow:hidden;

    box-shadow:var(--shadow);

    transition:var(--transition);

}

.card:hover{

    transform:translateY(-8px);

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

}

.card img{

    height:260px;

    object-fit:cover;

    transition:var(--transition);

}

.card:hover img{

    transform:scale(1.08);

}

.card-content{

    padding:30px;

}

.card-content h3{

    margin-bottom:12px;

}

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

.gallery-grid{

    display:grid;

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

    gap:25px;

}

.gallery-grid img{

    width:100%;

    height:320px;

    object-fit:cover;

    border-radius:var(--radius);

    transition:var(--transition);

    cursor:pointer;

}

.gallery-grid img:hover{

    transform:scale(1.04);

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

}

/* ==========================================================
   QUOTE
========================================================== */

.quote{

    max-width:900px;

    margin:0 auto;

    text-align:center;

    padding:80px 20px;

}

.quote h2{

    margin-bottom:20px;

}

.quote p{

    font-size:1.15rem;

}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width:992px){

    .about-grid,

    .story,

    .features,

    .gallery-grid{

        grid-template-columns:1fr;

    }

    .story:nth-child(even) .story-image{

        order:0;

    }

}

@media (max-width:768px){

    .feature{

        padding:30px;

    }

    .gallery-grid img{

        height:240px;

    }

    .story{

        gap:40px;

        margin:70px 0;

    }

}

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

/* Page Layout */

.menu-page{

    padding:40px 0 100px;

}

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

.menu-toolbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    margin-bottom:35px;

    flex-wrap:wrap;

}

.menu-search{

    flex:1;

    min-width:280px;

}

.menu-toolbar input{

    width:100%;

    padding:16px 22px;

    border:1px solid var(--border);

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

    background:#fff;

    font-size:1rem;

    transition:var(--transition);

}

.menu-toolbar input:focus{

    outline:none;

    border-color:var(--primary);

    box-shadow:0 0 0 4px rgba(110,165,143,.15);

}

.menu-sort{

    min-width:220px;

}

.menu-toolbar select{

    width:100%;

    padding:16px 20px;

    border:1px solid var(--border);

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

    background:#fff;

    cursor:pointer;

}

/* ==========================================================
   MAIN CATEGORY TABS
========================================================== */

.main-tabs{

    display:flex;

    gap:12px;

    overflow-x:auto;

    padding-bottom:10px;

    margin-bottom:18px;

    scrollbar-width:none;

}

.main-tabs::-webkit-scrollbar{

    display:none;

}

.main-tab{

    padding:13px 24px;

    border:none;

    border-radius:999px;

    background:#F1EBDD;

    color:var(--dark);

    white-space:nowrap;

    cursor:pointer;

    font-weight:600;

    transition:var(--transition);

}

.main-tab:hover{

    background:#DDEFE5;

}

.main-tab.active{

    background:var(--primary);

    color:#fff;

}

/* ==========================================================
   SUB CATEGORY TABS
========================================================== */

.sub-tabs{

    display:flex;

    gap:10px;

    overflow-x:auto;

    padding-bottom:15px;

    margin-bottom:35px;

    scrollbar-width:none;

}

.sub-tabs::-webkit-scrollbar{

    display:none;

}

.sub-tab{

    padding:10px 20px;

    border:none;

    border-radius:999px;

    background:#F5F7F6;

    cursor:pointer;

    white-space:nowrap;

    transition:var(--transition);

}

.sub-tab.active{

    background:var(--primary-dark);

    color:#fff;

}

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

.menu-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

    gap:35px;

}

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

.menu-card{

    background:#fff;

    border-radius:var(--radius);

    overflow:hidden;

    box-shadow:var(--shadow);

    transition:var(--transition);

}

.menu-card:hover{

    transform:translateY(-8px);

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

}

.menu-image{

    position:relative;

}

.menu-image img{

    width:100%;

    height:220px;

    object-fit:cover;

}

.featured-badge{

    position:absolute;

    top:18px;

    left:18px;

    background:var(--primary);

    color:#fff;

    padding:8px 14px;

    border-radius:999px;

    font-size:.8rem;

    font-weight:600;

}

.menu-content{

    padding:28px;

}

.menu-header{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:15px;

    margin-bottom:15px;

}

.menu-header h3{

    margin:0;

}

.price{

    color:var(--primary);

    font-size:1.2rem;

    font-weight:700;

    white-space:nowrap;

}

.description{

    margin-bottom:20px;

}

/* ==========================================================
   BADGES
========================================================== */

.menu-badges{

    display:flex;

    flex-wrap:wrap;

    gap:8px;

    margin-bottom:25px;

}

.badge{

    padding:6px 12px;

    border-radius:999px;

    background:#F1EBDD;

    color:var(--primary-dark);

    font-size:.85rem;

    font-weight:600;

}

/* ==========================================================
   BUTTON
========================================================== */

.menu-card .reserve-btn{

    width:100%;

    text-align:center;

}

/* ==========================================================
   EMPTY STATE
========================================================== */

.empty-menu{

    padding:80px 30px;

    text-align:center;

    background:#fff;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

}

.empty-menu h3{

    margin-bottom:15px;

}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width:768px){

    .menu-toolbar{

        flex-direction:column;

        align-items:stretch;

    }

    .menu-search,

    .menu-sort{

        width:100%;

    }

    .menu-grid{

        grid-template-columns:1fr;

    }

    .menu-image img{

        height:200px;

    }

    .menu-content{

        padding:22px;

    }

}

/* ==========================================================
   CALL TO ACTION
========================================================== */

.cta{

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--primary-dark)
    );

    color:#fff;

    text-align:center;

    padding:100px 20px;

}

.cta h2{

    color:#fff;

    margin-bottom:20px;

}

.cta p{

    max-width:700px;

    margin:0 auto 40px;

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

}

.cta .primary-btn{

    background:#fff;

    color:var(--primary-dark);

}

.cta .primary-btn:hover{

    background:#F1EBDD;

}

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

footer{

    background:var(--dark);

    color:#fff;

    padding:80px 0 40px;

}

.footer{

    display:grid;

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

    gap:50px;

    margin-bottom:50px;

}

.footer-column{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

}

.footer-logo{

    width:180px;

    margin-bottom:25px;

}

.footer h3{

    color:#fff;

    margin-bottom:20px;

}

.footer p{

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

    margin:6px 0;

}

.footer a{

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

    transition:var(--transition);

}

.footer a:hover{

    color:#fff;

}

.footer-bottom{

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

    padding-top:30px;

    text-align:center;

}

.footer-bottom p{

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

    font-size:.9rem;

}

/* ==========================================================
   BACK TO TOP
========================================================== */

#backToTop{

    position:fixed;

    right:25px;

    bottom:25px;

    width:55px;

    height:55px;

    border:none;

    border-radius:50%;

    background:var(--primary);

    color:#fff;

    cursor:pointer;

    box-shadow:var(--shadow);

    opacity:0;

    visibility:hidden;

    transition:var(--transition);

    z-index:999;

}

#backToTop.show{

    opacity:1;

    visibility:visible;

}

#backToTop:hover{

    background:var(--primary-dark);

    transform:translateY(-5px);

}

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

.placeholder{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    height:220px;

    background:linear-gradient(
        135deg,
        #F1EBDD,
        #F8FAF8
    );

    color:var(--primary);

}

.placeholder i{

    font-size:3.5rem;

    margin-bottom:15px;

}

.placeholder h4{

    font-family:"Inter",sans-serif;

    color:var(--text-light);

    font-size:1rem;

}

/* ==========================================================
   FADE ANIMATIONS
========================================================== */

.fade-up{

    opacity:0;

    transform:translateY(40px);

    transition:.8s ease;

}

.fade-up.show{

    opacity:1;

    transform:none;

}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width:1200px){

    .container{

        width:94%;

    }

}

@media (max-width:992px){

    h1{

        font-size:3rem;

    }

    h2{

        font-size:2.4rem;

    }

    section{

        padding:80px 0;

    }

    .footer{

        grid-template-columns:1fr;

        text-align:center;

    }

}

@media (max-width:768px){

    h1{

        font-size:2.4rem;

    }

    h2{

        font-size:2rem;

    }

    h3{

        font-size:1.5rem;

    }

    section{

        padding:70px 0;

    }

    .cta{

        padding:70px 20px;

    }

    .footer{

        gap:40px;

    }

    #backToTop{

        width:50px;

        height:50px;

        right:18px;

        bottom:18px;

    }

}

@media (max-width:576px){

    h1{

        font-size:2rem;

    }

    h2{

        font-size:1.75rem;

    }

    p{

        font-size:.95rem;

    }

    .primary-btn,

    .secondary-btn,

    .reserve-btn{

        width:100%;

        justify-content:center;

    }

}

/* ==========================================================
   CORPORATE IDENTITY — NATURAL EMERALD SYSTEM
   Consolidated from the former brand-refresh.css layer.
========================================================== */

body {
    background: linear-gradient(180deg, #FBF7EF 0%, #F8F3E9 100%);
}

header,
header.scrolled {
    background: rgba(255, 252, 247, .94);
    border-bottom: 1px solid rgba(184, 138, 74, .16);
}

nav a:hover,
nav a.active { color: var(--primary); }

.primary-btn,
.reserve-btn {
    background: var(--primary);
    box-shadow: 0 8px 22px rgba(15, 107, 79, .20);
}

.primary-btn:hover,
.reserve-btn:hover { background: var(--primary-dark); }

.secondary-btn {
    border-color: rgba(255, 255, 255, .82);
    background: rgba(255, 255, 255, .08);
    backdrop-filter: blur(6px);
}

.hero .overlay,
.page-hero .overlay,
.overlay {
    background: linear-gradient(135deg, rgba(9, 48, 35, .58), rgba(52, 43, 31, .42));
}

.hero::after,
.page-hero::after { background: linear-gradient(transparent, var(--background)); }

.hero-content h1,
.page-title h1 { letter-spacing: -.02em; }
.hero-content p { max-width: 760px; }

.bg-natural { background: linear-gradient(135deg, #F3EDDF 0%, #EDF2E6 100%); }

section,
.menu-page,
.experience,
.bg-natural { position: relative; }

.bg-natural::before,
.experience::before,
.menu-page::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: min(280px, 32vw);
    height: min(280px, 32vw);
    opacity: .72;
    pointer-events: none;
    background-repeat: no-repeat;
    background-position: top right;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cpath d='M245 10C205 55 178 96 150 140C130 171 101 205 56 246' fill='none' stroke='%230F6B4F' stroke-opacity='.18' stroke-width='3'/%3E%3Cellipse cx='196' cy='72' rx='24' ry='11' transform='rotate(-39 196 72)' fill='%230F6B4F' fill-opacity='.12'/%3E%3Cellipse cx='165' cy='118' rx='22' ry='10' transform='rotate(35 165 118)' fill='%23567A45' fill-opacity='.11'/%3E%3Cellipse cx='126' cy='170' rx='24' ry='11' transform='rotate(-42 126 170)' fill='%230F6B4F' fill-opacity='.10'/%3E%3Cellipse cx='87' cy='213' rx='20' ry='9' transform='rotate(34 87 213)' fill='%237D8756' fill-opacity='.12'/%3E%3C/svg%3E");
}

.section-title,
.section-heading h2 { position: relative; }

.section-title::after,
.section-heading h2::after {
    content: "";
    display: block;
    width: 58px;
    height: 2px;
    margin: 16px auto 0;
    background: var(--warm-gold);
}

.about-grid img,
.story-image img,
.card img,
.menu-card img { border-radius: 22px; }

.feature,
.card,
.menu-card {
    background: rgba(255, 252, 247, .96);
    border: 1px solid rgba(184, 138, 74, .16);
    box-shadow: var(--shadow);
}

.feature-icon { background: #EEF2E6; color: var(--primary); }
.menu-card h3,
.card h3,
.feature h3 { color: var(--dark); }
.menu-card a,
.card a { color: var(--primary); }

.menu-toolbar input,
.menu-toolbar select {
    background: #FFFCF7;
    border-color: var(--border);
}

.menu-toolbar input:focus,
.menu-toolbar select:focus {
    outline: 2px solid rgba(15, 107, 79, .20);
    border-color: var(--primary);
}

.main-tabs button.active,
.sub-tabs button.active {
    background: var(--primary);
    border-color: var(--primary);
}

.cta {
    background: linear-gradient(135deg, #173B2E 0%, #0F6B4F 64%, #567A45 100%);
}

.cta h2,
.cta p,
footer .footer-heading,
footer p { color: rgba(255, 255, 255, .94); }

footer {
    background: #123428;
    border-top: 1px solid rgba(184, 138, 74, .22);
}

footer .footer-bottom { border-top-color: rgba(255, 255, 255, .10); }
.quote { border-color: rgba(184, 138, 74, .28); }

::selection {
    background: rgba(15, 107, 79, .18);
    color: var(--dark);
}

@media (max-width: 768px) {
    nav { background: #FFFCF7; }
    .bg-natural::before,
    .experience::before,
    .menu-page::before {
        width: 150px;
        height: 150px;
        opacity: .52;
    }
}

/* Shared component refinements */
.footer-heading {
    color: rgba(255, 255, 255, .94);
    font-size: 1.35rem;
    margin-bottom: 12px;
}
.footer-address {
    color: rgba(255, 255, 255, .84);
    font-style: normal;
    line-height: 1.8;
}
footer a:hover {
    color: #fff;
}
.empty-menu {
    grid-column: 1 / -1;
    text-align: center;
    padding: 48px 24px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}
.description {
    margin-bottom: 20px;
}