:root{
  --char:#241a13;
  --char-2:#33261a;
  --paper:#f4e9d4;
  --paper-dim:#e3d3b3;
  --annatto:#d0601c;
  --annatto-dark:#9c4413;
  --ember:#c1272d;
  --leaf:#4c6444;
  --leaf-light:#7c9a63;
  --jeep-pink:#e2577a;
  --jeep-blue:#3c7a89;
  --jeep-yellow:#e8b13a;
  --font-display:'Oswald',sans-serif;
  --font-body:'Inter',sans-serif;
  --font-mono:'JetBrains Mono',monospace;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}*{animation:none!important;transition:none!important;}}
body{
  background:var(--char);
  color:var(--paper);
  font-family:var(--font-body);
  line-height:1.5;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
h1,h2,h3,h4{font-family:var(--font-display);text-transform:uppercase;letter-spacing:0.02em;line-height:1.08;}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px;}
.eyebrow{
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--annatto);
  font-weight:700;
  display:inline-block;
  margin-bottom:10px;
}
:focus-visible{outline:2px solid var(--jeep-yellow);outline-offset:2px;}
.skip-link{position:absolute;left:-999px;top:0;background:var(--annatto);color:var(--char);padding:10px 16px;z-index:999;font-weight:700;}
.skip-link:focus{left:16px;top:16px;}

/* ---------- Jeepney stripe signature ---------- */
.stripe-bar{
  height:8px;
  width:100%;
  background:repeating-linear-gradient(
    115deg,
    var(--annatto) 0 26px,
    var(--jeep-yellow) 26px 42px,
    var(--jeep-pink) 42px 58px,
    var(--jeep-blue) 58px 74px,
    var(--leaf-light) 74px 90px
  );
}
.stripe-bar.thin{height:4px;}

/* ---------- Header ---------- */
header{position:sticky;top:0;z-index:50;background:var(--char);border-bottom:1px solid rgba(244,233,212,0.08);}
.nav-inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 24px;max-width:1180px;margin:0 auto;
}
.logo{font-family:var(--font-display);font-size:1.5rem;font-weight:700;letter-spacing:0.03em;color:var(--paper);}
.logo span{color:var(--annatto);}
nav.primary-nav ul{display:flex;gap:26px;flex-wrap:wrap;}
nav.primary-nav a{font-size:0.86rem;font-weight:500;color:var(--paper-dim);transition:color .2s;padding:4px 0;border-bottom:2px solid transparent;}
nav.primary-nav a:hover,nav.primary-nav a:focus-visible{color:var(--annatto);border-color:var(--annatto);}
nav.primary-nav a[aria-current="page"]{color:var(--annatto);border-color:var(--annatto);}
.nav-cta{
  background:var(--annatto);color:var(--char);font-weight:700;font-size:0.85rem;
  padding:10px 20px;border-radius:2px;border:none;cursor:pointer;font-family:var(--font-body);
  transition:background .2s,transform .2s;white-space:nowrap;
}
.nav-cta:hover{background:var(--jeep-yellow);transform:translateY(-1px);}
.menu-toggle{display:none;background:none;border:1px solid var(--paper-dim);color:var(--paper);padding:8px 12px;font-size:1rem;cursor:pointer;}

/* ---------- Hero (home) ---------- */
.hero{
  position:relative;
  padding:88px 24px 96px;
  background:
    radial-gradient(ellipse 700px 380px at 82% 8%, rgba(208,96,28,0.28), transparent 60%),
    radial-gradient(ellipse 500px 320px at 8% 92%, rgba(76,100,68,0.22), transparent 60%),
    var(--char);
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute;inset:0;
  background-image:
    radial-gradient(circle, rgba(244,233,212,0.05) 1px, transparent 1px);
  background-size:22px 22px;
  opacity:0.5;
  pointer-events:none;
}
.hero-inner{max-width:1180px;margin:0 auto;position:relative;display:grid;grid-template-columns:1.15fr 0.85fr;gap:48px;align-items:center;}
.hero h1{font-size:clamp(2.6rem,5.2vw,4.4rem);color:var(--paper);margin-bottom:20px;}
.hero h1 .accent{color:var(--annatto);}
.hero p.lede{font-size:1.08rem;color:var(--paper-dim);max-width:46ch;margin-bottom:32px;}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;}
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 26px;font-weight:700;font-size:0.92rem;border-radius:2px;
  cursor:pointer;border:2px solid transparent;transition:all .2s;font-family:var(--font-body);
}
.btn-primary{background:var(--annatto);color:var(--char);}
.btn-primary:hover{background:var(--jeep-yellow);}
.btn-ghost{border-color:var(--paper-dim);color:var(--paper);background:transparent;}
.btn-ghost:hover{border-color:var(--annatto);color:var(--annatto);}

