:root{
  --green:#006b2d;
  --green-dark:#002d17;
  --green-soft:#e9f7df;
  --lime:#b9ff48;
  --cream:#fff9e9;
  --yellow:#ffbd2e;
  --orange:#f3841f;
  --black:#080b08;
  --white:#ffffff;
  --text:#142016;
  --muted:#687264;
  --radius:28px;
  --shadow:0 28px 90px rgba(0,45,23,.18);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:'Poppins', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  background:var(--cream);
  color:var(--text);
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
.container{ width:min(1180px, calc(100% - 36px)); margin:auto; }

.top-line{
  background:var(--green-dark);
  color:#efffe8;
  padding:10px 0;
  font-size:13px;
  font-weight:600;
  letter-spacing:.2px;
}
.top-line .container{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}

/* The status strip and the navbar stick to the top of the viewport as one
   block, so the live open/closed strip stays visible at every scroll position.
   Pure CSS — no measurement involved. */
.site-header{
  position:sticky;
  top:0;
  z-index:200;
}
.navbar{
  background:rgba(255,249,233,.86);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(0,107,45,.12);
}
.nav-inner{
  min-height:86px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.logo-wrap img{ width:156px; height:auto; }
.nav-links{
  display:flex;
  gap:28px;
  align-items:center;
  font-size:14px;
  font-weight:800;
  color:var(--green-dark);
  text-transform:uppercase;
  letter-spacing:.8px;
}
.nav-links a{ opacity:.75; transition:.25s ease; }
.nav-links a:hover{ opacity:1; color:var(--green); }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border-radius:999px;
  padding:15px 25px;
  font-size:15px;
  font-weight:900;
  line-height:1;
  transition:.25s ease;
  white-space:nowrap;
  border:0;
  cursor:pointer;
}
.btn-primary{
  background:linear-gradient(135deg, var(--green), var(--green-dark));
  color:#fff;
  box-shadow:0 18px 38px rgba(0,107,45,.26);
}
.btn-primary:hover{ transform:translateY(-3px); box-shadow:0 24px 54px rgba(0,107,45,.34); }
.btn-light{
  background:rgba(255,255,255,.92);
  color:var(--green-dark);
  border:1px solid rgba(255,255,255,.55);
}
.btn-light:hover{ transform:translateY(-3px); background:#fff; }

/* FULL BANNER HERO IMAGE */
.hero{
  position:relative;
  /* Fill the viewport below the sticky header, so the whole hero — logo card
     through to the order button and the info pills — is visible without
     scrolling. svh keeps it stable when mobile browser chrome hides/shows. */
  min-height:calc(100vh - var(--header-height, 145px));
  min-height:calc(100svh - var(--header-height, 145px));
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(16px, 3vh, 46px) 0 0;
  overflow:hidden;
  background:
    linear-gradient(90deg, rgba(0,29,15,.88) 0%, rgba(0,45,23,.72) 38%, rgba(0,0,0,.18) 100%),
    url('burger-saucy.jpg') center center / cover no-repeat;
  isolation:isolate;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 18% 50%, rgba(185,255,72,.22), transparent 28rem),
    radial-gradient(circle at 80% 18%, rgba(255,189,46,.18), transparent 22rem);
  z-index:-1;
}
.hero::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px;
  height:160px;
  background:linear-gradient(0deg, var(--cream), transparent);
  pointer-events:none;
}
.hero > .container{
  flex:1 1 auto;
  display:flex;
  align-items:center;
}
.hero-content{
  position:relative;
  z-index:2;
  max-width:720px;
  color:#fff;
}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:10px 15px;
  background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  backdrop-filter:blur(10px);
  color:#f3ffe7;
  font-size:13px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:1px;
  margin-bottom:clamp(10px, 1.8vh, 20px);
}
.dot{
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--lime);
  box-shadow:0 0 0 6px rgba(185,255,72,.18);
}
h1{
  font-size:clamp(40px, min(7.4vw, 9.2vh), 108px);
  line-height:.93;
  letter-spacing:-4px;
  font-weight:900;
  max-width:850px;
  text-transform:uppercase;
}
h1 span{
  color:var(--yellow);
  text-shadow:0 16px 40px rgba(0,0,0,.24);
}
.hero-content p{
  max-width:650px;
  color:rgba(255,255,255,.86);
  font-size:clamp(15px, 2.2vh, 18px);
  line-height:1.65;
  font-weight:500;
  margin:clamp(14px, 2.4vh, 26px) 0 clamp(18px, 3vh, 32px);
}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  align-items:center;
}
/* In normal flow at the foot of the hero, not absolutely positioned — that way
   it can never end up on top of the order button on a short window. */
