/* ---------- tokens ---------- */
:root{
  --yellow:#FFC107;
  --yellow-deep:#E0A800;
  --ink:#111111;
  --ink-soft:#3a3a38;
  --ink-mute:#6d6c66;
  --paper:#F8F7F2;
  --paper-2:#F1EFE6;
  --line:#e2ded1;
  --white:#ffffff;
  --shadow:0 1px 2px rgba(17,17,17,.04), 0 12px 32px -12px rgba(17,17,17,.14);
  --maxw:1180px;
  --pad:clamp(20px,5vw,64px);
}
:root[data-theme="dark"]{
  --ink:#F4F2EC; --ink-soft:#d9d6cc; --ink-mute:#a6a29a;
  --paper:#131311; --paper-2:#1c1b18; --line:#33322c; --white:#1c1b18;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 12px 32px -12px rgba(0,0,0,.6);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#F4F2EC; --ink-soft:#d9d6cc; --ink-mute:#a6a29a;
    --paper:#131311; --paper-2:#1c1b18; --line:#33322c; --white:#1c1b18;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 12px 32px -12px rgba(0,0,0,.6);
  }
}

*{box-sizing:border-box}
:focus-visible{outline:2px solid var(--yellow); outline-offset:3px; border-radius:4px}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important; scroll-behavior:auto!important}}
body{
  background:var(--paper); color:var(--ink);
  font-family:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:16px; line-height:1.65; font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,h4{line-height:1.08; margin:0; font-weight:800; letter-spacing:-.02em}
p{margin:0 0 1em}
.wrap{max-width:var(--maxw); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad)}

/* ---------- header ---------- */
header{
  position:sticky; top:0; z-index:60;
  background:var(--paper);
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
}
.bar{display:flex; align-items:center; gap:22px; height:68px; max-width:var(--maxw); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad)}
.brand{display:flex; align-items:baseline; gap:7px; text-decoration:none; margin-right:auto; white-space:nowrap}
.brand .the{font-family:"Allura",cursive; font-size:26px; color:var(--yellow-deep); line-height:1; position:relative; top:2px}
.brand .bean{font-weight:800; font-size:19px; letter-spacing:.01em}
.brand .counter{font-weight:400; font-size:19px; letter-spacing:.16em}
.brand .counter b{font-weight:400; color:var(--yellow-deep)}
nav{display:flex; gap:26px; align-items:center}
nav a{
  text-decoration:none; font-size:12.5px; font-weight:600; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink-soft); padding:6px 0; border-bottom:2px solid transparent;
}
nav a:hover{color:var(--ink); border-bottom-color:var(--yellow)}
.call-btn{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  background:var(--ink); color:var(--paper); font-size:12.5px; font-weight:700;
  letter-spacing:.06em; padding:11px 18px; border-radius:100px; white-space:nowrap;
}
.call-btn:hover{background:var(--yellow); color:#111}
.menu-toggle{
  display:none; flex-direction:column; gap:4px; width:42px; height:42px;
  align-items:center; justify-content:center; background:transparent;
  border:1px solid var(--line); border-radius:12px; cursor:pointer; padding:0;
}
.menu-toggle span{display:block; width:18px; height:2px; background:var(--ink); border-radius:2px; transition:transform .2s ease, opacity .2s ease}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.mobilenav{background:var(--paper); border-bottom:1px solid var(--line); padding:6px var(--pad) 18px}
.mobilenav a{
  display:block; padding:14px 0; text-decoration:none; font-size:13.5px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink); border-bottom:1px solid var(--line);
}
.mobilenav a.mn-call{
  border-bottom:0; margin-top:14px; background:var(--yellow); color:#111;
  text-align:center; border-radius:100px; padding:15px; letter-spacing:.04em; font-weight:800;
}
@media (min-width:901px){ .mobilenav{display:none !important} }
@media (max-width:900px){
  nav{display:none}
  .call-btn{display:none}
  .menu-toggle{display:flex}
  .bar{height:60px; gap:14px}
}
@media (max-width:420px){
  .brand .the{font-size:22px}
  .brand .bean,.brand .counter{font-size:16px}
  .brand .counter{letter-spacing:.12em}
}

