:root {
    --sage: #8BA888;
    --sage-dark: #6B8B68;
    --sage-deep: #5C7259;
    --terra: #C25E3A;
    --terra-dark: #A04E30;
    --cream: #FBF4EA;
    --cream-dark: #F0E6D6;
    --dark: #2C352B;
    --font-h: 'Outfit', sans-serif;
    --font-s: 'Playfair Display', serif;
    --font-b: 'Inter', sans-serif;
    --font-a: 'Caveat', cursive;
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:var(--font-b); color:var(--dark); background:var(--cream); line-height:1.6; overflow-x:hidden; }

/* NAV */
.navbar { position:fixed; top:0; width:100%; z-index:100; background:transparent; transition:.3s; }
.navbar.scrolled { background:rgba(251,244,234,.95); backdrop-filter:blur(8px); border-bottom:1px solid rgba(139,168,136,.12); }
.nav-container { max-width:1400px; margin:0 auto; padding:.8rem 3rem; display:flex; justify-content:space-between; align-items:center; }
.logo { text-decoration:none; color:var(--cream); display:flex; flex-direction:column; }
.navbar.scrolled .logo { color:var(--dark); }
.logo-main { font-family:var(--font-h); font-size:1.6rem; font-weight:600; line-height:1; }
.logo-main .k { font-size:1.8rem; }
.logo-sub { font-size:.6rem; text-transform:uppercase; letter-spacing:1.5px; color:rgba(255,255,255,.7); font-weight:600; }
.navbar.scrolled .logo-sub { color:var(--sage); }
.nav-overlay { display:flex; align-items:center; justify-content:flex-end; flex-grow:1; }
.nav-links { list-style:none; display:flex; align-items:center; gap:1.5rem; }
.nav-links a { text-decoration:none; color:var(--cream); font-family:var(--font-h); font-weight:500; font-size:.9rem; transition:.3s; }
.navbar.scrolled .nav-links a { color:var(--dark); }
.nav-links a:hover { color:var(--terra); }
.nav-cta { display:inline-block; background:var(--cream)!important; color:var(--dark)!important; padding:.5rem 1.4rem; border-radius:25px; font-size:.85rem!important; text-decoration:none; font-family:var(--font-h); font-weight:600; }
.navbar.scrolled .nav-cta { background:var(--terra)!important; color:var(--cream)!important; }
.nav-cta:hover { opacity:.9; }
.mobile-toggle { display:none; background:none; border:none; font-size:1.4rem; color:var(--cream); cursor:pointer; z-index:101; }
.navbar.scrolled .mobile-toggle { color:var(--dark); }
.mobile-top-cta { display:none; }
.nav-mobile-footer { display:none; }

/* HERO */
.hero { min-height:100vh; background:var(--sage); color:var(--cream); position:relative; overflow:hidden; }
.hero-inner { max-width:1400px; margin:0 auto; padding:8rem 3rem 3rem; display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center; min-height:100vh; }
.hero-text h1 { font-family:var(--font-s); font-size:3.5rem; font-weight:700; line-height:1.15; color:var(--cream); margin-bottom:1.5rem; }
.hero-text h1 span { display:block; }
.hero-text h1 .vibes { font-style:italic; color:var(--terra); }
.hero-text > p { color:rgba(255,255,255,.8); font-size:1rem; margin-bottom:2rem; line-height:1.8; }
.btn-cta { display:inline-block; background:var(--terra); color:var(--cream); padding:.85rem 2.2rem; border-radius:30px; text-decoration:none; font-family:var(--font-h); font-weight:600; transition:.3s; font-size:1rem; }
.btn-cta:hover { background:var(--terra-dark); transform:translateY(-2px); }
/* Cactus doodle */
.hero-doodle { position:absolute; top:8rem; left:3rem; width:40px; opacity:.4; }
.hero-doodle svg { width:100%; }