.hero-banner-info{
  position:relative;
  z-index:4;
  flex:0 0 auto;
  width:min(1180px, calc(100% - 36px));
  margin:clamp(10px, 1.8vh, 22px) auto clamp(14px, 2.4vh, 30px);
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
.banner-pill{
  border-radius:22px;
  padding:clamp(12px, 1.8vh, 18px) clamp(14px, 2vh, 20px);
  background:rgba(255,255,255,.9);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 18px 50px rgba(0,0,0,.12);
  backdrop-filter:blur(10px);
}
.banner-pill strong{ display:block; color:var(--green-dark); font-size:clamp(17px, 2.7vh, 22px); line-height:1.05; }
.banner-pill span{ color:var(--muted); font-size:13px; font-weight:700; }

.brand-strip{
  position:relative;
  padding:18px 0;
  background:var(--green-dark);
  color:#fff;
  overflow:hidden;
}
.marquee{
  display:flex;
  gap:34px;
  width:max-content;
  animation:marquee 24s linear infinite;
  font-weight:900;
  letter-spacing:1.8px;
  text-transform:uppercase;
  font-size:14px;
}
.marquee span{ display:flex; gap:34px; }
.marquee b{ color:var(--yellow); }
@keyframes marquee{ to{ transform:translateX(-50%); } }

section{ padding:86px 0; }
.section-title{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:34px;
}
.section-title h2{
  font-size:clamp(36px, 5vw, 68px);
  line-height:1;
  color:var(--green-dark);
  letter-spacing:-2.5px;
  max-width:720px;
  font-weight:900;
}
.section-title p{ max-width:440px; color:var(--muted); line-height:1.75; font-size:16px; font-weight:500; }

.bento{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:20px;
}
.bento-right{ display:grid; gap:20px; }
.food-card{
  position:relative;
  min-height:380px;
  border-radius:var(--radius);
  overflow:hidden;
  background:#fff;
  box-shadow:var(--shadow);
  border:1px solid rgba(0,107,45,.09);
}
.food-card.small{ min-height:240px; }
.food-card img{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .65s ease;
}
.food-card:hover img{ transform:scale(1.07); }
.food-card::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 35%, rgba(0,0,0,.82));
}
.food-card-content{
  position:absolute;
  left:24px; right:24px; bottom:22px;
  z-index:1;
  color:#fff;
}
.tag{
  display:inline-block;
  background:rgba(255,189,46,.96);
  color:var(--green-dark);
  border-radius:999px;
  padding:7px 12px;
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.8px;
  margin-bottom:10px;
}
.food-card h3{ font-size:29px; line-height:1.05; margin-bottom:8px; font-weight:900; }
.food-card p{ color:rgba(255,255,255,.84); line-height:1.5; font-weight:500; }

