/* ============================================================
   LICHA'S MEXICAN DINER 2 — Limon, Colorado
   CravEngine build. Dark + warm: near-black base, cream, marigold,
   hibiscus red, cactus green — pulled straight from the logo.
   Fonts: Bebas Neue (display) · Kaushan Script (signature)
          Barlow Condensed (labels) · Inter (body)
   ============================================================ */

:root{
  /* brand — sampled from the Licha's Mexican Diner 2 logo */
  --red:      #C4342A;   /* hibiscus */
  --red-2:    #E0473B;
  --red-d:    #8E1F17;
  --marigold: #F2A007;
  --sun-y:    #F7C948;
  --amber:    #E8871E;
  --verde:    #2E6B3E;   /* the KITCHEN banner green */
  --verde-2:  #4F9A5F;
  --gold:     #E7B457;

  /* warm dark base (never blue-black) */
  --ink:      #0D0B0A;
  --ink-2:    #14100D;
  --ink-3:    #1A1512;
  --card:     #1C1613;
  --card-2:   #241C17;
  --line:     rgba(255,255,255,.085);
  --line-2:   rgba(255,255,255,.15);

  /* light */
  --cream:    #F6EBD9;
  --cream-2:  #EADCC4;
  --cream-3:  #DCC9AC;

  /* text */
  --white:    #FFFFFF;
  --text:     #F3E9DC;
  --muted:    #B7A794;
  --muted-2:  #8B7C6C;

  /* type */
  --display:  'Bebas Neue', sans-serif;
  --script:   'Kaushan Script', cursive;
  --cond:     'Barlow Condensed', sans-serif;
  --body:     'Inter', system-ui, sans-serif;

  /* layout */
  --nav-h: 74px;
  --pad:   clamp(4.5rem, 9vw, 8rem);
  --gut:   clamp(1.25rem, 5vw, 5rem);
  --r:     16px;
  --maxw:  1240px;

  --sun:   linear-gradient(95deg, #F7C948 0%, #F2A007 42%, #C4342A 94%);
  --warm:  radial-gradient(60% 80% at 50% 100%, rgba(196,52,42,.26), rgba(242,160,7,.09) 45%, transparent 70%);
}

/* ---------- reset ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--body);
  background:var(--ink);
  color:var(--text);
  line-height:1.65;
  font-size:16px;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
::selection{background:var(--red);color:#fff}
:focus-visible{outline:2px solid var(--marigold);outline-offset:3px;border-radius:4px}

/* ---------- type helpers ---------- */
.display{font-family:var(--display);font-weight:400;line-height:.9;letter-spacing:.012em;text-transform:uppercase}
.script{font-family:var(--script);text-transform:none;letter-spacing:0;line-height:1.05}
/* background-clip:text paints only inside the element's background box, and
   Kaushan's swashes/descenders overhang it — without this padding the last
   glyph gets sliced off. Applies to every gradient word on the site. */
.sun-text,.verde-text{display:inline-block;padding:0 .16em .14em 0}
.sun-text{
  background:var(--sun);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
/* Always script — so it must undo the uppercase/tracking it would otherwise
   inherit from .h-xl/.h-lg. Script caps are far wider than Bebas caps and
   overflow the container. */
.verde-text{
  font-family:var(--script);text-transform:none;letter-spacing:0;
  background:linear-gradient(95deg,#8FC96B,#3F8A4F);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
/* Kaushan runs much wider than Bebas at the same size — step the script line
   down inside the big chili headline so it never runs off the page. */
.chili .h-xl .verde-text{display:inline-block;font-size:clamp(2.3rem,6vw,5rem);line-height:1.08}
.eyebrow{
  font-family:var(--cond);text-transform:uppercase;font-weight:600;
  letter-spacing:.32em;font-size:.78rem;color:var(--gold);
  display:inline-flex;align-items:center;gap:.7rem;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--sun);border-radius:2px}
.eyebrow.center::after{content:"";width:26px;height:2px;background:var(--sun);border-radius:2px}
.eyebrow.center{justify-content:center}

.h-xl{font-family:var(--display);font-weight:400;line-height:.88;text-transform:uppercase;
  font-size:clamp(3.2rem,8.5vw,7rem);letter-spacing:.01em}
.h-lg{font-family:var(--display);font-weight:400;line-height:.9;text-transform:uppercase;
  font-size:clamp(2.6rem,5.5vw,4.6rem);letter-spacing:.01em}
.h-md{font-family:var(--display);font-weight:400;line-height:.92;text-transform:uppercase;
  font-size:clamp(1.9rem,3.4vw,2.9rem);letter-spacing:.015em}
.lead{font-size:clamp(1.05rem,1.5vw,1.22rem);color:var(--muted);line-height:1.7;max-width:54ch}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.section{padding-block:var(--pad)}
.center{text-align:center}
.mx-auto{margin-inline:auto}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:var(--cond);font-weight:600;text-transform:uppercase;
  letter-spacing:.12em;font-size:1.02rem;line-height:1;
  padding:1.02rem 1.7rem;border-radius:60px;
  transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, background .25s, color .25s, border-color .25s;
  white-space:nowrap;
}
.btn svg{width:1.05em;height:1.05em}
.btn-red{background:var(--red);color:#fff;box-shadow:0 10px 30px -10px rgba(196,52,42,.7)}
.btn-red:hover{background:var(--red-2);transform:translateY(-3px);box-shadow:0 18px 40px -12px rgba(224,71,59,.75)}
.btn-sun{background:var(--sun);color:#2A1405;box-shadow:0 12px 34px -12px rgba(242,160,7,.65)}
.btn-sun:hover{transform:translateY(-3px);box-shadow:0 20px 46px -14px rgba(242,160,7,.85)}
.btn-verde{background:var(--verde);color:#fff;box-shadow:0 10px 30px -12px rgba(46,107,62,.8)}
.btn-verde:hover{background:var(--verde-2);transform:translateY(-3px)}
.btn-ghost{background:transparent;color:#fff;border:1.5px solid var(--line-2)}
.btn-ghost:hover{border-color:#fff;transform:translateY(-3px);background:rgba(255,255,255,.05)}
.btn-dark{background:#16100D;color:#fff;border:1.5px solid var(--line-2)}
.btn-dark:hover{background:var(--cream);color:var(--ink);transform:translateY(-3px);border-color:var(--cream)}
.btn-sm{padding:.7rem 1.2rem;font-size:.86rem}
.btn-lg{padding:1.18rem 2.1rem;font-size:1.12rem}

/* ---------- nav ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;height:var(--nav-h);z-index:100;
  display:flex;align-items:center;
  transition:background .35s, box-shadow .35s, backdrop-filter .35s;
}
.nav.scrolled{
  background:rgba(13,11,10,.85);backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--line), 0 18px 40px -30px #000;
}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;width:100%;gap:1.5rem}

/* Wordmark set in type — the illustrated logo is far too detailed to read
   at nav size, so we echo its lettering instead (script + banner caps).
   NOTE: the class is still .b-kitchen (inherited from the Calhan build); it
   holds "Mexican Diner 2" here. That name is more than twice the width of
   "Kitchen", so it runs smaller and tighter than Calhan's and steps down
   again on tablet and phone. Check the nav at 375px after any change. */
.brand{display:flex;align-items:baseline;gap:.42rem;color:#fff;line-height:1}
.brand .b-script{font-family:var(--script);font-size:1.72rem;color:var(--cream);line-height:1;
  transform:translateY(.06em)}
.brand .b-kitchen{font-family:var(--display);font-size:.95rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--marigold);white-space:nowrap}
.brand:hover .b-script{color:#fff}

.nav-links{display:flex;align-items:center;gap:2rem}
.nav-links a{font-family:var(--cond);text-transform:uppercase;letter-spacing:.13em;
  font-weight:500;font-size:1rem;color:var(--muted);transition:color .2s;position:relative;padding:.2rem 0}
.nav-links a:hover,.nav-links a.active{color:#fff}
.nav-links a.active::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--sun);border-radius:2px}
.nav-cta{display:flex;align-items:center;gap:1rem}
.hamburger{display:none;flex-direction:column;gap:5px;padding:8px;z-index:120}
.hamburger span{width:26px;height:2.5px;background:#fff;border-radius:2px;transition:.3s}
.hamburger.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* mobile menu */
.mobile-menu{position:fixed;inset:0;z-index:110;background:rgba(10,8,6,.975);backdrop-filter:blur(8px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.3rem;
  opacity:0;visibility:hidden;transition:.35s}
.mobile-menu.open{opacity:1;visibility:visible}
.mobile-menu a{font-family:var(--display);font-size:2.4rem;letter-spacing:.03em;text-transform:uppercase;color:#fff}
.mobile-menu a:hover{color:var(--marigold)}
.mobile-menu .btn{margin-top:1rem}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;
  padding-top:calc(var(--nav-h) + 2rem);padding-bottom:3rem;overflow:hidden;background:var(--ink)}
.hero::before{content:"";position:absolute;inset:0;background:var(--warm);pointer-events:none}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
   radial-gradient(40% 50% at 85% 18%, rgba(242,160,7,.11), transparent 70%),
   radial-gradient(50% 60% at 8% 32%, rgba(196,52,42,.11), transparent 70%);}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(2rem,5vw,4rem);align-items:center;width:100%}
.hero h1{margin:.9rem 0 1.1rem}
.hero h1 .l1{display:block;font-family:var(--display);font-size:clamp(2.4rem,5.4vw,4.4rem);line-height:.86;color:#fff;letter-spacing:.01em}
/* Sized to keep the script line on ONE line at desktop; line-height still
   leaves room if it wraps on narrow screens. */
.hero h1 .l2{display:block;font-family:var(--script);font-size:clamp(3rem,7vw,6.2rem);line-height:1.02;margin:.06em 0 .1em -.03em}
.hero h1 .l3{display:block;font-family:var(--display);font-size:clamp(2rem,4.4vw,3.5rem);line-height:.9;color:#fff;letter-spacing:.02em}
.hero .lead{margin-bottom:1.8rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:.9rem;margin-bottom:1.7rem}
.hero-meta{display:flex;align-items:center;gap:.85rem;flex-wrap:wrap;color:var(--muted);font-size:.96rem}
.hero-meta b{color:#fff;font-weight:600}
.hero-meta .dot{width:4px;height:4px;border-radius:50%;background:var(--muted-2)}

/* hero coin (floating food disc) */
.hero-art{position:relative;display:flex;justify-content:center;align-items:center;min-height:340px}
.coin{position:relative;width:clamp(270px,36vw,500px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 50% 40%, #241a12 0%, #17100b 70%, #0f0a07 100%);
  overflow:hidden;box-shadow:
    0 40px 80px -30px rgba(0,0,0,.85),
    0 0 0 1px rgba(255,255,255,.07),
    inset 0 0 60px rgba(0,0,0,.45);
  z-index:2}
.coin::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  box-shadow:inset 0 -40px 70px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.05)}
.coin img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%;
  filter:saturate(1.06) contrast(1.04)}
.coin-ring{position:absolute;width:clamp(300px,40vw,560px);aspect-ratio:1;border-radius:50%;
  border:2px dashed rgba(242,160,7,.38);z-index:1;animation:spin 60s linear infinite}
.coin-glow{position:absolute;width:clamp(320px,44vw,620px);aspect-ratio:1;border-radius:50%;z-index:0;
  background:radial-gradient(circle, rgba(242,160,7,.38), rgba(196,52,42,.16) 45%, transparent 68%);filter:blur(8px)}
@keyframes spin{to{transform:rotate(360deg)}}

/* round stamp badge (replaces Ricco's EST. badge) */
.badge-stamp{position:absolute;z-index:3;top:5%;right:1%;
  width:clamp(86px,10vw,124px);height:clamp(86px,10vw,124px);border-radius:50%;
  background:var(--verde);color:#fff;display:grid;place-content:center;text-align:center;
  font-family:var(--display);line-height:1;letter-spacing:.05em;padding:.4rem;
  box-shadow:0 16px 30px -10px rgba(0,0,0,.7);transform:rotate(-11deg);border:3px solid var(--cream)}
.badge-stamp small{display:block;font-size:.52em;color:#CDE8CE;letter-spacing:.16em;margin-bottom:.28em}
.badge-stamp b{font-size:1.05em;font-weight:400;display:block;letter-spacing:.02em}

/* ---------- marquee ---------- */
.marquee{border-block:1px solid var(--line);background:var(--ink-2);overflow:hidden;padding:1.15rem 0}
.marquee-track{display:flex;gap:2.5rem;width:max-content;animation:scroll-x 34s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee span{font-family:var(--display);font-size:1.8rem;letter-spacing:.05em;text-transform:uppercase;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.3);display:inline-flex;align-items:center;gap:2.5rem}
.marquee span::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--red);-webkit-text-stroke:0}
.marquee .hot{color:var(--marigold);-webkit-text-stroke:0}
@keyframes scroll-x{to{transform:translateX(-50%)}}

/* ---------- generic section bits ---------- */
.sec-head{max-width:640px}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head .lead{margin-top:1rem}
.sec-head.center .lead{margin-inline:auto}

/* split (story) */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.split-media{position:relative}
.facts{display:flex;gap:2.2rem;margin-top:1.8rem;flex-wrap:wrap}
.fact b{font-family:var(--display);font-size:2.6rem;color:#fff;line-height:1;display:block}
.fact span{font-family:var(--cond);text-transform:uppercase;letter-spacing:.12em;font-size:.8rem;color:var(--gold)}

/* framed photo (portrait / room shots — rectangular, not a coin) */
.frame{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line-2);
  box-shadow:0 40px 80px -40px #000;background:var(--card)}
.frame img{width:100%;height:100%;object-fit:cover;display:block}
.frame::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,rgba(13,11,10,.55) 100%)}
.frame.portrait{aspect-ratio:4/5}
.frame.wide{aspect-ratio:3/2}
/* Matches the Licha photo's native 1236x943 almost exactly, so the chalkboard
   ("Licha's Mexican Food! With Love!") is never cropped out. */
.frame.photo43{aspect-ratio:4/3}
.frame-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:1.4rem 1.5rem;
  font-family:var(--cond);text-transform:uppercase;letter-spacing:.14em;font-size:.82rem;color:var(--cream)}
.frame-cap b{color:var(--marigold);font-weight:600}

/* ---------- green chili feature ---------- */
.chili{position:relative;background:linear-gradient(180deg,#0D0B0A,#141410);overflow:hidden;text-align:center}
.chili::before{content:"";position:absolute;inset:0;
  background:radial-gradient(60% 70% at 50% 40%, rgba(79,154,95,.2), transparent 70%);}
.chili::after{content:"";position:absolute;inset:0;
  background:radial-gradient(40% 50% at 50% 120%, rgba(242,160,7,.16), transparent 70%);}
.chili .wrap{position:relative;z-index:2}
.chili .h-xl{color:#fff}

/* ---------- scratch-made band (3 real things they make in house) ---------- */
.scratch{background:var(--ink-2)}
.scratch-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2.8rem}
.scratch-card{background:linear-gradient(180deg,var(--card),var(--ink-2));border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;transition:transform .35s,border-color .35s,box-shadow .35s}
.scratch-card:hover{transform:translateY(-6px);border-color:var(--line-2);box-shadow:0 30px 60px -34px #000}
.scratch-card .ph{aspect-ratio:4/3;position:relative;overflow:hidden;background:var(--card-2)}
.scratch-card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.scratch-card:hover .ph img{transform:scale(1.05)}
.scratch-card .bd{padding:1.6rem 1.5rem 1.8rem}
.scratch-card h3{font-family:var(--display);font-size:1.75rem;letter-spacing:.02em;color:#fff;line-height:1;margin-bottom:.5rem}
.scratch-card p{font-size:.93rem;color:var(--muted);line-height:1.6}

/* ---------- signature dish cards ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.dish-card{position:relative;background:linear-gradient(180deg,var(--card),var(--ink-2));
  border:1px solid var(--line);border-radius:var(--r);padding:2rem 1.6rem 1.7rem;
  text-align:center;transition:transform .35s, border-color .35s, box-shadow .35s;overflow:hidden}
.dish-card::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--sun);
  transform:scaleX(0);transform-origin:left;transition:transform .4s}
.dish-card:hover{transform:translateY(-7px);border-color:var(--line-2);box-shadow:0 30px 60px -34px #000}
.dish-card:hover::before{transform:scaleX(1)}
.dish-disc{width:min(78%,210px);aspect-ratio:1;margin:0 auto 1.2rem;border-radius:50%;position:relative;
  background:radial-gradient(circle at 50% 42%,#241a12,#150e0a);overflow:hidden;
  box-shadow:0 24px 44px -22px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.06);
  transition:transform .4s}
.dish-card:hover .dish-disc{transform:scale(1.04) rotate(-2deg)}
.dish-disc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%;
  filter:saturate(1.06) contrast(1.04)}
.dish-card h3{font-family:var(--display);font-size:1.85rem;letter-spacing:.02em;color:#fff;margin-bottom:.35rem;line-height:1}
.dish-card p{font-size:.92rem;color:var(--muted);line-height:1.55;min-height:2.6em}
.dish-card .price{display:inline-block;margin-top:1rem;font-family:var(--cond);font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;font-size:1.05rem;color:var(--sun-y)}
.dish-tag{position:absolute;top:1rem;left:1rem;font-family:var(--cond);font-weight:600;text-transform:uppercase;
  letter-spacing:.1em;font-size:.66rem;color:#fff;background:var(--red);padding:.32rem .6rem;border-radius:6px;z-index:3}
.dish-tag.verde{background:var(--verde)}

/* ---------- pull quote ---------- */
.quote-band{position:relative;background:var(--ink-2);overflow:hidden;text-align:center}
.quote-band::before{content:"";position:absolute;inset:0;
  background:radial-gradient(55% 70% at 50% 50%, rgba(242,160,7,.1), transparent 70%)}
.quote-band .wrap{position:relative;z-index:2;max-width:900px}
.quote-band blockquote{font-family:var(--script);font-size:clamp(1.7rem,4.2vw,3.1rem);
  line-height:1.35;color:var(--cream)}
.quote-band .qm{font-family:var(--display);font-size:4rem;color:var(--marigold);line-height:.6;display:block;margin-bottom:.6rem}
.quote-band cite{display:block;margin-top:1.6rem;font-family:var(--cond);font-style:normal;
  text-transform:uppercase;letter-spacing:.2em;font-size:.85rem;color:var(--gold)}

/* ---------- visit / info cards ---------- */
.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2.8rem}
.info-card{background:linear-gradient(180deg,var(--card),var(--ink-2));border:1px solid var(--line);
  border-radius:var(--r);padding:2.1rem 1.8rem;transition:transform .35s,border-color .35s}
.info-card:hover{transform:translateY(-5px);border-color:var(--line-2)}
.info-card .ic{width:48px;height:48px;border-radius:13px;background:var(--sun);display:grid;place-content:center;margin-bottom:1.1rem}
.info-card .ic svg{width:22px;height:22px;color:#2A1405}
.info-card h3{font-family:var(--display);font-size:1.7rem;letter-spacing:.03em;color:#fff;line-height:1;margin-bottom:.6rem}
.info-card p{font-size:.98rem;color:var(--muted);line-height:1.6}
.info-card a{color:var(--cream);border-bottom:1px solid rgba(255,255,255,.2)}
.info-card a:hover{color:var(--marigold);border-color:var(--marigold)}

.loc-row{display:flex;gap:.7rem;align-items:flex-start;color:var(--muted);font-size:.98rem;margin-bottom:.6rem}
.loc-row svg{width:18px;height:18px;flex:none;margin-top:.18rem;color:var(--red)}
.loc-row a:hover{color:#fff}

.hours-table{display:grid;gap:.35rem;margin-top:.4rem}
.hours-table div{display:flex;justify-content:space-between;gap:1rem;font-size:.95rem;color:var(--muted);
  padding:.35rem 0;border-bottom:1px dashed var(--line)}
.hours-table div:last-child{border-bottom:none}
.hours-table b{color:#fff;font-weight:500}
.hours-table .closed{color:var(--red-2)}

/* call-for-hours placeholder state — used until confirmed hours land */
.hours-callout{border:1px dashed var(--line-2);border-radius:14px;padding:1.4rem 1.5rem;
  background:rgba(242,160,7,.06);margin-top:.6rem}
.hours-callout p{color:var(--muted);font-size:.96rem;margin-bottom:.9rem}
.hours-callout .btn{width:100%}

/* map */
.loc-map{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line-2);
  box-shadow:0 30px 60px -36px #000;aspect-ratio:16/11;background:var(--card)}
.loc-map iframe{width:100%;height:100%;border:0;filter:grayscale(.25) contrast(1.05)}

/* ---------- CTA band ---------- */
.cta-band{position:relative;background:linear-gradient(120deg,#1B0F0A,#2B140C);overflow:hidden;text-align:center}
.cta-band::before{content:"";position:absolute;inset:0;background:var(--warm)}
.cta-band::after{content:"";position:absolute;inset:0;
  background:radial-gradient(50% 120% at 50% 0%, rgba(242,160,7,.2), transparent 60%)}
.cta-band .wrap{position:relative;z-index:2}
.cta-band .h-lg{color:#fff}
.cta-band .hero-cta{justify-content:center;margin-top:1.7rem;margin-bottom:0}

/* ---------- footer ---------- */
.footer{background:#080605;border-top:1px solid var(--line);padding-top:clamp(3.5rem,6vw,5rem)}
.foot-grid{display:grid;grid-template-columns:1.7fr 1fr 1.1fr 1.2fr;gap:2.5rem}
.footer .brand{margin-bottom:1rem}
.foot-logo{width:96px;height:96px;object-fit:contain;border-radius:12px;margin-bottom:1.1rem;
  box-shadow:0 12px 28px -14px #000}
.footer .foot-about{color:var(--muted);font-size:.95rem;max-width:34ch}
.foot-col h4{font-family:var(--cond);text-transform:uppercase;letter-spacing:.16em;font-size:.82rem;color:#fff;margin-bottom:1.1rem}
.foot-col a,.foot-col p{display:block;color:var(--muted);font-size:.95rem;margin-bottom:.6rem;transition:color .2s}
.foot-col a:hover{color:#fff}
.socials{display:flex;gap:.7rem;margin-top:.9rem}
.socials a{width:40px;height:40px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-content:center;color:#fff;transition:.25s}
.socials a:hover{background:var(--red);border-color:var(--red);transform:translateY(-2px)}
.socials svg{width:18px;height:18px}
.foot-bottom{border-top:1px solid var(--line);margin-top:clamp(2.5rem,5vw,4rem);padding:1.6rem 0;
  display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.foot-bottom p{font-size:.84rem;color:var(--muted-2)}
.foot-bottom .cred{font-family:var(--cond);letter-spacing:.08em;text-transform:uppercase}
.foot-bottom .cred b{color:var(--marigold);font-weight:600}

/* ---------- inner page head ---------- */
.page-head{padding-top:calc(var(--nav-h) + clamp(3rem,7vw,6rem));padding-bottom:clamp(2.5rem,5vw,4rem);
  position:relative;text-align:center;overflow:hidden;background:var(--ink-2)}
.page-head::before{content:"";position:absolute;inset:0;background:var(--warm)}
.page-head .wrap{position:relative;z-index:2}
.page-head .h-xl{color:#fff}
.page-head .lead{margin:1rem auto 0}

/* ---------- menu page ---------- */
.menu-nav{position:sticky;top:var(--nav-h);z-index:40;background:rgba(13,11,10,.92);backdrop-filter:blur(12px);
  border-block:1px solid var(--line);padding:.8rem 0}
.menu-nav .wrap{display:flex;gap:.6rem;overflow-x:auto;justify-content:flex-start;scrollbar-width:none}
.menu-nav .wrap::-webkit-scrollbar{display:none}
.menu-nav a{font-family:var(--cond);text-transform:uppercase;letter-spacing:.1em;font-size:.92rem;font-weight:500;
  color:var(--muted);padding:.5rem 1rem;border-radius:30px;white-space:nowrap;transition:.2s;border:1px solid transparent}
.menu-nav a:hover{color:#fff}
.menu-nav a.active{color:#fff;background:var(--red);border-color:var(--red)}

.menu-cat{padding-block:clamp(2.4rem,4.5vw,3.6rem);scroll-margin-top:calc(var(--nav-h) + 60px)}
.menu-cat-head{display:flex;align-items:baseline;gap:1rem;margin-bottom:1.4rem;flex-wrap:wrap}
.menu-cat-head h2{font-family:var(--display);font-size:clamp(2.2rem,4.5vw,3.4rem);color:#fff;letter-spacing:.02em;line-height:1}
.menu-cat-head .ln{flex:1;height:1px;background:var(--line);min-width:40px}
.menu-cat-head .note{font-family:var(--cond);text-transform:uppercase;letter-spacing:.1em;font-size:.8rem;color:var(--gold)}

/* meat-choice callout — appears above categories where it applies */
.meat-note{display:flex;gap:.8rem;align-items:flex-start;background:rgba(46,107,62,.12);
  border:1px solid rgba(79,154,95,.3);border-radius:12px;padding:.9rem 1.15rem;margin-bottom:1.8rem}
.meat-note svg{width:18px;height:18px;flex:none;margin-top:.2rem;color:var(--verde-2)}
.meat-note p{font-size:.92rem;color:var(--cream-2);line-height:1.55}
.meat-note b{color:#fff;font-weight:600}

.menu-list{display:grid;grid-template-columns:1fr 1fr;gap:.2rem 2.6rem}
.mi{display:flex;gap:1.1rem;align-items:flex-start;padding:.9rem 0;border-bottom:1px solid var(--line);transition:.25s}
.mi:hover{transform:translateX(4px)}
.mi-thumb{width:74px;height:74px;border-radius:50%;flex:none;position:relative;overflow:hidden;
  background:radial-gradient(circle at 50% 42%,#241a12,#150e0a);box-shadow:0 10px 20px -12px #000;margin-top:.1rem}
.mi-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%;
  filter:saturate(1.06) contrast(1.04)}
.mi-body{flex:1;min-width:0}
.mi-top{display:flex;align-items:baseline;gap:.6rem}
.mi-top h3{font-family:var(--display);font-size:1.42rem;letter-spacing:.02em;color:#fff;line-height:1.05}
.mi-top .dots{flex:1;border-bottom:1.5px dotted var(--line-2);transform:translateY(-4px);min-width:14px}
.mi-top .pr{font-family:var(--cond);font-weight:700;color:var(--sun-y);font-size:1.05rem;white-space:nowrap}
.mi-body p{font-size:.86rem;color:var(--muted);line-height:1.5;margin-top:.25rem}
.mi-body .alt{display:block;margin-top:.3rem;font-family:var(--cond);text-transform:uppercase;
  letter-spacing:.08em;font-size:.78rem;color:var(--gold)}

/* simple two-column price list (sides / drinks) */
.mini-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:.2rem 2.4rem}
.mini{display:flex;align-items:baseline;gap:.6rem;padding:.7rem 0;border-bottom:1px solid var(--line)}
.mini h4{font-family:var(--cond);font-weight:600;text-transform:uppercase;letter-spacing:.07em;
  font-size:1rem;color:var(--text)}
.mini .dots{flex:1;border-bottom:1.5px dotted var(--line-2);transform:translateY(-4px);min-width:14px}
.mini .pr{font-family:var(--cond);font-weight:700;color:var(--sun-y);font-size:1rem;white-space:nowrap}

.menu-foot{border-top:1px solid var(--line);padding-block:2.4rem;text-align:center}
.menu-foot p{font-size:.88rem;color:var(--muted-2);max-width:60ch;margin-inline:auto}

/* ---------- careers page ---------- */
.perks{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;margin-top:2.6rem}
.perk{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:1.6rem 1.4rem}
.perk .ic{width:40px;height:40px;border-radius:11px;background:rgba(242,160,7,.14);display:grid;place-content:center;margin-bottom:.9rem}
.perk .ic svg{width:19px;height:19px;color:var(--marigold)}
.perk h3{font-family:var(--display);font-size:1.4rem;color:#fff;letter-spacing:.03em;line-height:1.05;margin-bottom:.4rem}
.perk p{font-size:.9rem;color:var(--muted);line-height:1.55}

.apply-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.form-card{background:linear-gradient(180deg,var(--card),var(--ink-2));border:1px solid var(--line-2);
  border-radius:20px;padding:clamp(1.7rem,3.5vw,2.6rem)}
.form-card h2{font-family:var(--display);font-size:clamp(2rem,3.6vw,2.7rem);color:#fff;letter-spacing:.02em;
  line-height:1;margin-bottom:.5rem}
.form-card > p{color:var(--muted);font-size:.98rem;margin-bottom:1.7rem}
.field{margin-bottom:1.15rem}
.field label{display:block;font-family:var(--cond);text-transform:uppercase;letter-spacing:.13em;
  font-size:.8rem;color:var(--gold);font-weight:600;margin-bottom:.5rem}
.field input,.field select,.field textarea{
  width:100%;background:#100C0A;border:1px solid var(--line-2);border-radius:11px;
  padding:.9rem 1rem;color:var(--text);font-family:var(--body);font-size:1rem;transition:border-color .2s, background .2s}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--marigold);background:#150F0B}
.field textarea{resize:vertical;min-height:110px}
.field select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B7A794' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;background-size:18px;padding-right:2.8rem}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form-card .btn{width:100%;margin-top:.6rem}
.form-note{font-size:.84rem;color:var(--muted-2);margin-top:1rem;text-align:center}

.walkin{background:linear-gradient(180deg,var(--card),var(--ink-2));border:1px solid var(--line);
  border-radius:20px;padding:clamp(1.7rem,3.5vw,2.4rem);margin-bottom:1.4rem}
.walkin h3{font-family:var(--display);font-size:1.9rem;color:#fff;letter-spacing:.02em;margin-bottom:.6rem;line-height:1}
.walkin p{color:var(--muted);font-size:.98rem;margin-bottom:1.3rem}
.walkin .btn{width:100%}

/* ---------- story page ---------- */
.story-steps{display:grid;gap:0;margin:3rem auto 0;position:relative;max-width:800px}
.story-steps::before{content:"";position:absolute;left:27px;top:14px;bottom:14px;width:2px;
  background:linear-gradient(180deg,var(--marigold),rgba(242,160,7,.08));border-radius:2px}
.step{display:grid;grid-template-columns:56px 1fr;gap:1.6rem;padding-block:1.6rem;position:relative}
.step .num{width:56px;height:56px;border-radius:50%;background:var(--ink);border:2px solid var(--marigold);
  display:grid;place-content:center;font-family:var(--display);font-size:1.5rem;color:var(--marigold);
  position:relative;z-index:2}
.step h3{font-family:var(--display);font-size:clamp(1.7rem,3vw,2.3rem);color:#fff;letter-spacing:.02em;
  line-height:1;margin-bottom:.6rem;padding-top:.5rem}
.step p{color:var(--muted);font-size:1.02rem;line-height:1.7;max-width:60ch}

.story-hero{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.logo-plate{width:min(100%,420px);margin-inline:auto;border-radius:20px;overflow:hidden;
  border:1px solid var(--line-2);box-shadow:0 40px 80px -40px #000}
.logo-plate img{width:100%;display:block}

/* ---------- reveal (gated on .js + watchdog in app.js) ---------- */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1)}
.js .reveal.in{opacity:1;transform:none}
.js .reveal.d1{transition-delay:.08s}
.js .reveal.d2{transition-delay:.16s}
.js .reveal.d3{transition-delay:.24s}
.js .reveal.d4{transition-delay:.32s}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .reveal{opacity:1;transform:none}
}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .hero-grid{grid-template-columns:1fr;text-align:center;gap:2.5rem}
  .hero .lead{margin-inline:auto}
  .hero-cta,.hero-meta{justify-content:center}
  .hero h1 .l2{margin-left:0}
  .hero-art{order:-1}
  .grid-3,.scratch-grid,.info-grid{grid-template-columns:repeat(2,1fr)}
  .perks{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr;gap:2rem}
  .story-hero{grid-template-columns:1fr;gap:2.5rem}
  .apply-grid{grid-template-columns:1fr}
}
@media (max-width:820px){
  .brand .b-kitchen{font-size:.88rem;letter-spacing:.1em}
  .nav-links{display:none}
  .nav-cta .btn:not(.hamburger){display:none}
  .hamburger{display:flex}
  .split{grid-template-columns:1fr;gap:2.5rem}
  .split-media{order:-1}
  .menu-list{grid-template-columns:1fr;gap:.2rem}
  .menu-nav .wrap{justify-content:flex-start}
}
@media (max-width:560px){
  :root{--gut:1.25rem}
  .brand{gap:.3rem}
  .brand .b-script{font-size:1.42rem}
  .brand .b-kitchen{font-size:.72rem;letter-spacing:.06em}
  .grid-3,.scratch-grid,.info-grid,.perks{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr}
  .facts{gap:1.4rem}
  .fact b{font-size:2rem}
  .menu-cat-head h2{font-size:2rem}
  .step{grid-template-columns:44px 1fr;gap:1.1rem}
  .step .num{width:44px;height:44px;font-size:1.2rem}
  .story-steps::before{left:21px}
  .mi-thumb{width:60px;height:60px}
}