.hero-img { display:flex; justify-content:center; align-items:center; position:relative; }
.hero-arch { width:100%; max-width:450px; height:520px; border-radius:220px 220px 20px 20px; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.15); position:relative; }
.hero-arch img { width:100%; height:100%; object-fit:cover; }
.hero-arch-badge { position:absolute; top:2rem; left:50%; transform:translateX(-50%); font-family:var(--font-a); font-size:1.1rem; color:var(--cream); text-align:center; line-height:1.6; text-shadow:0 2px 8px rgba(0,0,0,.3); z-index:2; }

.hero-features { grid-column:1/-1; display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; margin-top:0; padding:2rem 3rem; background:rgba(255,255,255,.08); border-top:1px solid rgba(255,255,255,.15); }
.hf { text-align:center; padding:1rem; }
.hf i { font-size:1.4rem; color:var(--cream); margin-bottom:.6rem; display:block; opacity:.7; }
.hf h4 { font-family:var(--font-h); font-size:.95rem; font-weight:600; margin-bottom:.4rem; color:var(--cream); }
.hf p { font-size:.8rem; color:rgba(255,255,255,.65); line-height:1.5; }

/* TRIO CARDS */
.trio { display:grid; grid-template-columns:repeat(3,1fr); max-width:1200px; margin:4rem auto; gap:0; }
.trio-card { padding:3rem 2rem; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; }
.trio-card h3 { font-family:var(--font-s); font-size:1.6rem; margin-bottom:1rem; line-height:1.3; }
.trio-card p { font-size:.9rem; margin-bottom:1.5rem; line-height:1.7; opacity:.9; }
.card-terra { background:var(--terra); color:var(--cream); border-radius:20px 0 0 20px; }
.card-white { background:white; color:var(--dark); }
.card-sage { background:var(--sage); color:var(--cream); border-radius:0 20px 20px 0; }
.btn-sm { display:inline-block; padding:.5rem 1.4rem; border-radius:25px; text-decoration:none; font-family:var(--font-h); font-weight:600; font-size:.85rem; transition:.3s; background:rgba(255,255,255,.2); color:inherit; border:1px solid rgba(255,255,255,.4); }
.btn-sm:hover { background:rgba(255,255,255,.35); }
.btn-outline-sage { background:transparent; border:1px solid var(--sage); color:var(--sage); }
.btn-outline-sage:hover { background:var(--sage); color:var(--cream); }

.sig-list { display:flex; flex-direction:column; gap:.8rem; margin-bottom:1.5rem; width:100%; }
.sig-item { display:flex; align-items:center; gap:.8rem; text-align:left; }
.sig-item img { width:50px; height:50px; border-radius:12px; object-fit:cover; }
.sig-item div { display:flex; flex-direction:column; }
.sig-item strong { font-family:var(--font-h); font-size:.9rem; }
.sig-item span { font-size:.75rem; color:#999; }

/* MAP BANNER */
.map-banner { background:var(--sage-deep); color:var(--cream); text-align:center; padding:3rem 2rem; }
.map-banner h4 { font-family:var(--font-h); font-size:1.3rem; margin-bottom:.5rem; }
.map-banner p { font-size:.9rem; opacity:.9; margin-bottom:1.2rem; }

/* MENU */
.menu-section { padding:5rem 2rem; max-width:1200px; margin:0 auto; }
.menu-section > h2 { font-family:var(--font-s); font-size:2.5rem; text-align:center; margin-bottom:2rem; }
.menu-tabs { display:flex; justify-content:center; flex-wrap:wrap; gap:.7rem; margin-bottom:3rem; }
.mtab { background:transparent; border:1.5px solid var(--sage); color:var(--dark); padding:.5rem 1.3rem; border-radius:25px; font-family:var(--font-h); font-size:.85rem; cursor:pointer; transition:.3s; }
.mtab:hover, .mtab.active { background:var(--sage); color:var(--cream); border-color:var(--sage); }

.menu-panels { position:relative; }
.mpanel { display:none; background:var(--sage); color:var(--cream); padding:3rem 2.5rem; border-radius:20px; animation:fadeUp .4s ease; }
.mpanel.active { display:block; }
@keyframes fadeUp { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }

.panel-note { font-family:var(--font-a); font-size:1.2rem; text-align:center; margin-bottom:2rem; opacity:.9; }
.mgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1.5rem; }
.mi { padding-bottom:1rem; border-bottom:1px dashed rgba(255,255,255,.2); }
.mi h4 { font-family:var(--font-h); font-size:1.05rem; font-weight:600; display:flex; justify-content:space-between; align-items:baseline; margin-bottom:.3rem; }
.mi h4 span { font-weight:700; font-size:.95rem; white-space:nowrap; margin-left:.5rem; }
.mi p { font-size:.85rem; opacity:.85; }
.extras { margin-top:2rem; padding-top:1.2rem; border-top:1px solid rgba(255,255,255,.2); font-size:.85rem; font-style:italic; opacity:.85; }
.compose-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.5rem; }
.compose-grid h4 { font-family:var(--font-h); font-size:1rem; margin-bottom:.6rem; border-bottom:2px solid rgba(255,255,255,.2); padding-bottom:.4rem; }
.compose-grid .addon { font-size:.8rem; opacity:.7; margin-top:.5rem; }
.bakery-title, .smoothie-heading { font-family:var(--font-s); font-size:2rem; text-align:center; margin-bottom:1.5rem; }

