:root{
  /* darker palette - use a consistent deep black */
  --bg:#000000; /* page background (pure black) */
  --ink:#f6f7f8;
  --muted:#bfc4cc;
  --brand:#ff3b00;
  --brand-2:#ff9a00;
  /* announce background can be adjusted here */
  --announce-bg: linear-gradient(90deg,#d94b00,#ff6a00);
  /* default larger value to prevent initial overlap while JS measures real height */
  --announce-height:88px;
  --util-height:48px;
  --header-height:64px;
  /* small adjustable buffer between header stack and anchored headings */
  --anchor-buffer: 0px;
  --border:rgba(255,255,255,0.06);
  /* surface should match --bg for a uniform black look */
  --surface:#000000;
  --text-on-white:#111217; /* dark text for white surfaces */
  /* logo font sizes: desktop vs mobile */
  --logo-desktop:50px;
  --logo-mobile:30px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:linear-gradient(180deg,var(--bg),var(--surface));color:var(--ink);font-family:'Staatliches', 'Alegreya', Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;overflow-x:hidden;text-transform:uppercase}
/* Reserve vertical space at top equal to the measured stacked header height so fixed top bars don't cover content.
  Use --stack-height (set by JS) and default to 0 to avoid large gaps before JS runs. */
body{padding-top:var(--stack-height, 0px);}
/* smooth in-page scrolling */
html{scroll-behavior:smooth}
img{max-width:100%;display:block}
a{color:var(--brand);text-decoration:none}
a:hover{opacity:.92}
.container{width:min(1240px,92%);margin-inline:auto;padding-inline:4px}
.header-spacer{height:8px}
.header-spacer{height:8px}
.header-spacer{height:8px}
/* Keep header fixed to the viewport so the stacked bars remain visible while scrolling */
header.nav{position:fixed;top:0;left:0;right:0;z-index:110;background:linear-gradient(180deg,rgba(0,0,0,0.55),rgba(0,0,0,0.35));backdrop-filter:blur(6px);border-bottom:1px solid var(--border)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0}

/* Ensure the visible nav-inner (logo + links) is pushed below the stacked util and announce bars
  using the measured CSS vars so it never sits on top of them (important for small screens). */
/* nav-inner padding is handled dynamically; avoid large default push that causes desktop gaps */
.logo{display:flex;align-items:center;gap:12px;min-width:0;flex:0 1 auto}
.logo img{height:96px}
.logo strong{font-weight:900;letter-spacing:.2px;font-size:34px;display:inline-block;max-width:100%;vertical-align:middle}
/* Brand wrap stacks the brand text with a small pill under the logo image */
.logo .brand-wrap{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.logo .brand-wrap .pill{margin:0;padding:0;font-size:12px;line-height:1;background:transparent;color:inherit;border:0}
/* Prevent the logo text from overlapping nav links: truncate if it exceeds the max-width */
.logo .brand-chick,.logo .brand-rest{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.logo .brand-chick{color:var(--brand);margin-right:4px;font-size:clamp(20px,4.5vw,var(--logo-desktop))}
.logo .brand-rest{color:var(--brand);opacity:1;font-weight:800;font-size:clamp(20px,4.5vw,var(--logo-desktop))}
.navlinks{display:flex;gap:18px;align-items:center;flex:1 1 auto;justify-content:flex-end;min-width:0}
.navlinks a{position:relative;padding:8px 0;color:var(--brand)}
.navlinks a:after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--brand);transition:width .2s}
.navlinks a:hover{color:var(--ink)}
.navlinks a:hover:after{width:100%}
.nav-toggle{display:none}
.btn{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#23140a;padding:12px 18px;border-radius:999px;font-weight:800;border:0;cursor:pointer;box-shadow:0 10px 28px rgba(255,59,0,.2);transition:transform .18s ease,box-shadow .18s ease}
.btn:hover{transform:translateY(-3px);box-shadow:0 18px 32px rgba(0,0,0,0.25)}
.btn.secondary{background:#fff;border:1px solid var(--border);box-shadow:none;color:var(--brand)}

/* Navigation visual polish */
.nav-inner{padding:18px 0}
.navlinks{gap:28px}
.navlinks a{font-size:18px;letter-spacing:1.6px;padding:6px 2px}

/* Emphasize the Order Online button in the nav */
.navlinks .btn{padding:12px 22px;border-radius:999px;font-size:15px;box-shadow:0 12px 36px rgba(255,59,0,0.28),0 0 30px rgba(255,90,28,0.12) inset}
.navlinks .btn{color:#000}
.navlinks .btn:hover{box-shadow:0 20px 48px rgba(255,59,0,0.36),0 0 40px rgba(255,120,40,0.14) inset;transform:translateY(-4px)}

/* subtle active/underline animation for nav links */
.navlinks a:after{height:3px;background:linear-gradient(90deg,var(--brand),var(--brand-2));transition:width .22s cubic-bezier(.2,.9,.2,1)}
.navlinks a.active{color:var(--ink)}

/* make nav items more tappable on mobile while keeping desktop layout */
@media (max-width:980px){
  .navlinks a{font-size:16px}
}

.util-bar{position:static;top:auto;left:0;right:0;z-index:130;background:linear-gradient(180deg, rgba(0,0,0,0.78), rgba(0,0,0,0.6));backdrop-filter:blur(8px);color:var(--ink);} 
.util-inner{display:flex;align-items:center;justify-content:space-between;padding:6px 0;font-weight:700;font-size:14px}
.util-link{color:var(--ink);margin-right:0;text-decoration:none}
.util-link:hover{opacity:.9}
.util-left,.util-right{display:flex;align-items:center;gap:6px}

/* Force the left util group to hug the left inside .util-inner */
.util-inner .util-left{margin-inline-start:0;margin-right:auto}

/* Ensure util icons are compact and consistent */
.util-icon{width:34px;height:34px;padding:0}
.util-icon img{width:18px;height:18px;display:block}

.util-icon{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:8px;background:transparent;color:var(--ink)}
.util-icon svg{display:block}
.util-icon img{display:block;width:18px;height:18px}
.util-icon:hover{background:rgba(255,255,255,0.04)}
.util-icon[data-action="fb"]{color:#1877F2;background:transparent}
.util-icon[data-action="tiktok"]{color:inherit;background:transparent}
.util-icon[data-action="tiktok"]:hover{opacity:0.95}

/* modal for util actions */
.util-modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:200}
.util-modal[aria-hidden="false"]{display:flex}
.util-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,0.5)}
.util-modal-panel{position:relative;background:linear-gradient(180deg,#fff,#fafafa);color:#111;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,0.4);max-width:560px;width:92%;padding:18px;z-index:2}
.util-modal-close{position:absolute;right:10px;top:8px;background:transparent;border:0;font-size:28px;cursor:pointer}
.util-modal a{color:var(--brand);}


.announce{position:static;top:auto;left:0;right:0;z-index:120;background:var(--announce-bg);color:#fff;padding:10px 12px;font-weight:800;letter-spacing:.3px;white-space:normal;line-height:1.2;text-align:center;overflow-wrap:break-word}
.announce a{color:#fff;text-decoration:underline}

.hero{padding:12px 0 18px;background:linear-gradient(180deg,rgba(0,0,0,0.28),var(--surface));}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:14px;align-items:start}
.hero h1{font-size:38px;line-height:1.02;margin:6px 0 6px;font-family:'Staatliches', 'Alegreya', serif;font-weight:900}
.hero p.lead{font-size:15px;color:var(--muted);max-width:64ch}
.hero-media{border-radius:20px;overflow:hidden;border:1px solid var(--border);min-height:0;background:#0f0f10}
.hero-media .bg{height:auto;min-height:0;background-size:cover;background-position:center;position:relative;aspect-ratio:16/9}
.hero-media .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,0.15),rgba(0,0,0,0.45));mix-blend-mode:multiply}

.section{padding:32px 0}
.section.bg-hero{position:relative;padding:80px 0;display:block}
.section.bg-hero .container{position:relative;z-index:2}
.section.bg-hero::before{content:"";position:absolute;inset:0;background:var(--bg-image, var(--bg));background-size:cover;background-position:center;background-repeat:no-repeat;z-index:1}
.section.bg-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0.45),rgba(0,0,0,0.55));z-index:1}
.section.bg-hero h2,.section.bg-hero p{color:#fff}
.section.bg-hero .rail{opacity:1}
@media (max-width:980px){
  .section.bg-hero{padding:56px 0}
}
@media (max-width:640px){
  .section.bg-hero{padding:44px 0}
}

.hero.bg-hero{position:relative;padding:48px 0;background:transparent}
.hero.bg-hero .container{position:relative;z-index:2}
.hero.bg-hero::before{content:"";position:absolute;inset:0;background:var(--bg-image, var(--bg));background-size:cover;background-position:center;background-repeat:no-repeat;z-index:1}
.hero.bg-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0.18),rgba(0,0,0,0.45));z-index:1}
.hero.bg-hero h1,.hero.bg-hero p.lead,.hero.bg-hero .pill{color:#fff}
.hero.bg-hero .pill{background:rgba(255,255,255,0.06);color:#fff;border:1px solid rgba(255,255,255,0.06)}
/* vertically center the grid items and limit hero image height to prevent large gaps */
.hero-grid{align-items:center}
/*.hero-media img{max-height:420px;object-fit:cover;border-radius:16px}*/
.section h2{font-size:36px;margin:0 0 8px;font-family:'Staatliches', 'Alegreya', serif;font-weight:900}
.section p.sub{color:var(--muted);margin:0 0 16px}

.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:16px;box-shadow:0 8px 24px rgba(10,12,28,.04);color:var(--text-on-white)}

.tile{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--border);height:340px;background:#0b0b0b;transition:transform .25s ease,box-shadow .25s ease}
.tile:hover{transform:translateY(-6px);box-shadow:0 20px 40px rgba(0,0,0,0.35)}
.tile.bg{background-size:cover;background-position:center;background-repeat:no-repeat}
.tile .cap{position:absolute;left:12px;bottom:12px;background:rgba(255,255,255,.94);padding:6px 14px;border-radius:999px;font-weight:900;color:var(--brand)}

.rail{display:flex;gap:12px;overflow-x:auto;padding:8px 6px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.rail > *{scroll-snap-align:start;flex:0 0 auto}

/* Instagram feed: make tiles look like posts with consistent aspect and snap */
.rail.ig-rail{padding:12px 6px;gap:14px}
.rail.ig-rail .img{flex:0 0 280px;scroll-snap-align:center;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,0.04);background:#0b0b0d}
.rail.ig-rail .img img{width:100%;height:100%;object-fit:cover;display:block}
.rail.ig-rail .tile{flex:0 0 320px;height:560px;scroll-snap-align:center;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,0.04);background:#0b0b0d}

/* Lightbox preview styles (re-using util-modal) */
.preview-media{max-width:960px;width:92%;max-height:86vh;border-radius:12px;overflow:hidden;background:#000}
.preview-media img,.preview-media video{width:100%;height:100%;object-fit:contain;display:block}

/* Vertical / portrait video handling for YouTube embeds */
.embed-yt.portrait{max-width:420px;min-width:260px;aspect-ratio:9/16;border-radius:12px}
.embed-yt.portrait iframe{border-radius:12px}
.embed-yt.landscape{aspect-ratio:16/9}

@media (max-width:640px){
  .rail.ig-rail .img{flex:0 0 72vw}
  .rail.ig-rail .tile{flex:0 0 78vw;height:78vw}
}

.gallery .img{width:100%;max-width:560px;aspect-ratio:16/9;border-radius:14px;overflow:hidden;border:1px solid var(--border);background:#fff;color:var(--text-on-white);flex:0 0 auto}
.gallery .img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .32s ease;border-radius:inherit}
.gallery .img img:hover{transform:scale(1.03)}

/* Ensure anchored sections place their headings below the sticky stacked bars */
section[id], [id]{
  /* align section headings directly below the stacked sticky bars; use measured --stack-height */
  scroll-margin-top: calc(var(--stack-height, 0px) + var(--anchor-buffer));
}

/* pill used in hero - ensure readable on white background */
.pill{display:inline;vertical-align:middle;padding:0;color:var(--muted);font-weight:700}

.embed-yt{position:relative;width:100%;max-width:560px;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#000;border:1px solid var(--border)}
.embed-yt iframe{position:absolute;inset:0;width:100%;height:100%;}
.embed-vid{position:relative;width:100%;max-width:560px;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#000;border:1px solid var(--border)}
.embed-vid video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.embed-vid video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* Featured video styling similar to burger25: large, rounded, lifted card */
.video-hero{display:flex;align-items:center;justify-content:center;padding:8px 0}
.embed-yt.featured{max-width:900px;width:100%;aspect-ratio:1/1;border-radius:22px;overflow:hidden;border:1px solid rgba(255,255,255,0.06);box-shadow:0 30px 80px rgba(2,6,23,0.6);background:#000}
.embed-yt.featured iframe{border-radius:22px;position:absolute;inset:0;width:100%;height:100%}
@media (max-width:980px){
  .embed-yt.featured{max-width:760px}
}
@media (max-width:640px){
  .embed-yt.featured{max-width:92vw;border-radius:14px}
}



.footer{padding:36px 0;border-top:1px solid var(--border);color:var(--muted);background:linear-gradient(180deg,var(--surface),#0b0b0b)}
.footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:18px}

/* Footer-specific logo sizing and link colors to prevent overlap */
.footer .logo{max-width:100%;gap:8px}
.footer .logo img{height:40px}
.footer .logo strong{font-size:18px;line-height:1;margin:0}
.footer .logo .brand-chick,.footer .logo .brand-rest{font-size:18px}
.footer .logo .brand-chick{margin-right:6px}
.footer a{color:#fff}
.footer a:hover{opacity:.9}

@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:18px}
  .grid-3{grid-template-columns:1fr 1fr}
  .grid-2{grid-template-columns:1fr}
}
@media (max-width:640px){
  /* Make the mobile dropdown start directly under the stacked header bars.
     The header is already positioned at calc(var(--announce-height) + var(--util-height)),
     so placing the dropdown at that value aligns it flush beneath the header. */
  /* mobile-specific variable fallbacks to avoid large initial gaps while JS measures heights */
  :root{--announce-height:40px;--util-height:44px;--header-height:64px}

  .navlinks{display:none;position:absolute;top:100%;right:12px;background:var(--surface);border:1px solid var(--border);padding:12px;border-radius:12px;flex-direction:column;min-width:200px;max-width:86vw}
  .navlinks a{padding:8px 0;color:var(--brand)}
  .nav-toggle{display:inline-flex;background:transparent;border:0;color:var(--ink);font-size:24px;cursor:pointer;margin:0;padding:0}
  /* Position the dropdown directly under the header element to avoid gaps.
    Using top:100% positions it at the bottom edge of the header; a tiny
    negative translateY removes any hairline border gap. */
  .navlinks{position:absolute;right:12px}
  header.nav .navlinks{top:100%;}
  header.nav .navlinks{transform:translateY(-1px)}
  header.nav.nav-open .navlinks{display:flex}
  /* smaller logo image on mobile but keep text larger than before */
  .logo img{height:56px}
  .logo strong{font-size:20px}

  /* ensure stacked header children don't visually overlap: give breathing room on mobile */
  /* remove extra vertical margins so stacked bars sit flush on mobile */
  header.nav > .util-bar{display:block;margin-bottom:0}
  header.nav > .announce{display:block;margin-bottom:0}
  header.nav .nav-inner{padding-top:0}

  /* ensure the nav toggle and util icons stay above the dropdown and any content */
  .nav-toggle{z-index:220}
  .util-bar{z-index:210}
  .announce{z-index:200}
  header.nav{z-index:230}
  .logo .brand-chick{font-size:var(--logo-mobile)}
  .logo .brand-rest{font-size:var(--logo-mobile)}
  /* keep brand-wrap stacked on small screens */
  .logo .brand-wrap{gap:2px}
  /* ensure nav links wrap and stack neatly */
  .navlinks{flex-wrap:wrap}
  .grid-3{grid-template-columns:1fr}
}

/* Footer mobile fixes: stack columns and increase spacing to avoid overlap */
@media (max-width:640px){
  .footer .cols{grid-template-columns:1fr;gap:14px}
  .footer .cols > div{padding-bottom:6px}
  .footer a{display:inline-block;margin-bottom:8px}
  .footer .logo{align-items:flex-start}
}

/* Restore Alegreya Black for brand and major headings (override global Staatliches and uppercase) */
.logo strong,
.logo .brand-chick,
.logo .brand-rest,
.logo .brand-wrap .pill,
.hero h1,
.section h2 {
  font-family: 'Alegreya', serif;
  font-weight: 900;
  text-transform: none; /* keep natural case for these key headings */
  letter-spacing: 0.2px;
}

/* For hero sections that should keep sizes but not heavy weight, reset weight to normal
   Keep font-family and sizing as-is elsewhere; this specifically targets our hero content
   so it appears unbolded while preserving existing sizes and font choices. */
.hero.bg-hero .cnc-kicker,
.hero.bg-hero .cnc-title,
.hero.bg-hero .cnc-lede,
.hero.bg-hero .cnc-sub,
.hero.bg-hero h1,
.hero.bg-hero h2 {
  font-weight: 400;
}


/* ====== OUR FOOD – BASE ====== */
.cnc-ourfood{
  --cnc-red:#000000;          /* Primary black background */
  --cnc-dark:#111111;         /* Text on light */
  --cnc-light:#ffffff;        /* Text on dark */
  --cnc-ink:#f7f7f7;          /* Soft light bg */
  --cnc-accent:#000000;       /* Buttons/accents */
  --cnc-radius:18px;
  --cnc-shadow:0 10px 30px rgba(0,0,0,.18);
  background: var(--cnc-red);
  color: var(--cnc-light);
  position: relative;
  overflow: hidden;
  padding: clamp(32px, 5vw, 64px) 0;
}

/* Tighten the top gap when the our-food section immediately follows the hero */
.hero + .cnc-ourfood{ padding-top:20px }
.cnc-ourfood::before{
  /* subtle burger/chicken pattern vibe */
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(ellipse at 20% -10%, rgba(255,255,255,.08), transparent 40%),
              radial-gradient(ellipse at 90% 10%, rgba(0,0,0,.08), transparent 45%);
  pointer-events:none;
}
.cnc-wrap{ width:min(1240px,92%); margin-inline:auto; padding-inline:4px; position:relative; z-index:1; }

/* ====== HEADER ====== */
.cnc-head{ max-width: none; width:100%; margin: 0 0 28px 0; text-align:left; }
.cnc-kicker{
  text-transform:uppercase; letter-spacing:.12em; font-weight:700;
  margin:0 0 8px; opacity:.9;
}
.cnc-title{
  font-size: clamp(36px, 6vw, 72px);
  line-height: 1.02; margin:.1em 0 .3em; font-weight:900; text-transform:uppercase;
}
.cnc-lede{
  font-size: clamp(16px, 2.2vw, 20px); line-height:1.6; margin:0 0 10px;
}
.cnc-sub{
  font-size: clamp(15px, 2vw, 18px); line-height:1.6; opacity:.95;
}

/* ====== GRID / CARDS ====== */
.cnc-grid{
  display:grid; gap:22px; margin: 28px 0 18px;
  grid-template-columns: 1fr;
}
@media (min-width: 840px){
  .cnc-grid{ grid-template-columns: repeat(3, 1fr); }
}
.cnc-card{
  background: var(--cnc-light); color: var(--cnc-dark);
  border-radius: var(--cnc-radius);
  overflow:hidden; box-shadow: var(--cnc-shadow);
  display:flex; flex-direction:column; min-height:100%;
}
.cnc-fig{ aspect-ratio: 4/3; overflow:hidden; border-radius:16px; margin-inline:18px; }
.cnc-fig img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:inherit; }
.cnc-card-body{ padding:18px 18px 16px; display:flex; flex-direction:column; justify-content:center; gap:8px; }

/* Make card images larger on wider viewports so they feel more prominent and align with text gutters */
@media (min-width: 980px){
  .cnc-fig{ min-height:300px; }
}
.cnc-card-title{
  font-size: clamp(20px, 2.4vw, 24px); margin: 2px 0 10px; font-weight:800;
}
.cnc-bullets{ margin: 10px 0 0 18px; }
.cnc-bullets li{ margin: 6px 0; }

/* ====== HEAT SCALE ====== */
.cnc-heat{ display:flex; align-items:center; gap:10px; margin-top:12px; }
.cnc-heat-label{ font-weight:700; font-size:14px; }
.cnc-heat-scale{ display:flex; gap:8px; list-style:none; margin:0; padding:0; }
.cnc-heat-scale li{
  width:18px; height:18px; border-radius:50%;
  background: linear-gradient(180deg, #ffd36a, #ff7a00);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.06);
}
.cnc-heat-scale li:nth-child(3){ background: linear-gradient(180deg, #ffb36a, #ff3b2e); }
.cnc-heat-scale li:nth-child(4){ background: linear-gradient(180deg, #ff9a6a, #b10000); }

/* ====== TRUST BLURB ====== */
.cnc-trust{
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--cnc-radius);
  padding: 16px 18px;
  margin: 18px 0 26px;
  font-size: clamp(14px, 1.9vw, 16px);
}

/* ====== CTA ====== */
.cnc-cta{ text-align:center; }
.cnc-btn{
  display:inline-block; text-decoration:none; font-weight:900;
  background: var(--cnc-accent); color: var(--cnc-light);
  padding: 14px 26px; border-radius: 999px;
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
  text-transform:uppercase; letter-spacing:.06em;
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}
.cnc-btn:hover{ transform: translateY(-1px); box-shadow: 0 10px 26px rgba(0,0,0,.3); opacity:.95; }
.cnc-btn:active{ transform: translateY(0); box-shadow: 0 6px 14px rgba(0,0,0,.22); }