:root{
  --bg:#050508;
  --glass: rgba(12,12,18,.72);
  --glass2: rgba(10,10,14,.55);
  --line: rgba(255,255,255,.08);
  --text:#f6f6f8;
  --muted: rgba(246,246,248,.72);
  --gold:#f4c66d;
  --gold2:#ffdf9a;
  --red:#ff4d5a;
  --shadow: 0 24px 80px rgba(0,0,0,.65);
  --r: 22px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 15% 0, rgba(244,198,109,.10), transparent 55%),
    radial-gradient(circle at 85% 100%, rgba(255,77,90,.10), transparent 55%),
    radial-gradient(circle at top, #1c1e2a 0, #050508 45%, #000 100%);
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
.container{width:min(1120px, 100%); margin:0 auto; padding:0 18px}

/* NAV */
.nav{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(10px);
  background: linear-gradient(to bottom, rgba(5,5,10,.92), rgba(5,5,10,.55));
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 0; gap:14px;
}
.brand{display:flex; align-items:center; gap:12px; min-width:160px;}
.brand-mark{
  width:44px;height:44px;border-radius:14px;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.18), rgba(244,198,109,.12)),
              rgba(10,10,14,.55);
  border:1px solid rgba(244,198,109,.35);
  box-shadow: 0 10px 30px rgba(0,0,0,.55);
  display:grid;place-items:center;
}
.brand-mark svg{width:26px;height:26px; fill: var(--gold)}
.brand-name{
  font-family:"Playfair Display","Times New Roman",serif;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:18px;
  color:#fce3b0;
}
.nav-links{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  border-radius:999px;
  background: rgba(10,10,14,.35);
  border:1px solid rgba(255,255,255,.06);
}
.nav-links a{
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color: rgba(246,246,248,.70);
  padding:8px 10px;
  border-radius:999px;
}
.nav-links a:hover{color:var(--text); background: rgba(255,255,255,.06);}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 16px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(10,10,14,.30);
  color:var(--text);
  font-weight:600;
  box-shadow: 0 16px 50px rgba(0,0,0,.45);
  transition: transform .15s ease, filter .15s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-1px); filter:brightness(1.05);}
.btn-primary{
  color:#1a1207;
  border:2px solid rgba(244,198,109,.55);
  background: linear-gradient(90deg, var(--gold), var(--gold2));
}
.btn-ghost{border:1px solid rgba(244,198,109,.25); color: rgba(246,246,248,.86);}

/* HERO */
.hero{padding: 18px 0 10px;}
.hero-wrap{
  position:relative;
  border-radius:28px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow);
  min-height: 560px;
  background:
    radial-gradient(circle at 20% 10%, rgba(244,198,109,.18), transparent 55%),
    radial-gradient(circle at 85% 90%, rgba(255,77,90,.14), transparent 55%),
    #050508;
}
.hero-bg{
  position:absolute; inset:0;
  background:
    linear-gradient(120deg, rgba(0,0,0,.76), rgba(0,0,0,.28)),
    url('/img/bg/coffee-beans-dark.jpg') center/cover no-repeat;
  transform: scale(1.06);
  filter: contrast(1.05) saturate(1.05);
}
.hero-grid{
  position:relative; z-index:1;
  display:grid;
  grid-template-columns: 1.2fr .9fr;
  gap: 18px;
  padding: 22px;
}
.kicker{
  display:inline-flex; align-items:center; gap:10px;
  padding: 10px 12px;
  border-radius:999px;
  background: rgba(10,10,14,.45);
  border:1px solid rgba(255,255,255,.08);
  color: rgba(246,246,248,.75);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.kicker .dot{width:10px;height:10px;border-radius:999px;
  background: radial-gradient(circle at 30% 20%, #fff, var(--gold) 55%, #a76a22 100%);
}
.h1{
  margin: 16px 0 10px;
  font-family:"Playfair Display","Times New Roman",serif;
  font-weight:700;
  letter-spacing:.02em;
  font-size:52px;
  line-height:1.02;
}
.h1 .thin{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:.30em;
  display:block;
  margin-top:10px;
  color: rgba(246,246,248,.78);
}
.lead{margin:0;color: rgba(246,246,248,.78);line-height:1.7;font-size:15px;max-width:60ch;}
.pill{
  margin-top: 14px;
  display:inline-flex; align-items:center;
  padding: 8px 12px;
  border-radius:999px;
  border:1px solid rgba(244,198,109,.55);
  background: linear-gradient(to right, rgba(244,198,109,.14), rgba(6,6,10,.70));
  color: var(--gold);
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:12px;
}
.hero-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px;}

/* CARDS */
.card{
  border-radius: 22px;
  border:1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(10,10,14,.62), rgba(10,10,14,.34));
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
  overflow:hidden;
}
.card-pad{padding:16px;}
.card-title{
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color: var(--gold);
  font-weight:700;
}
.card-text{margin-top:8px;color: rgba(246,246,248,.74);line-height:1.6;font-size:13px;}