/* Terracotta panels for drinks/smoothie */
#drinks, #smoothie { background:var(--terra); }

/* GALLERY */
.gallery-section { padding:4rem 2rem; max-width:1200px; margin:0 auto; }
.gallery-section > h2 { font-family:var(--font-s); font-size:2.2rem; text-align:center; margin-bottom:2rem; }
.gallery-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:1rem; }
.gi { border-radius:16px; overflow:hidden; aspect-ratio:1; }
.gi img { width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.gi:hover img { transform:scale(1.06); }
.gi-bottom img { object-position:left bottom; }
.gi-tall { grid-row:span 2; aspect-ratio:auto; }
.gi-wide { grid-column:span 2; aspect-ratio:auto; }

/* ABOUT */
.about-section { padding:5rem 2rem; background:var(--sage); color:var(--cream); }
.about-content { max-width:800px; margin:0 auto; text-align:center; }
.about-content h2 { font-family:var(--font-s); font-size:2.2rem; margin-bottom:2rem; font-style:italic; }
.about-content p { font-size:1rem; line-height:1.9; margin-bottom:1.5rem; opacity:.92; }

/* VISIT */
.visit-section { padding:5rem 2rem; max-width:1000px; margin:0 auto; text-align:center; }
.visit-section > h2 { font-family:var(--font-s); font-size:2.2rem; margin-bottom:2rem; }
.visit-top { display:flex; justify-content:center; gap:1rem; margin-bottom:2rem; flex-wrap:wrap; }
.visit-btn { display:inline-flex; align-items:center; gap:.5rem; padding:.7rem 1.5rem; border-radius:30px; text-decoration:none; font-family:var(--font-h); font-weight:600; font-size:.9rem; transition:.3s; background:var(--dark); color:var(--cream); }
.visit-btn:hover { transform:translateY(-2px); }
.visit-btn.whatsapp { background:#25D366; color:white; }

/* FOOTER */
.footer { background:var(--dark); color:var(--cream); padding:3rem 2rem 1.5rem; }
.footer-top { max-width:1200px; margin:0 auto; display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:2rem; margin-bottom:2rem; }
.ft-logo { font-family:var(--font-h); font-size:1.8rem; font-weight:600; margin-bottom:.3rem; }
.ft-logo .k { font-size:2rem; }
.ft-sub { font-size:.65rem; text-transform:uppercase; letter-spacing:1.5px; color:var(--sage); margin-bottom:.8rem; }
.ft-desc { font-size:.85rem; opacity:.7; line-height:1.6; }
.ft-col h5 { font-family:var(--font-h); font-size:.9rem; font-weight:600; margin-bottom:1rem; }
.ft-col p { font-size:.85rem; opacity:.75; line-height:1.7; }
.ft-col a { color:var(--cream); text-decoration:none; opacity:.75; transition:.3s; }
.ft-col a:hover { opacity:1; color:var(--terra); }
.social-links { display:flex; gap:.6rem; }
.social-links a { display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.1); color:var(--cream); text-decoration:none; transition:.3s; }
.social-links a:hover { background:var(--terra); }
.footer-bottom { text-align:center; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.1); font-size:.75rem; opacity:.5; }