/* Skewer diagram - signature visual */
.skewer-panel{position:relative;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;}
.skewer-panel svg{width:100%;height:100%;}
.smoke{animation:drift 6s ease-in-out infinite;transform-origin:center;}
.smoke.s2{animation-delay:-2s;}
.smoke.s3{animation-delay:-4s;}
@keyframes drift{
  0%{transform:translateY(0) scale(1);opacity:0.35;}
  50%{transform:translateY(-14px) scale(1.06);opacity:0.6;}
  100%{transform:translateY(0) scale(1);opacity:0.35;}
}
.ember-dot{animation:flicker 2.4s ease-in-out infinite;}
.ember-dot.e2{animation-delay:-0.8s;}
.ember-dot.e3{animation-delay:-1.6s;}
@keyframes flicker{0%,100%{opacity:0.7;}50%{opacity:1;}}

/* ---------- Page hero (subpages) ---------- */
.page-hero{
  position:relative;padding:64px 24px 56px;
  background:
    radial-gradient(ellipse 620px 320px at 88% 0%, rgba(208,96,28,0.24), transparent 60%),
    var(--char);
  border-bottom:1px solid rgba(244,233,212,0.08);
}
.page-hero .wrap{position:relative;}
.page-hero h1{font-size:clamp(2.1rem,4.2vw,3.2rem);color:var(--paper);margin-bottom:14px;}
.page-hero p.lede{font-size:1.02rem;color:var(--paper-dim);max-width:62ch;}
.breadcrumbs{display:flex;gap:8px;flex-wrap:wrap;font-family:var(--font-mono);font-size:0.76rem;color:var(--paper-dim);margin-bottom:18px;text-transform:uppercase;letter-spacing:0.03em;}
.breadcrumbs a{color:var(--paper-dim);}
.breadcrumbs a:hover{color:var(--annatto);}
.breadcrumbs .sep{color:rgba(244,233,212,0.35);}
.breadcrumbs .current{color:var(--jeep-yellow);}

/* stat strip */
.stat-strip{background:var(--char-2);border-top:1px solid rgba(244,233,212,0.08);border-bottom:1px solid rgba(244,233,212,0.08);}
.stat-strip .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;padding:22px 24px;gap:18px;}
.stat{font-family:var(--font-mono);font-size:0.82rem;color:var(--paper-dim);display:flex;align-items:center;gap:8px;}
.stat b{color:var(--jeep-yellow);font-size:1.05rem;}