/* SECTIONS */
.section{padding: 18px 0 10px;}
.section-title{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:14px; flex-wrap:wrap;
  margin: 14px 0 10px;
}
.section-title h2{
  margin:0;
  font-family:"Playfair Display","Times New Roman",serif;
  font-size:30px;
}
.section-title p{margin:0;max-width:60ch;color: rgba(246,246,248,.68);line-height:1.6;font-size:13px;}

.grid-2{display:grid; grid-template-columns: 1.05fr .95fr; gap:12px;}
.grid-3{display:grid; grid-template-columns: repeat(3, 1fr); gap:12px;}
@media (max-width: 900px){
  .hero-grid{grid-template-columns:1fr; padding:18px;}
  .nav-links{display:none;}
  .grid-2,.grid-3{grid-template-columns:1fr;}
}
.media{
  height: 320px;
  border-radius: 22px;
  border:1px solid rgba(255,255,255,.08);
  background-size: cover;
  background-position: center;
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
}
@media (max-width: 480px){
  .h1{font-size:40px;}
  .media{height:260px;}
}

/* MENU CARDS (like slider) */
.menu-row{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
}
.menu-card{
  padding: 14px;
}
.menu-img{
  height: 180px;
  border-radius: 18px;
  background-size: cover;
  background-position: center;
  border:1px solid rgba(255,255,255,.08);
}
.menu-name{
  margin-top:10px;
  font-weight:700;
  letter-spacing:.06em;
}
.menu-price{
  margin-top:6px;
  color: rgba(246,246,248,.72);
  font-size:13px;
}
@media (max-width: 900px){
  .menu-row{grid-template-columns: 1fr;}
  .menu-img{height:190px;}
}

/* REVIEWS */
.review{
  padding: 16px;
}
.review-top{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.stars{color: var(--gold); letter-spacing:.1em;}
.small{color: rgba(246,246,248,.65); font-size:12px;}
.quote{margin-top:10px; line-height:1.65; color: rgba(246,246,248,.78); font-size:13px;}

/* CONTACTS */
.contact-row{display:grid; grid-template-columns: 1fr 1fr; gap:12px;}
@media (max-width: 900px){ .contact-row{grid-template-columns:1fr;} }

.footer{
  margin-top: 18px;
  padding: 18px 0 28px;
  border-top:1px solid rgba(255,255,255,.06);
  color: rgba(246,246,248,.65);
  font-size:13px;
}

/* === header logo image === */
.brand-logo{
  width: 28px;
  height: 28px;
  display:block;
  object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.45));
}

/* === BRAND LOGO FIX === */
.brand-mark {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.brand-logo {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

/* mobile */
@media (max-width: 640px) {
  .brand-mark {
    width: 36px;
    height: 36px;
  }
  .brand-logo {
    width: 24px;
    height: 24px;
  }
}

/* logo size tweak */
.brand-mark{width:44px;height:44px}
.brand-logo{width:80%;height:80%}