/* RESPONSIVE */
@media(max-width:1024px) {
    .hero-inner { grid-template-columns:1fr; padding-top:6rem; }
    .hero-img { order:-1; }
    .hero-arch { max-width:350px; height:400px; }
    .hero-features { grid-template-columns:repeat(2,1fr); padding:2rem; }
    .trio { grid-template-columns:1fr; }
    .card-terra { border-radius:20px 20px 0 0; }
    .card-sage { border-radius:0 0 20px 20px; }
    .gallery-grid { grid-template-columns:repeat(2,1fr); }
    .gi-tall { grid-row:span 1; }
    .gi-wide { grid-column:span 1; }
    .footer-top { grid-template-columns:1fr 1fr; }
}
@media(max-width:768px) {
    .mobile-toggle { display:block; }
    .mobile-top-cta { display:block; position:absolute; left:50%; transform:translateX(-50%); z-index:101; }
    .mobile-top-cta .nav-cta { padding:.4rem 1.2rem; font-size:.8rem!important; }
    .desktop-cta-li { display:none; }
    .nav-overlay { position:fixed; top:0; left:0; width:100%; height:100vh; background:var(--sage); flex-direction:column; align-items:center; justify-content:center; padding:6rem 2rem 3rem; transform:translateY(-100%); transition:.4s ease-in-out; z-index:-1; }
    .nav-overlay.active { transform:translateY(0); }
    .nav-links { flex-direction:column; gap:2rem; width:100%; }
    .nav-links a { font-size:1.3rem; color:var(--cream)!important; position:relative; display:inline-block; }
    .nav-links a:hover { color:var(--cream); opacity:.8; }
    .nav-links a.active-link::after { content:''; position:absolute; bottom:-4px; left:0; width:100%; height:2px; background:var(--cream); }
    .nav-mobile-footer { display:block; width:100%; text-align:left; margin-top:auto; padding-top:2rem; }
    .nav-mobile-footer p { color:var(--cream); font-size:1.2rem; margin-bottom:.5rem; font-family:var(--font-h); font-weight:500; }
    .nav-mobile-footer a { color:var(--cream); font-size:1.1rem; text-decoration:none; font-family:var(--font-h); font-weight:600; border-bottom:1px solid rgba(255,255,255,.5); padding-bottom:.2rem; }
    .navbar.menu-open { background:var(--sage)!important; box-shadow:none!important; border-bottom:none!important; }
    .navbar.menu-open .logo { color:var(--cream)!important; }
    .navbar.menu-open .logo-sub { color:rgba(255,255,255,.7)!important; }
    .navbar.menu-open .mobile-toggle { color:var(--cream)!important; }
    .navbar.menu-open .nav-cta { background:var(--cream)!important; color:var(--dark)!important; }
    .nav-container { padding:.8rem 1.5rem; }
    .hero-inner { padding:6rem 1.5rem 2rem; gap:2rem; }
    .hero-text h1 { font-size:2.4rem; }
    .hero-arch { max-width:280px; height:340px; border-radius:140px 140px 16px 16px; }
    .hero-features { grid-template-columns:1fr 1fr; padding:1.5rem; }
    .hero-doodle { display:none; }
    .menu-tabs { gap:.4rem; }
    .mtab { font-size:.78rem; padding:.4rem 1rem; }
    .gallery-grid { grid-template-columns:1fr 1fr; }
    .footer-top { grid-template-columns:1fr; }
    .visit-top { flex-direction:column; align-items:center; }
}