.about-wrap{
  display:grid;
  grid-template-columns:.95fr 1.05fr;
  gap:0;
  align-items:stretch;
  background:var(--green-dark);
  color:#fff;
  border-radius:42px;
  overflow:hidden;
  box-shadow:var(--shadow);
}
.about-image{ min-height:500px; }
.about-image img{ width:100%; height:100%; object-fit:cover; }
.about-content{ padding:56px; }
.about-content h2{
  font-size:clamp(36px, 5vw, 66px);
  line-height:1;
  margin-bottom:20px;
  font-weight:900;
  letter-spacing:-2px;
  color:#fff;
}
.about-content p{ color:#e4f4de; line-height:1.8; font-size:17px; margin-bottom:24px; }
.check-list{ display:grid; gap:14px; margin:28px 0; }
.check-list div{ display:flex; gap:12px; align-items:center; color:#fff; font-weight:700; }
.check-list div::before{
  content:"✓";
  display:grid;
  place-items:center;
  width:28px; height:28px;
  background:var(--yellow);
  color:var(--green-dark);
  border-radius:50%;
  font-weight:900;
  flex:0 0 auto;
}

.steps{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
}
.step-card{
  position:relative;
  background:#fff;
  border:1px solid rgba(0,107,45,.1);
  border-radius:30px;
  padding:30px;
  box-shadow:0 18px 50px rgba(0,47,24,.08);
  overflow:hidden;
}
.step-card::after{
  content:"";
  position:absolute;
  width:100px; height:100px;
  right:-40px; top:-40px;
  background:var(--green-soft);
  border-radius:50%;
}
.step-card .num{
  width:50px; height:50px;
  display:grid; place-items:center;
  border-radius:18px;
  background:var(--green);
  color:#fff;
  font-weight:900;
  margin-bottom:26px;
  position:relative;
  z-index:1;
}
.step-card h3{ font-size:23px; margin-bottom:10px; color:var(--green-dark); font-weight:900; position:relative; z-index:1; }
.step-card p{ color:var(--muted); line-height:1.7; font-weight:500; position:relative; z-index:1; }

.contact-card{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  background:#fff;
  border-radius:42px;
  padding:20px;
  box-shadow:var(--shadow);
  border:1px solid rgba(0,107,45,.1);
}
.contact-details{
  padding:40px;
  background:linear-gradient(145deg, var(--green-dark), var(--green));
  color:#fff;
  border-radius:30px;
  min-height:430px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.contact-details h2{
  font-size:clamp(36px, 5vw, 62px);
  line-height:1;
  margin-bottom:20px;
  font-weight:900;
  letter-spacing:-2px;
}
.contact-row{ margin-top:18px; }
.contact-row small{ display:block; color:#bde2ba; text-transform:uppercase; font-weight:900; letter-spacing:1.2px; margin-bottom:4px; }
.contact-row a, .contact-row p{ font-size:19px; font-weight:800; color:#fff; }
.map-box{
  min-height:430px;
  border-radius:30px;
  background:
    linear-gradient(rgba(255,249,233,.84), rgba(255,249,233,.84)),
    url('burger-explosion.jpg') center/cover;
  display:grid;
  place-items:center;
  text-align:center;
  padding:34px;
}
.map-box-inner{
  background:#fff;
  border-radius:28px;
  padding:34px;
  box-shadow:0 18px 50px rgba(0,47,24,.12);
  max-width:380px;
}
.map-box-inner img{ width:180px; margin:0 auto 18px; }
.map-box-inner p{ color:var(--muted); line-height:1.6; margin-bottom:20px; font-weight:500; }

footer{ padding:32px 0; background:var(--green-dark); color:#e9ffe4; }
footer .container{ display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; font-weight:700; }
footer span{ color:var(--yellow); }

.floating-order{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:120;
  display:none;
}

.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease; }
.reveal.visible{ opacity:1; transform:translateY(0); }

@media (max-width: 980px){
  .nav-links{ display:none; }
  .hero{ background-position:center; }
  /* Keep the pills one row tall on narrow screens — stacking three of them
     would push the hero past the viewport again. Swipe to see the rest. */
  .hero-banner-info{
    grid-template-columns:none;
    grid-auto-flow:column;
    grid-auto-columns:minmax(196px, 1fr);
    overflow-x:auto;
    scrollbar-width:none;
  }
  .hero-banner-info::-webkit-scrollbar{ display:none; }
  .bento, .about-wrap, .contact-card{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; }
  .section-title{ display:block; }
  .section-title p{ margin-top:16px; }
  .about-content{ padding:34px; }
  .about-image{ min-height:380px; }
}

@media (max-width: 620px){
  .container{ width:min(100% - 24px, 1180px); }
  .top-line .container{ justify-content:center; text-align:center; }
  .nav-inner{ min-height:74px; }
  .logo-wrap img{ width:128px; }
  .nav-inner .btn{ display:none; }
  .floating-order{ display:inline-flex; }
  .hero{
    background:
      linear-gradient(180deg, rgba(0,29,15,.76) 0%, rgba(0,45,23,.70) 48%, rgba(0,0,0,.10) 100%),
      url('burger-saucy.jpg') center top / cover no-repeat;
  }
  h1{ letter-spacing:-2px; }
  .hero-content p{ font-size:15px; }
  .hero-actions{ align-items:stretch; }
  .hero-actions .btn{ width:100%; }
  .hero-banner-info{ width:min(100% - 24px, 1180px); }
  .banner-pill{ padding:14px 16px; }
  .banner-pill strong{ font-size:18px; }
  section{ padding:58px 0; }
  .food-card{ min-height:310px; }
  .contact-details, .about-content{ padding:26px; }
  .contact-row a, .contact-row p{ font-size:16px; }
}

/* ============================================
   Shared site chrome
   ============================================ */

.nav-links a.active{ opacity:1; color:var(--green); }

.nav-toggle{
  display:none;
  /* flex column: align-items centres the bars across, justify-content centres
     them down the button. place-items doesn't do the second one in flexbox. */
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  width:44px; height:44px;
  padding:0;
  border-radius:14px;
  border:1px solid rgba(0,107,45,.16);
  background:#fff;
  box-shadow:0 6px 16px rgba(0,47,24,.08);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.nav-toggle:active{ transform:scale(.96); }
.nav-toggle span{
  display:block;
  width:19px; height:2px;
  background:var(--green-dark);
  border-radius:2px;
  transition:transform .25s ease, opacity .2s ease;
}
.nav-open .nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2){ opacity:0; }
.nav-open .nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---- Page hero (menu / contact) ---- */
.page-hero{
  background:linear-gradient(150deg, var(--green-dark), var(--green));
  color:#fff;
  padding:76px 0 88px;
  position:relative;
  overflow:hidden;
}
.page-hero::after{
  content:"";
  position:absolute;
  width:420px; height:420px;
  right:-140px; top:-160px;
  border-radius:50%;
  background:rgba(185,255,72,.14);
}
.page-hero .container{ position:relative; z-index:1; }
.page-hero .eyebrow{
  display:inline-flex;
  align-items:center;
  gap:9px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.24);
  border-radius:999px;
  padding:9px 16px;
  font-size:12px;
  font-weight:900;
  letter-spacing:1.2px;
  text-transform:uppercase;
  margin-bottom:20px;
}
.page-hero h1{
  font-size:clamp(40px, 6vw, 78px);
  line-height:.98;
  letter-spacing:-2.6px;
  font-weight:900;
  margin-bottom:16px;
}
.page-hero p{
  max-width:560px;
  color:rgba(255,255,255,.86);
  font-size:17px;
  line-height:1.75;
  font-weight:500;
}
.page-hero .hero-actions{ margin-top:28px; }

/* ============================================
   Menu (API driven)
   ============================================ */

.menu-nav{
  position:sticky;
  top:var(--header-height, 126px);   /* height of .site-header, measured at runtime */
  z-index:60;
  display:flex;
  gap:10px;
  overflow-x:auto;
  padding:16px 0;
  background:rgba(255,249,233,.94);
  backdrop-filter:blur(14px);
  scrollbar-width:none;
}
.menu-nav::-webkit-scrollbar{ display:none; }
.menu-pill{
  flex:0 0 auto;
  border-radius:999px;
  padding:11px 20px;
  background:#fff;
  border:1px solid rgba(0,107,45,.14);
  font-size:13px;
  font-weight:900;
  letter-spacing:.4px;
  text-transform:uppercase;
  color:var(--green-dark);
  transition:.22s ease;
  white-space:nowrap;
}
.menu-pill:hover{ transform:translateY(-2px); border-color:var(--green); }
.menu-pill.active{ background:var(--green-dark); color:#fff; border-color:var(--green-dark); }

.menu-section{ padding:44px 0 8px; scroll-margin-top:calc(var(--header-height, 126px) + 84px); }
.menu-section-head{
  display:flex;
  align-items:baseline;
  gap:14px;
  margin-bottom:8px;
}
.menu-section-head h2{
  font-size:clamp(28px, 4vw, 46px);
  line-height:1;
  letter-spacing:-1.6px;
  font-weight:900;
  color:var(--green-dark);
}
.menu-count{
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--muted);
}
.menu-section-desc{ color:var(--muted); margin-bottom:14px; font-weight:500; }

.menu-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:20px;
  margin-top:22px;
}
.menu-item{
  background:#fff;
  border:1px solid rgba(0,107,45,.1);
  border-radius:28px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  box-shadow:0 16px 44px rgba(0,47,24,.07);
  transition:transform .3s ease, box-shadow .3s ease;
}
.menu-item:hover{ transform:translateY(-5px); box-shadow:0 26px 62px rgba(0,47,24,.14); }
.mi-media{ height:198px; overflow:hidden; background:var(--green-soft); }
.mi-media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.menu-item:hover .mi-media img{ transform:scale(1.06); }
/* No API photo yet — the image space carries the price instead of sitting
   empty. Add a photo to the product in SIPO and it takes over automatically. */
.mi-media-empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255,189,46,.16), transparent 60%),
    linear-gradient(150deg, var(--green-soft), #fff);
  border-bottom:1px solid rgba(0,107,45,.09);
}
.mi-media-brand{
  font-weight:900;
  letter-spacing:3.5px;
  text-transform:uppercase;
  font-size:11px;
  color:rgba(0,107,45,.42);
}
.mi-media-price{
  font-size:34px;
  line-height:1;
  font-weight:900;
  letter-spacing:-1.5px;
  color:var(--green-dark);
}
.mi-body{ padding:22px; display:flex; flex-direction:column; gap:9px; flex:1; }
.mi-tag{
  align-self:flex-start;
  background:var(--green-soft);
  color:var(--green);
  border-radius:999px;
  padding:6px 12px;
  font-size:10px;
  font-weight:900;
  letter-spacing:1px;
  text-transform:uppercase;
}
.mi-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.mi-head h3{ font-size:19px; line-height:1.25; font-weight:900; color:var(--green-dark); }
.mi-price{
  flex:0 0 auto;
  font-weight:900;
  color:var(--green);
  background:var(--green-soft);
  border-radius:999px;
  padding:6px 12px;
  font-size:14px;
  white-space:nowrap;
}
.mi-body p{ color:var(--muted); line-height:1.6; font-size:14.5px; font-weight:500; }
.mi-order{
  margin-top:auto;
  align-self:flex-start;
  border-radius:999px;
  padding:11px 22px;
  background:var(--green-dark);
  color:#fff;
  font-size:13px;
  font-weight:900;
  letter-spacing:.4px;
  transition:.22s ease;
}
.mi-order:hover{ background:var(--green); transform:translateY(-2px); }

.menu-empty, .menu-loading{
  text-align:center;
  color:var(--muted);
  font-weight:600;
  padding:60px 0;
}
.menu-loading::after{
  content:"";
  display:block;
  width:34px; height:34px;
  margin:18px auto 0;
  border-radius:50%;
  border:3px solid var(--green-soft);
  border-top-color:var(--green);
  animation:spin .9s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ============================================
   Hours & contact blocks (API driven)
   ============================================ */

.info-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:20px;
}
.info-card{
  background:#fff;
  border:1px solid rgba(0,107,45,.1);
  border-radius:30px;
  padding:32px;
  box-shadow:0 16px 46px rgba(0,47,24,.07);
}
.info-card h3{
  font-size:14px;
  text-transform:uppercase;
  letter-spacing:1.4px;
  font-weight:900;
  color:var(--green);
  margin-bottom:16px;
}
.info-card .big{
  font-size:21px;
  font-weight:900;
  color:var(--green-dark);
  line-height:1.45;
  word-break:break-word;
}
.info-card .sub{ color:var(--muted); margin-top:10px; line-height:1.65; font-weight:500; }
.info-card a.big:hover{ color:var(--green); }

.hours-card{
  background:var(--green-dark);
  color:#fff;
  border-radius:30px;
  padding:32px;
}
.hours-card h3{ color:var(--lime); }
.hours-table{ margin-top:6px; }
.hours-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:13px 0;
  border-bottom:1px solid rgba(255,255,255,.12);
  font-weight:700;
}
.hours-row:last-child{ border-bottom:0; }
.hours-row .day{ color:rgba(255,255,255,.82); }
.hours-row .time{ text-align:right; font-weight:800; }
.hours-row.today{
  background:rgba(185,255,72,.12);
  border-radius:14px;
  padding:13px 14px;
  margin:0 -14px;
  border-bottom-color:transparent;
}
.hours-row.today .day{ color:var(--lime); }
.hours-row .closed-day{ color:#ffb4a8; font-weight:700; }

.hours-list{ list-style:none; margin-top:6px; }
.hours-list li{
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding:8px 0;
  font-size:14px;
  font-weight:700;
}
.hours-list li .day{ color:rgba(233,255,228,.7); }
.hours-list li.today .day, .hours-list li.today .time{ color:var(--yellow); }
.hours-list li .closed-day{ color:#ffb4a8; }

.map-frame{
  width:100%;
  min-height:420px;
  border:0;
  border-radius:30px;
  box-shadow:0 18px 50px rgba(0,47,24,.12);
  display:block;
}

.contact-split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
  align-items:start;
}

.api-note{
  background:#fff4d6;
  border:1px solid #f0d08a;
  color:#7a5a12;
  border-radius:20px;
  padding:18px 22px;
  font-weight:700;
  margin-bottom:22px;
}

/* ============================================
   Footer
   ============================================ */

.footer-grid{
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr 1.1fr;
  gap:34px;
  padding-bottom:32px;
  border-bottom:1px solid rgba(255,255,255,.13);
}
.footer-grid h4{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:1.4px;
  color:var(--lime);
  font-weight:900;
  margin-bottom:16px;
}
.footer-grid img{ width:150px; margin-bottom:16px; }
.footer-grid p, .footer-grid a{
  color:rgba(233,255,228,.82);
  line-height:1.7;
  font-weight:500;
  font-size:14.5px;
}
.footer-grid a:hover{ color:var(--yellow); }
.footer-links{ display:grid; gap:10px; }
.footer-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
  padding-top:24px;
  font-weight:700;
  font-size:14px;
}
footer .container{ display:block; }