/* ---------- hero ---------- */
.hero{position:relative; min-height:min(86vh,760px); display:flex; align-items:flex-end; overflow:hidden; background:#1a1a18}
.hero img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.62}
.hero::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,10,9,.55) 0%, rgba(10,10,9,.15) 38%, rgba(10,10,9,.88) 100%)}
.hero-in{position:relative; z-index:2; width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--pad) clamp(44px,7vw,84px)}
.eyebrow{
  display:inline-flex; align-items:center; gap:10px; font-size:11.5px; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase; color:var(--yellow); margin-bottom:22px;
}
.eyebrow::before{content:""; width:34px; height:2px; background:var(--yellow)}
.hero h1{color:#fff; font-size:clamp(33px,8.4vw,88px); max-width:15ch; letter-spacing:-.035em; text-wrap:balance}
.hero h1 em{font-family:"Allura",cursive; font-style:normal; font-weight:400; color:var(--yellow); letter-spacing:0; font-size:1.02em}
.hero p.lede{color:rgba(255,255,255,.86); font-size:clamp(16px,2vw,19px); max-width:52ch; margin:22px 0 0; font-weight:300}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px}
.btn{
  display:inline-flex; align-items:center; gap:9px; text-decoration:none; border:0; cursor:pointer;
  font-family:inherit; font-size:13.5px; font-weight:700; letter-spacing:.05em;
  padding:15px 26px; border-radius:100px; transition:transform .15s ease, background .15s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-y{background:var(--yellow); color:#111}
.btn-y:hover{background:#ffd043}
.btn-ghost{background:transparent; color:#fff; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.42)}
.btn-ghost:hover{background:rgba(255,255,255,.1)}
.btn-ink{background:var(--ink); color:var(--paper)}
.btn-ink:hover{background:var(--yellow); color:#111}

/* ---------- facts strip ---------- */
.facts{background:var(--ink); color:#f4f2ec}
.facts-in{display:grid; grid-template-columns:repeat(3,1fr); max-width:var(--maxw); margin:0 auto; padding:0 var(--pad)}
.fact{padding:30px 26px 30px 0; border-right:1px solid rgba(255,255,255,.13)}
.fact:last-child{border-right:0}
.fact:not(:first-child){padding-left:26px}
.fact .k{font-family:"Allura",cursive; font-size:23px; color:var(--yellow); line-height:1; margin-bottom:8px}
.fact .v{font-size:15px; font-weight:500; line-height:1.45}
.fact .s{font-size:12.5px; color:rgba(244,242,236,.6); margin-top:3px}
@media (max-width:760px){
  .facts-in{grid-template-columns:1fr}
  .fact{border-right:0; border-bottom:1px solid rgba(255,255,255,.13); padding:22px 0}
  .fact:not(:first-child){padding-left:0}
  .fact:last-child{border-bottom:0}
}

/* ---------- sections ---------- */
section{padding:clamp(64px,9vw,118px) 0}
.sec-head{max-width:64ch; margin-bottom:clamp(36px,5vw,58px)}
.sec-head .eyebrow{color:var(--yellow-deep); margin-bottom:18px}
.sec-head .eyebrow::before{background:var(--yellow)}
h2{font-size:clamp(30px,4.6vw,50px); letter-spacing:-.03em}
h2 em{font-family:"Allura",cursive; font-style:normal; font-weight:400; color:var(--yellow-deep); letter-spacing:0; font-size:1.05em}
.sec-head p{color:var(--ink-mute); font-size:clamp(16px,1.6vw,18px); margin-top:18px; font-weight:300; line-height:1.7}
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,70px); align-items:center}
@media (max-width:860px){ .split{grid-template-columns:1fr} }
.split img{border-radius:18px; width:100%; aspect-ratio:4/3; object-fit:cover; box-shadow:var(--shadow)}
.split p{color:var(--ink-mute); font-weight:300; font-size:17px; line-height:1.75}

/* ---------- catering ---------- */
#catering{background:var(--paper-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-bottom:clamp(40px,6vw,64px)}
.step{background:var(--white); border:1px solid var(--line); border-radius:16px; padding:26px 24px; box-shadow:var(--shadow)}
.step .n{
  width:34px;height:34px;border-radius:50%;background:var(--yellow);color:#111;
  display:grid;place-items:center;font-weight:800;font-size:14px;margin-bottom:16px;
}
.step h3{font-size:17px; margin-bottom:8px}
.step p{font-size:14.5px; color:var(--ink-mute); margin:0; line-height:1.6}
@media (max-width:800px){ .steps{grid-template-columns:1fr} }

.menu-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(24px,3vw,40px); align-items:start}
@media (max-width:860px){ .menu-grid{grid-template-columns:1fr} }
.card{background:var(--white); border:1px solid var(--line); border-radius:18px; padding:clamp(24px,3vw,34px); box-shadow:var(--shadow)}
.card > h3{
  font-size:12px; font-weight:800; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink); padding-bottom:14px; border-bottom:2px solid var(--yellow);
  display:inline-block; margin-bottom:22px;
}
.row{display:flex; align-items:baseline; gap:12px; padding:11px 0; border-bottom:1px dashed var(--line)}
.row:last-child{border-bottom:0}
.row .nm{font-size:15px; font-weight:500; flex:0 1 auto; min-width:0}
.row .nm small{display:block; font-size:12.5px; font-weight:400; color:var(--ink-mute); letter-spacing:0; margin-top:2px; line-height:1.55}
.row .dots{flex:1; border-bottom:1px dotted var(--line); transform:translateY(-3px); min-width:14px}
.row .pr{font-size:15px; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap}
.note{font-size:13px; color:var(--ink-mute); margin-top:18px; line-height:1.6}
.serves{
  display:inline-block; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--yellow-deep); background:rgba(255,193,7,.16);
  padding:2px 8px; border-radius:100px; margin-left:6px; vertical-align:middle;
}
.flavors{font-size:13px; color:var(--ink-mute); line-height:1.85; margin-top:18px}
.flavors b{font-weight:600; color:var(--ink)}

/* ---------- order builder ---------- */
.order{
  margin-top:clamp(40px,6vw,64px); background:var(--ink); color:#f4f2ec;
  border-radius:20px; padding:clamp(28px,4vw,48px);
}
.order h3{font-size:clamp(22px,3vw,32px); color:#fff; letter-spacing:-.02em}
.order .sub{color:rgba(244,242,236,.6); font-size:14.5px; margin:10px 0 28px; max-width:58ch; font-weight:300}
.ob-grid{display:grid; grid-template-columns:1.3fr .95fr; gap:clamp(24px,3vw,44px); align-items:start}
@media (max-width:900px){ .ob-grid{grid-template-columns:1fr} }
.ob-cat{font-size:11px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--yellow); margin:22px 0 6px}
.ob-cat:first-child{margin-top:0}
.ob-row{display:flex; align-items:center; gap:14px; padding:9px 0; border-bottom:1px solid rgba(255,255,255,.09)}
.ob-row .l{flex:1; font-size:14.5px; line-height:1.35}
.ob-row .l small{display:block; color:rgba(244,242,236,.5); font-size:12px}
.ob-row .p{font-size:13.5px; color:rgba(244,242,236,.62); font-variant-numeric:tabular-nums; width:62px; text-align:right}
.qty{display:flex; align-items:center; background:rgba(255,255,255,.08); border-radius:100px; padding:3px}
.qty button{
  width:28px;height:28px;border:0;border-radius:50%;background:transparent;color:#f4f2ec;
  font-size:16px;font-family:inherit;cursor:pointer;line-height:1;display:grid;place-items:center;
}
.qty button:hover{background:var(--yellow); color:#111}
.qty input{
  width:34px;background:transparent;border:0;color:#fff;text-align:center;
  font-family:inherit;font-size:14px;font-weight:700;-moz-appearance:textfield;
}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

.summary{background:rgba(255,255,255,.06); border-radius:16px; padding:24px}
.summary h4{font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--yellow); margin-bottom:16px}
#sum-lines{font-size:13.5px; min-height:40px}
#sum-lines .sl{display:flex; justify-content:space-between; gap:12px; padding:5px 0; color:rgba(244,242,236,.85)}
#sum-lines .sl span:last-child{font-variant-numeric:tabular-nums; font-weight:600}
.empty{color:rgba(244,242,236,.42); font-style:italic; font-size:13px; margin:0}
.total{display:flex; justify-content:space-between; align-items:baseline; margin-top:16px; padding-top:16px; border-top:1px solid rgba(255,255,255,.15)}
.total .lab{font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:rgba(244,242,236,.6)}
.total .amt{font-size:28px; font-weight:800; color:var(--yellow); font-variant-numeric:tabular-nums}

.fields{margin-top:22px; padding-top:22px; border-top:1px solid rgba(255,255,255,.15)}
.f{margin-bottom:13px}
.f label{display:block; font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:rgba(244,242,236,.6); margin-bottom:6px}
.f label .req{color:var(--yellow)}
.f input,.f textarea{
  width:100%; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.15);
  border-radius:10px; padding:11px 13px; color:#f4f2ec; font-family:inherit; font-size:14px; line-height:1.5;
}
.f input::placeholder,.f textarea::placeholder{color:rgba(244,242,236,.32)}
.f input:focus,.f textarea:focus{outline:none; border-color:var(--yellow); background:rgba(255,255,255,.1)}
.f textarea{min-height:88px; resize:vertical}
.f input.bad{border-color:#e0674a}
.summary .btn{width:100%; justify-content:center; margin-top:6px}
.summary .tiny{font-size:11.5px; color:rgba(244,242,236,.45); margin:12px 0 0; line-height:1.55; text-align:center}
.form-msg{font-size:13px; margin:12px 0 0; padding:11px 13px; border-radius:10px; display:none; line-height:1.5}
.form-msg.show{display:block}
.form-msg.err{background:rgba(224,103,74,.16); color:#ffb9a5}
.form-msg.ok{background:rgba(255,193,7,.14); color:var(--yellow)}

/* ---------- gallery ---------- */
.gal{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,1.6vw,18px)}
.gal figure{margin:0}
.gal img{width:100%; aspect-ratio:3/2; object-fit:cover; border-radius:14px; box-shadow:var(--shadow)}
.gal figcaption{
  font-size:12px; color:var(--ink-mute); margin-top:10px;
  letter-spacing:.02em; line-height:1.5;
}
@media (max-width:760px){ .gal{grid-template-columns:1fr; gap:20px} }

/* ---------- about ---------- */
.pull{
  font-size:clamp(19px,2.4vw,25px); line-height:1.45; font-weight:300; color:var(--ink);
  border-left:3px solid var(--yellow); padding-left:22px; margin:26px 0;
}

/* ---------- visit ---------- */
#visit{background:var(--ink); color:#f4f2ec}
#visit h2{color:#fff}
#visit .sec-head .eyebrow{color:var(--yellow)}
#visit .sec-head p{color:rgba(244,242,236,.62)}
.visit-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,3vw,44px)}
@media (max-width:860px){ .visit-grid{grid-template-columns:1fr} }
.vcard h3{font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--yellow); margin-bottom:14px}
.vcard p{font-size:16px; line-height:1.7; color:rgba(244,242,236,.88); margin:0}
.vcard a{color:#fff; text-decoration:none; border-bottom:1px solid rgba(255,193,7,.5)}
.vcard a:hover{border-bottom-color:var(--yellow); color:var(--yellow)}
.hours-row{display:flex; justify-content:space-between; gap:16px; padding:7px 0; border-bottom:1px solid rgba(255,255,255,.09); font-size:15px}
.hours-row:last-child{border-bottom:0}
.hours-row .d{color:rgba(244,242,236,.65)}
.big-tel{font-size:clamp(24px,3.4vw,34px); font-weight:800; letter-spacing:-.02em; color:#fff; text-decoration:none; display:inline-block; border:0!important}
.big-tel:hover{color:var(--yellow)}

/* ---------- footer ---------- */
footer{background:#0b0b0a; color:rgba(244,242,236,.55); padding:44px 0; font-size:13px}
.foot{display:flex; flex-wrap:wrap; gap:18px; align-items:center; justify-content:space-between}
.foot a{color:rgba(244,242,236,.75); text-decoration:none}
.foot a:hover{color:var(--yellow)}
.foot .brand .bean,.foot .brand .counter{color:#f4f2ec}


/* ==========================================================
   PROMOS PAGE
   ========================================================== */
.page-head{background:var(--ink); color:#f4f2ec; padding:clamp(52px,7vw,86px) 0 clamp(56px,7vw,92px)}
.page-head h1{color:#fff; font-size:clamp(34px,5.6vw,62px); letter-spacing:-.03em; text-wrap:balance}
.page-head h1 em{font-family:"Allura",cursive; font-style:normal; font-weight:400; color:var(--yellow); letter-spacing:0; font-size:1.05em}
.page-head p{color:rgba(244,242,236,.66); font-size:clamp(16px,1.7vw,19px); max-width:56ch; margin:20px 0 0; font-weight:300}

.promo{
  display:grid; grid-template-columns:1.05fr .95fr; gap:0;
  background:var(--white); border:1px solid var(--line); border-radius:20px;
  overflow:hidden; box-shadow:var(--shadow); margin-bottom:clamp(26px,3.5vw,40px);
}
.promo.flip .promo-media{order:-1}
@media (max-width:840px){ .promo{grid-template-columns:1fr} .promo.flip .promo-media{order:0} }
.promo-body{padding:clamp(28px,3.6vw,46px); display:flex; flex-direction:column; justify-content:center}
.promo-media{position:relative; min-height:280px; background:var(--paper-2)}
.promo-media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
@media (max-width:840px){ .promo-media{min-height:0} .promo-media img{position:static; aspect-ratio:4/3} }

.pill{
  display:inline-flex; align-items:center; gap:8px; align-self:flex-start;
  font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  padding:7px 14px; border-radius:100px; margin-bottom:20px;
}
.pill::before{content:""; width:7px; height:7px; border-radius:50%; background:currentColor}
.pill.live{background:rgba(255,193,7,.18); color:var(--yellow-deep)}
.pill.soon{background:rgba(17,17,17,.07); color:var(--ink-soft)}
.pill.done{background:rgba(17,17,17,.07); color:var(--ink-mute)}
:root[data-theme="dark"] .pill.soon,:root[data-theme="dark"] .pill.done{background:rgba(255,255,255,.09)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pill.soon,:root:not([data-theme="light"]) .pill.done{background:rgba(255,255,255,.09)}}

.promo h2{font-size:clamp(26px,3.6vw,42px); letter-spacing:-.03em; text-wrap:balance}
.promo h2 em{font-family:"Allura",cursive; font-style:normal; font-weight:400; color:var(--yellow-deep); letter-spacing:0; font-size:1.06em}
.promo .detail{color:var(--ink-mute); font-size:17px; font-weight:300; line-height:1.7; margin:18px 0 0}
.promo .when{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  margin-top:24px; padding-top:20px; border-top:1px solid var(--line);
  font-size:14px; color:var(--ink-mute);
}
.promo .when b{font-weight:700; color:var(--ink); font-size:15px}
.promo .cta{display:flex; flex-wrap:wrap; gap:11px; margin-top:26px}
.fineprint{font-size:12.5px; color:var(--ink-mute); margin:16px 0 0; line-height:1.6}
.promo.expired .promo-media img{filter:grayscale(1); opacity:.5}
.promo.expired h2{color:var(--ink-mute)}

.values{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:clamp(20px,3vw,40px); margin-top:clamp(20px,3vw,36px)}
@media (max-width:800px){ .values{grid-template-columns:1fr; gap:26px} }
.value{border-top:2px solid var(--yellow); padding-top:20px}
.value h3{font-size:17px; margin-bottom:8px; letter-spacing:-.01em}
.value p{font-size:14.5px; color:var(--ink-mute); margin:0; line-height:1.6; font-weight:300}

.promo-empty{
  border:1px dashed var(--line); border-radius:18px; padding:clamp(28px,4vw,44px);
  text-align:center; color:var(--ink-mute);
}