:root { --ink:#171713; --cream:#f4eddf; --paper:#fffaf0; --yellow:#f5b920; --red:#df3e28; --green:#265c43; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
[id] { scroll-margin-top:90px; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--font-body), Arial, sans-serif; }
a { color:inherit; text-decoration:none; }
.site-header { height:76px; display:flex; align-items:center; justify-content:space-between; padding:0 max(5vw,24px); position:sticky; top:0; background:rgba(255,250,240,.96); backdrop-filter:blur(12px); z-index:20; border-bottom:1px solid rgba(23,23,19,.12); }
.brand { display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:-.5px; }
.brand strong { color:var(--red); }
.brand-mark { width:36px; height:36px; display:grid; place-items:center; background:var(--yellow); border:2px solid var(--ink); border-radius:50% 45% 52% 46%; font-family:var(--font-display); font-size:23px; transform:rotate(-5deg); }
nav { display:flex; align-items:center; gap:28px; font-size:13px; font-weight:700; }
nav a:hover { color:var(--red); }
.nav-order { background:var(--ink); color:white; padding:12px 18px; border-radius:4px; }
.nav-order:hover { background:var(--red); color:white; }
.menu-toggle { display:none; background:none; border:0; font-size:26px; }
.hero { min-height:calc(100vh - 76px); display:grid; grid-template-columns:1.04fr .96fr; background:var(--cream); overflow:hidden; }
.hero-copy { padding:clamp(70px,9vw,130px) 5vw 50px; position:relative; z-index:2; }
.eyebrow { font-size:12px; font-weight:900; letter-spacing:2.2px; color:var(--red); margin:0 0 20px; }
h1,h2 { font-family:var(--font-display), Impact, sans-serif; text-transform:uppercase; font-weight:400; letter-spacing:.4px; line-height:.95; margin:0; }
h1 { font-size:clamp(64px,7.6vw,118px); max-width:800px; }
h1 em,.promos em { font-style:normal; color:var(--red); }
.hero-text { max-width:580px; font-size:clamp(16px,1.4vw,20px); line-height:1.7; margin:28px 0; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; }
.button { padding:15px 21px; border:2px solid var(--ink); border-radius:3px; font-weight:900; font-size:13px; display:inline-flex; gap:20px; align-items:center; transition:.2s; }
.button:hover { transform:translateY(-2px); }
.primary { background:var(--yellow); }
.secondary { background:transparent; }
.dark { background:var(--ink); color:white; border-color:var(--ink); }
.hero-details { display:flex; gap:28px; margin-top:44px; font-size:11px; font-weight:800; text-transform:uppercase; }
.hero-details span:first-child { color:var(--green); }
.hero-visual { background:var(--yellow); display:grid; place-items:center; position:relative; padding:70px 35px 30px; border-left:2px solid var(--ink); }
.hero-visual::before { content:"FRESH • HOT • LOCAL •"; position:absolute; width:420px; height:420px; border:1px solid rgba(23,23,19,.18); border-radius:50%; display:grid; place-items:start center; padding-top:15px; letter-spacing:8px; font-size:10px; }
.badge { position:absolute; left:6%; top:8%; width:135px; height:135px; border-radius:50%; background:var(--red); color:white; display:flex; flex-direction:column; justify-content:center; align-items:center; font-size:12px; font-weight:900; line-height:1; transform:rotate(-8deg); z-index:3; border:2px solid var(--ink); }
.badge strong { font-family:var(--font-display); font-size:44px; font-weight:400; }
.badge small { font-size:7px; max-width:80px; text-align:center; line-height:1.3; margin-top:4px; }
.hero-visual>p { position:absolute; bottom:25px; font-size:10px; font-weight:800; text-transform:uppercase; }
.burger-art { width:min(86%,520px); filter:drop-shadow(0 22px 13px rgba(82,47,13,.25)); transform:rotate(-3deg); z-index:1; }
.burger-art>div { margin:auto; }
.bun { background:linear-gradient(#f2a836,#c7751f); width:90%; border:2px solid #5d3518; color:#fff3c9; text-align:center; font-size:35px; font-weight:bold; letter-spacing:32px; overflow:hidden; }
.bun.top { height:135px; border-radius:150px 150px 35px 35px; padding-top:40px; }
.bun.bottom { height:60px; border-radius:18px 18px 55px 55px; }
.lettuce { width:100%; height:28px; background:#3f8239; border-radius:45% 30% 50% 35%; border:2px solid #285629; }
.cheese { width:93%; height:32px; background:#f8c31c; clip-path:polygon(0 0,45% 8%,55% 100%,68% 10%,100% 0,96% 70%,3% 80%); }
.patty { width:96%; height:68px; border-radius:32px; background:repeating-linear-gradient(10deg,#5b2d18 0,#5b2d18 8px,#402012 9px,#402012 12px); border:2px solid #2f1a10; }
.tomato { width:88%; height:22px; border-radius:12px; background:#d83c29; border:2px solid #9f2519; }
.menu-section { padding:110px 5vw; }
.section-heading { display:flex; justify-content:space-between; align-items:end; margin-bottom:60px; gap:30px; }
.section-heading h2,.visit h2 { font-size:clamp(46px,6vw,84px); }
.section-heading>p { max-width:420px; color:#6b675f; line-height:1.6; font-size:14px; }
.menu-group { margin-top:44px; }
.menu-group>h3 { font-size:12px; text-transform:uppercase; letter-spacing:2px; padding-bottom:12px; border-bottom:2px solid var(--ink); }
.menu-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.menu-card { border:1px solid #ded6c8; padding:24px; display:flex; gap:17px; background:white; min-height:205px; transition:.2s; }
.menu-card:hover { transform:translateY(-4px); box-shadow:0 12px 30px rgba(23,23,19,.08); }
.item-icon { font-size:30px; }
.item-copy { flex:1; display:flex; flex-direction:column; }
.item-title { display:flex; justify-content:space-between; gap:12px; align-items:start; }
.item-title h4 { font-size:18px; margin:3px 0 12px; }
.item-title strong { color:var(--red); font-size:18px; }
.item-copy p { color:#6b675f; font-size:13px; line-height:1.55; margin:0 0 18px; }
.item-order { margin-top:auto; min-height:44px; display:inline-flex; align-items:center; font-size:11px; text-transform:uppercase; font-weight:900; color:var(--green); }
.promos { display:grid; grid-template-columns:2fr 1fr; margin:0 5vw 110px; border:2px solid var(--ink); }
.promo-main { background:var(--yellow); padding:clamp(42px,6vw,80px); position:relative; }
.promo-main h2 { font-size:clamp(48px,6vw,90px); }
.promo-main>p:not(.eyebrow) { max-width:520px; line-height:1.6; }
.promo-price { position:absolute; right:8%; bottom:14%; transform:rotate(-5deg); display:flex; flex-direction:column; }
.promo-price span { font-size:11px; font-weight:900; }
.promo-price strong { font-family:var(--font-display); font-size:62px; }
.promo-side { background:var(--green); color:white; padding:55px 40px; display:flex; flex-direction:column; justify-content:center; }
.promo-side>span { align-self:start; background:var(--red); padding:7px 10px; font-size:10px; font-weight:900; transform:rotate(4deg); }
.promo-side h3 { font-family:var(--font-display); text-transform:uppercase; font-size:42px; font-weight:400; line-height:1; margin:25px 0 10px; }
.promo-side p { line-height:1.7; font-size:14px; }
.promo-side small { opacity:.65; margin-top:30px; line-height:1.5; }
.visit { background:var(--ink); color:white; padding:100px 5vw; display:grid; grid-template-columns:1fr 1fr; gap:9vw; }
.visit .eyebrow { color:var(--yellow); }
.visit-intro>p:last-child { color:#bcb7ad; line-height:1.7; max-width:440px; }
.visit-card { border-top:1px solid #55544e; }
.visit-card>div { display:flex; gap:18px; border-bottom:1px solid #55544e; padding:24px 0; }
.visit-card>div>span { font-size:22px; }
.visit-card h3 { margin:0 0 8px; font-size:12px; text-transform:uppercase; letter-spacing:1.5px; color:var(--yellow); }
.visit-card p { margin:0; color:#cfcbc2; line-height:1.7; font-size:13px; }
footer { min-height:110px; padding:25px 5vw; display:flex; align-items:center; justify-content:space-between; gap:20px; background:#0c0c0a; color:#aaa; border-top:1px solid #2d2d28; font-size:11px; }
.footer-brand { color:white; }
.whatsapp-float { position:fixed; z-index:30; bottom:22px; right:22px; min-width:48px; min-height:48px; display:flex; align-items:center; justify-content:center; gap:7px; background:#25d366; color:#0a3b1c; padding:12px 16px; border-radius:99px; font-weight:900; box-shadow:0 8px 25px rgba(0,0,0,.22); }

@media (max-width:900px) {
  .hero { grid-template-columns:1fr; }
  .hero-visual { min-height:520px; border-left:0; border-top:2px solid var(--ink); }
  .menu-grid { grid-template-columns:1fr 1fr; }
  .promos { grid-template-columns:minmax(0,1fr); }
  .promo-main,.promo-side { min-width:0; }
  .promo-price { position:static; margin:20px 0; }
  .visit { grid-template-columns:1fr; }
}
@media (max-width:650px) {
  .site-header { height:66px; }
  .menu-toggle { display:block; cursor:pointer; }
  nav { display:none; position:absolute; top:66px; left:0; right:0; padding:12px 22px 22px; background:var(--paper); flex-direction:column; align-items:stretch; gap:4px; border-bottom:2px solid var(--ink); }
  nav.open { display:flex; }
  nav a { min-height:44px; display:flex; align-items:center; padding:0 2px; }
  nav .nav-order { justify-content:center; margin-top:6px; padding:12px 18px; }
  .hero { min-height:auto; }
  .hero-copy { padding:65px 22px 45px; }
  h1 { font-size:58px; }
  .hero-actions .button { width:100%; justify-content:space-between; }
  .hero-details { flex-direction:column; gap:10px; margin-top:30px; }
  .hero-visual { min-height:420px; padding-inline:15px; }
  .hero-visual::before { width:320px; height:320px; }
  .badge { width:110px; height:110px; left:3%; top:4%; }
  .badge strong { font-size:36px; }
  .bun.top { height:100px; }
  .menu-section { padding:75px 20px; }
  .section-heading { display:block; margin-bottom:38px; }
  .section-heading>p { margin-top:20px; }
  .menu-grid { grid-template-columns:1fr; }
  .menu-card { min-height:185px; padding:20px; }
  .item-copy p { font-size:14px; }
  .promos { margin:0 20px 75px; }
  .promo-main,.promo-side { padding:40px 26px; }
  .promo-main h2 { font-size:clamp(32px,10.5vw,49px); overflow-wrap:normal; }
  .visit { padding:75px 22px; }
  footer { flex-direction:column; align-items:flex-start; padding:35px 22px 90px; }
  .whatsapp-float span { display:none; }
}
@media (prefers-reduced-motion:reduce) { html{scroll-behavior:auto} *{transition:none!important} }