/* ---------- Section shell ---------- */
section{padding:88px 0;}
section.tight{padding:56px 0;}
.section-head{max-width:640px;margin-bottom:48px;}
.section-head h2{font-size:clamp(1.9rem,3.4vw,2.7rem);color:var(--paper);}
.section-head p{color:var(--paper-dim);margin-top:14px;font-size:1.02rem;}
.on-paper{background:var(--paper);color:var(--char);}
.on-paper .section-head h2{color:var(--char);}
.on-paper .section-head p{color:#5c4d38;}
.on-paper .eyebrow{color:var(--annatto-dark);}

/* ---------- Prose (about/blog/policy content) ---------- */
.prose{max-width:74ch;}
.prose p{color:var(--paper-dim);margin-bottom:16px;font-size:1rem;}
.prose h2{color:var(--paper);font-size:1.6rem;margin:36px 0 14px;}
.prose h3{color:var(--paper);font-size:1.2rem;margin:26px 0 10px;}
.prose ul,.prose ol{margin:0 0 18px 22px;color:var(--paper-dim);}
.prose ul{list-style:disc;}
.prose ol{list-style:decimal;}
.prose li{margin-bottom:8px;}
.prose a{color:var(--jeep-yellow);text-decoration:underline;text-underline-offset:3px;}
.prose a:hover{color:var(--annatto);}
.on-paper .prose p,.on-paper .prose ul,.on-paper .prose ol{color:#5c4d38;}
.on-paper .prose h2,.on-paper .prose h3{color:var(--char);}
.on-paper .prose a{color:var(--annatto-dark);}
.callout{
  background:var(--char-2);border-left:4px solid var(--annatto);padding:18px 22px;margin:24px 0;
  color:var(--paper-dim);font-size:0.94rem;
}
.on-paper .callout{background:var(--paper-dim);color:#4a3b28;}

/* ---------- Menu ---------- */
.menu-tabs{
  display:flex;gap:10px;flex-wrap:wrap;margin-bottom:44px;
  border-bottom:1px solid rgba(36,26,19,0.15);padding-bottom:20px;
}
.menu-tabs button{
  font-family:var(--font-mono);font-size:0.76rem;letter-spacing:0.04em;text-transform:uppercase;
  background:transparent;border:1px solid rgba(36,26,19,0.25);color:var(--char);
  padding:8px 14px;border-radius:20px;cursor:pointer;transition:all .2s;font-weight:500;
}
.menu-tabs button:hover{border-color:var(--annatto);color:var(--annatto-dark);}
.menu-tabs button.active{background:var(--char);color:var(--paper);border-color:var(--char);}

.menu-category{margin-bottom:60px;scroll-margin-top:90px;}
.menu-category h3{font-size:1.5rem;color:var(--char);margin-bottom:6px;display:flex;align-items:center;gap:10px;}
.menu-category h3::before{content:"";width:22px;height:3px;background:var(--annatto);display:inline-block;}
.menu-category .cat-note{font-size:0.88rem;color:#6b5c46;margin-bottom:22px;font-style:italic;}
.menu-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:rgba(36,26,19,0.15);border:1px solid rgba(36,26,19,0.15);}
.menu-item{background:var(--paper);padding:20px 22px;display:flex;flex-direction:column;gap:6px;}
.item-top{display:flex;justify-content:space-between;align-items:baseline;gap:14px;}
.item-name{font-weight:700;font-size:1rem;color:var(--char);}
.item-price{font-family:var(--font-mono);font-weight:700;color:var(--annatto-dark);white-space:nowrap;font-size:1rem;}
.item-desc{font-size:0.87rem;color:#6b5c46;}
.badge{
  display:inline-block;font-family:var(--font-mono);font-size:0.62rem;letter-spacing:0.06em;
  text-transform:uppercase;padding:2px 8px;border-radius:10px;font-weight:700;margin-right:6px;width:fit-content;
}
.badge.best{background:var(--jeep-yellow);color:var(--char);}
.badge.spicy{background:var(--ember);color:var(--paper);}
.badge.new{background:var(--leaf);color:var(--paper);}

/* ---------- Unli rice banner (generic promo banner) ---------- */
.unli-banner{
  background:linear-gradient(120deg,var(--annatto-dark),var(--annatto));
  padding:56px 0;position:relative;overflow:hidden;
}
.unli-banner .wrap{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;}
.unli-banner h2{font-size:clamp(1.8rem,3.6vw,2.6rem);color:var(--char);max-width:520px;}
.unli-banner p{color:rgba(36,26,19,0.8);margin-top:10px;max-width:44ch;font-size:0.98rem;}
.unli-banner .btn-primary{background:var(--char);color:var(--paper);}
.unli-banner .btn-primary:hover{background:#3a2b1c;}

/* ---------- Story ---------- */
.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start;}
.story-grid p{color:var(--paper-dim);margin-bottom:16px;font-size:1rem;}
.timeline{border-left:2px solid rgba(244,233,212,0.15);padding-left:24px;display:flex;flex-direction:column;gap:26px;}
.timeline-item .yr{font-family:var(--font-mono);color:var(--jeep-yellow);font-weight:700;font-size:0.9rem;}
.timeline-item p{margin-top:4px;color:var(--paper-dim);font-size:0.92rem;}

/* ---------- Fiesta / group meals ---------- */
.fiesta-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.fiesta-card{
  background:var(--char-2);border:1px solid rgba(244,233,212,0.1);padding:32px 26px;
  border-top:4px solid var(--annatto);transition:transform .2s,border-color .2s;
}
.fiesta-card:hover{transform:translateY(-4px);border-top-color:var(--jeep-yellow);}
.fiesta-card h3{font-size:1.3rem;color:var(--paper);margin-bottom:8px;}
.fiesta-card .price{font-family:var(--font-mono);font-size:1.6rem;color:var(--jeep-yellow);font-weight:700;margin:12px 0;}
.fiesta-card p{color:var(--paper-dim);font-size:0.9rem;margin-bottom:6px;}
.fiesta-card .serves{font-family:var(--font-mono);font-size:0.75rem;color:var(--leaf-light);text-transform:uppercase;letter-spacing:0.04em;}

/* ---------- Locations ---------- */
.locations-panel{
  display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;
}
.channel-list{display:flex;flex-direction:column;gap:14px;}
.channel-list li{
  display:flex;justify-content:space-between;align-items:center;
  padding:16px 20px;background:var(--char-2);border:1px solid rgba(244,233,212,0.1);
}
.channel-list .cname{font-weight:600;}
.channel-list .cnote{font-family:var(--font-mono);font-size:0.78rem;color:var(--jeep-yellow);}

.region-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
.region-card{
  background:var(--char-2);border:1px solid rgba(244,233,212,0.1);padding:28px 26px;border-top:4px solid var(--leaf);
}
.region-card h3{font-size:1.25rem;color:var(--paper);margin-bottom:10px;}
.region-card p{color:var(--paper-dim);font-size:0.9rem;margin-bottom:14px;}
.region-card ul{display:flex;flex-wrap:wrap;gap:8px;}
.region-card li{
  font-family:var(--font-mono);font-size:0.74rem;color:var(--paper-dim);
  background:rgba(244,233,212,0.06);border:1px solid rgba(244,233,212,0.12);padding:4px 10px;border-radius:14px;
}

/* ---------- Data table (nutrition, comparisons) ---------- */
.data-table-wrap{overflow-x:auto;border:1px solid rgba(36,26,19,0.15);}
table.data-table{width:100%;border-collapse:collapse;background:var(--paper);color:var(--char);font-size:0.92rem;min-width:640px;}
table.data-table caption{text-align:left;padding:14px 18px;font-family:var(--font-mono);font-size:0.76rem;color:#6b5c46;background:var(--paper-dim);}
table.data-table th,table.data-table td{padding:14px 18px;text-align:left;border-bottom:1px solid rgba(36,26,19,0.12);}
table.data-table thead th{
  font-family:var(--font-mono);font-size:0.72rem;letter-spacing:0.05em;text-transform:uppercase;
  background:var(--char);color:var(--paper);
}
table.data-table tbody tr:hover{background:var(--paper-dim);}
table.data-table td.num{font-family:var(--font-mono);white-space:nowrap;}

/* ---------- Steps list (delivery / franchise how-to) ---------- */
.steps-list{display:flex;flex-direction:column;gap:22px;counter-reset:step;}
.steps-list li{
  list-style:none;display:flex;gap:18px;padding:20px;background:var(--char-2);
  border:1px solid rgba(244,233,212,0.1);align-items:flex-start;
}
.steps-list li::before{
  counter-increment:step;content:counter(step);
  font-family:var(--font-mono);font-weight:700;font-size:1rem;color:var(--char);
  background:var(--jeep-yellow);width:34px;height:34px;flex-shrink:0;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}
.steps-list h3{font-size:1rem;color:var(--paper);margin-bottom:4px;}
.steps-list p{font-size:0.9rem;color:var(--paper-dim);}

/* ---------- Blog ---------- */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.blog-card-wrap{display:flex;}
.blog-card{background:var(--char-2);border:1px solid rgba(244,233,212,0.1);display:flex;flex-direction:column;flex:1;transition:transform .2s,border-color .2s;}
.blog-card .blog-card-body time{font-family:var(--font-mono);font-size:0.72rem;color:var(--paper-dim);}
.blog-card:hover{transform:translateY(-4px);border-color:var(--annatto);}
.blog-card .blog-card-body{padding:26px 24px;display:flex;flex-direction:column;gap:10px;flex:1;}
.blog-card .tag{font-family:var(--font-mono);font-size:0.68rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--jeep-yellow);}
.blog-card h2{font-size:1.12rem;color:var(--paper);line-height:1.3;}
.blog-card p{font-size:0.88rem;color:var(--paper-dim);}
.blog-card .read-more{font-family:var(--font-mono);font-size:0.78rem;color:var(--annatto);margin-top:auto;}
.blog-card:hover .read-more{color:var(--jeep-yellow);}
.blog-meta{font-family:var(--font-mono);font-size:0.76rem;color:var(--paper-dim);margin-bottom:18px;display:flex;gap:14px;flex-wrap:wrap;}
.blog-article img,.blog-article figure{margin:24px 0;}

/* ---------- FAQ ---------- */
.faq-item{border-bottom:1px solid rgba(36,26,19,0.15);}
.faq-q{
  width:100%;text-align:left;background:none;border:none;cursor:pointer;
  padding:22px 0;display:flex;justify-content:space-between;align-items:center;gap:20px;
  font-family:var(--font-display);font-size:1.08rem;color:var(--char);text-transform:none;letter-spacing:0;
}
.faq-q .plus{font-family:var(--font-mono);font-size:1.3rem;color:var(--annatto);transition:transform .25s;flex-shrink:0;}
.faq-item.open .plus{transform:rotate(45deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;}
.faq-a p{padding-bottom:22px;color:#5c4d38;font-size:0.95rem;max-width:70ch;}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;}
.contact-card{background:var(--char-2);border:1px solid rgba(244,233,212,0.1);padding:28px;}
.contact-card h2{font-size:1.05rem;color:var(--paper);margin-bottom:10px;}
.contact-card p{color:var(--paper-dim);font-size:0.92rem;margin-bottom:6px;}
.contact-card a{color:var(--jeep-yellow);text-decoration:underline;text-underline-offset:3px;}

/* ---------- Footer ---------- */
footer{background:var(--char);padding:60px 0 30px;border-top:1px solid rgba(244,233,212,0.08);}
.footer-grid{display:grid;grid-template-columns:2fr 1fr;gap:40px;margin-bottom:40px;}
.footer-grid h3{font-size:0.85rem;color:var(--paper);margin-bottom:16px;letter-spacing:0.05em;}
.footer-grid ul{display:flex;flex-direction:column;gap:10px;}
.footer-grid a{color:var(--paper-dim);font-size:0.88rem;transition:color .2s;}
.footer-grid a:hover{color:var(--annatto);}
.footer-brand p{color:var(--paper-dim);font-size:0.88rem;max-width:32ch;margin-top:10px;}
.footer-bottom{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  padding-top:24px;border-top:1px solid rgba(244,233,212,0.08);
  font-size:0.78rem;color:rgba(244,233,212,0.45);
}
.footer-bottom a{color:rgba(244,233,212,0.6);}
.footer-bottom a:hover{color:var(--annatto);}
.disclaimer{font-size:0.76rem;color:rgba(244,233,212,0.35);max-width:900px;margin-top:16px;line-height:1.6;}

/* ---------- Reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease;}
.reveal.in{opacity:1;transform:translateY(0);}

/* ---------- Responsive ---------- */
@media (max-width:920px){
  nav.primary-nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--char);border-bottom:1px solid rgba(244,233,212,0.08);padding:12px 24px;}
  nav.primary-nav ul{flex-direction:column;gap:4px;}
  nav.primary-nav a{display:block;padding:10px 0;}
  header{position:sticky;}
  .menu-toggle{display:block;}
  .hero-inner{grid-template-columns:1fr;}
  .skewer-panel{max-width:280px;margin:0 auto;order:-1;}
  .story-grid,.locations-panel,.contact-grid{grid-template-columns:1fr;gap:36px;}
  .fiesta-grid,.blog-grid,.region-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .menu-grid{grid-template-columns:1fr;}
}
@media (max-width:560px){
  .hero{padding:64px 20px 72px;}
  .page-hero{padding:48px 20px 40px;}
  section{padding:64px 0;}
  section.tight{padding:44px 0;}
  .stat-strip .wrap{flex-direction:column;align-items:flex-start;}
  .footer-grid{grid-template-columns:1fr;}
  .menu-tabs{overflow-x:auto;flex-wrap:nowrap;padding-bottom:16px;}
}