/* ============================================
   Responsive
   ============================================ */

@media (max-width: 980px){
  .nav-toggle{ display:flex; }
  .nav-links{
    display:none;
    position:absolute;
    top:100%;
    left:0; right:0;
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    background:var(--cream);
    border-bottom:1px solid rgba(0,107,45,.14);
    box-shadow:0 24px 50px rgba(0,47,24,.14);
    padding:8px 18px 18px;
  }
  .nav-open .nav-links{ display:flex; }
  .nav-links a{ width:100%; padding:15px 0; border-bottom:1px solid rgba(0,107,45,.09); opacity:1; }
  .contact-split{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:26px; }
  .page-hero{ padding:56px 0 64px; }
}

@media (max-width: 620px){
  .footer-grid{ grid-template-columns:1fr; }
  .footer-bottom{ justify-content:center; text-align:center; }
  .info-card, .hours-card{ padding:24px; }
  .menu-grid{ grid-template-columns:1fr; }
  .map-frame{ min-height:320px; }
  .menu-section{ padding:30px 0 4px; scroll-margin-top:calc(var(--header-height, 116px) + 76px); }
  .page-hero .hero-actions .btn{ width:100%; }
}

/* ============================================
   Short viewports
   ============================================
   On a short window there isn't room for both the hero copy and the info
   pills. The pills repeat what the status strip already shows (today's hours
   and the pickup wait), so they give way rather than pushing the order button
   below the fold. */
@media (max-height: 620px){
  .hero-banner-info{ display:none; }
}