/* ============================================================
THE NAR GRILL — Brand Design System
Fire orange / Black / White. Bold. Authentic. Never generic.
Display: Montserrat (ExtraBold/Black) — single-story, geometric, bold
Body: Inter — clean, warm, legible
Signature motif: the "dividing line" — Woodward Ave splitting
East vs West, echoed as a street-line rule through every section.
============================================================ */
/* Fonts loaded via + in each page's
for faster rendering (an @import here would block first paint). */
:root{
--nar-black:#000000;
--nar-black-soft:#151210;
--nar-card:#1c1815;
--nar-line:#332c26;
--nar-orange:#ff5a1f;
--nar-orange-deep:#e6420a;
--nar-ember:#ffb627;
--nar-white:#faf6ef;
--nar-cream-dim:#c9beb0;
--font-display:'Montserrat', sans-serif;
--font-body:'Inter', sans-serif;
--container: 1180px;
--pad-x: 24px;
--radius: 3px;
--ease: cubic-bezier(.16,.84,.44,1);
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%; text-size-adjust:100%;}
#the-story{scroll-margin-top:150px;}
body{
margin:0;
background:var(--nar-black);
color:var(--nar-white);
font-family:var(--font-body);
font-size:16px;
line-height:1.6;
-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{font-family:var(--font-display);text-transform:uppercase;letter-spacing:0.01em;line-height:1.05;margin:0;}
p{margin:0;}
ul{margin:0;padding:0;list-style:none;}
button{font-family:inherit;cursor:pointer;}
.wrap{max-width:var(--container);margin:0 auto;padding:0 var(--pad-x);}
@media (prefers-reduced-motion: reduce){
*{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;scroll-behavior:auto !important;}
}
/* ---------- flame-line divider (signature element) ---------- */
.flame-rule{
position:relative;
height:3px;
background:linear-gradient(90deg, transparent, var(--nar-orange) 15%, var(--nar-ember) 50%, var(--nar-orange) 85%, transparent);
width:100%;
margin:0 auto;
}
.flame-rule.short{max-width:120px;height:4px;}
/* ---------- eyebrow / street-sign label ---------- */
.street-tag{
display:inline-flex;
align-items:center;
gap:8px;
background:var(--nar-black);
color:var(--nar-orange);
border:2px solid var(--nar-orange);
border-radius:4px;
padding:6px 16px;
font-family:var(--font-display);
font-weight:800;
font-size:12px;
letter-spacing:0.12em;
text-transform:uppercase;
box-shadow:0 3px 0 rgba(0,0,0,.4);
}
.eyebrow{
display:inline-block;
font-family:var(--font-display);
font-weight:800;
font-size:12.5px;
letter-spacing:0.18em;
text-transform:uppercase;
color:var(--nar-orange);
margin-bottom:14px;
}
/* ---------- buttons ---------- */
.btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
font-family:var(--font-display);
font-weight:800;
font-size:14.5px;
letter-spacing:0.05em;
text-transform:uppercase;
padding:16px 30px;
border-radius:2px;
border:2px solid transparent;
transition:transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease), color .18s var(--ease);
white-space:nowrap;
}
.btn:focus-visible{outline:3px solid var(--nar-ember);outline-offset:3px;}
.btn-primary{
background:var(--nar-orange);
color:var(--nar-black);
box-shadow:0 4px 0 var(--nar-orange-deep);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--nar-orange-deep);}
.btn-primary:active{transform:translateY(1px);box-shadow:0 2px 0 var(--nar-orange-deep);}
.btn-outline{
background:transparent;
color:var(--nar-white);
border-color:rgba(250,246,239,.35);
}
.btn-outline:hover{border-color:var(--nar-white);background:rgba(250,246,239,.06);}
.btn-ghost-orange{
background:transparent;
border-color:var(--nar-orange);
color:var(--nar-orange);
}
.btn-ghost-orange:hover{background:var(--nar-orange);color:var(--nar-black);}
.btn-sm{padding:11px 20px;font-size:12.5px;}
.btn-block{width:100%;}
/* ---------- spin-to-win wheel modal ---------- */
.wheel-modal-overlay{
display:none; position:fixed; inset:0; z-index:95;
background:rgba(0,0,0,.85); backdrop-filter:blur(5px);
align-items:center; justify-content:center; padding:20px;
}
.wheel-modal-overlay.open{display:flex;}
.wheel-modal{
position:relative;
background:radial-gradient(circle at 50% 0%, rgba(255,90,31,.16), transparent 60%), var(--nar-card);
border:1px solid var(--nar-line); border-radius:12px;
padding:36px 32px 28px; max-width:380px; width:100%; text-align:center;
box-shadow:0 40px 100px rgba(0,0,0,.7);
max-height:90vh; overflow-y:auto;
}
.wheel-modal-close{
position:absolute; top:14px; right:14px; background:none; border:none;
color:var(--nar-cream-dim); font-size:26px; line-height:1; cursor:pointer; padding:4px 8px;
}
.wheel-modal-close:hover{color:var(--nar-white);}
.wheel-screen h3{font-size:26px; margin-bottom:8px;}
.wheel-screen > p{color:var(--nar-cream-dim); font-size:14px; margin-bottom:22px;}
.wheel-wrap{position:relative; width:260px; height:260px; margin:0 auto 22px;}
.wheel-pointer{
position:absolute; top:-8px; left:50%; transform:translateX(-50%);
width:0; height:0; z-index:3;
border-left:14px solid transparent; border-right:14px solid transparent;
border-top:22px solid var(--nar-ember);
filter:drop-shadow(0 3px 4px rgba(0,0,0,.5));
}
.wheel{
position:relative; width:100%; height:100%; border-radius:50%;
border:5px solid var(--nar-orange); box-shadow:0 0 0 3px var(--nar-black), 0 20px 50px rgba(0,0,0,.6);
will-change:transform;
}
.wheel-label-wrap{
position:absolute; inset:0; display:flex; justify-content:center; align-items:flex-start;
transform-origin:50% 50%; pointer-events:none;
}
.wheel-label{
margin-top:9%; font-family:var(--font-display); font-weight:800; font-size:10px;
letter-spacing:.01em; text-transform:uppercase; white-space:nowrap; display:inline-block;
line-height:1;
}
.wheel-label-dark{color:var(--nar-black);}
.wheel-label-light{color:var(--nar-white);}
.wheel-label-win{font-weight:900;}
.wheel-hub{
position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
width:56px; height:56px; border-radius:50%; z-index:4;
background:var(--nar-black); border:3px solid var(--nar-orange); color:var(--nar-orange);
font-family:var(--font-display); font-weight:900; font-size:12px; letter-spacing:.05em;
cursor:pointer; box-shadow:0 6px 16px rgba(0,0,0,.6); transition:transform .15s;
}
.wheel-hub:hover{transform:translate(-50%,-50%) scale(1.06);}
.wheel-hub:disabled{opacity:.6; cursor:default; transform:translate(-50%,-50%);}
.wheel-disclaimer{font-size:11px; color:var(--nar-cream-dim); opacity:.8; line-height:1.6; margin-top:4px;}
.wheel-win-screen h3{color:var(--nar-orange);}
.wheel-win-copy{color:var(--nar-cream-dim); font-size:15px; margin-bottom:18px;}
.wheel-win-copy strong{color:var(--nar-white);}
.wheel-code{
font-family:var(--font-display); font-weight:900; font-size:26px; letter-spacing:.03em;
color:var(--nar-orange); background:rgba(255,90,31,.1); border:2px dashed var(--nar-orange);
border-radius:8px; padding:14px; margin-bottom:8px;
}
.wheel-code-label{font-size:12px; color:var(--nar-cream-dim); margin-bottom:20px;}
.wheel-modal-cancel{
background:none; border:none; color:var(--nar-cream-dim); font-size:13px;
font-family:var(--font-body); padding:12px; margin-top:6px; cursor:pointer; width:100%;
}
.wheel-modal-cancel:hover{color:var(--nar-white);}
.wheel-confetti{
position:relative; height:0; margin-bottom:8px;
}
.wheel-confetti::before, .wheel-confetti::after{
content:''; position:absolute; top:-40px; width:10px; height:10px; border-radius:2px;
background:var(--nar-orange); animation:confetti-fall 1.4s ease-in forwards;
}
.wheel-confetti::before{left:30%; animation-delay:.05s; transform:rotate(20deg);}
.wheel-confetti::after{left:62%; background:var(--nar-ember); animation-delay:.2s; transform:rotate(-25deg);}
@keyframes confetti-fall{
0%{transform:translateY(0) rotate(0deg); opacity:1;}
100%{transform:translateY(70px) rotate(220deg); opacity:0;}
}
@media (max-width:420px){
.wheel-wrap{width:220px; height:220px;}
.wheel-hub{width:48px; height:48px; font-size:10.5px;}
.wheel-label{font-size:9px;}
.wheel-code{font-size:22px;}
}
@media (max-width:380px){
.wheel-modal-overlay{padding:12px;}
.wheel-modal{padding:30px 18px 22px;}
.wheel-wrap{width:190px; height:190px; margin-bottom:16px;}
.wheel-hub{width:42px; height:42px; font-size:9.5px;}
.wheel-pointer{border-left-width:11px; border-right-width:11px; border-top-width:17px;}
.wheel-label{font-size:8px;}
.wheel-code{font-size:18px; padding:11px;}
.wheel-screen h3{font-size:22px;}
}
/* ---------- map app picker modal ---------- */
.map-modal-overlay{
display:none; position:fixed; inset:0; z-index:90;
background:rgba(0,0,0,.75); backdrop-filter:blur(4px);
align-items:center; justify-content:center; padding:20px;
}
.map-modal-overlay.open{display:flex;}
.map-modal{
background:var(--nar-card); border:1px solid var(--nar-line); border-radius:8px;
padding:32px; max-width:360px; width:100%; text-align:center;
box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.map-modal h3{font-size:19px; margin-bottom:8px;}
.map-modal p{color:var(--nar-cream-dim); font-size:14px; margin-bottom:22px;}
.map-modal .btn{margin-bottom:10px;}
.map-modal-cancel{
background:none; border:none; color:var(--nar-cream-dim); font-size:13px;
font-family:var(--font-body); padding:8px; margin-top:4px; cursor:pointer;
}
.map-modal-cancel:hover{color:var(--nar-white);}
.js-address{cursor:pointer; text-decoration:underline; text-decoration-color:rgba(255,90,31,.4); text-underline-offset:3px; transition:color .2s;}
.js-address:hover{color:var(--nar-orange);}
.order-bar{
position:sticky; top:0; z-index:60;
background:var(--nar-black);
border-bottom:1px solid var(--nar-line);
overflow:hidden;
-webkit-text-size-adjust:100%; text-size-adjust:100%;
}
.order-bar-inner{
overflow:hidden;
padding:10px 0;
max-width:100%;
-webkit-text-size-adjust:100%; text-size-adjust:100%;
}
.marquee-track{
display:flex;
width:max-content;
animation:marquee-scroll 38s linear infinite;
-webkit-text-size-adjust:100%; text-size-adjust:100%;
}
.marquee-group{
display:flex;
align-items:center;
flex-shrink:0;
-webkit-text-size-adjust:100%; text-size-adjust:100%;
}
.marquee-group span{
font-family:var(--font-display); font-weight:800; font-size:12px;
letter-spacing:0.06em; text-transform:uppercase; color:var(--nar-orange);
white-space:nowrap; padding:0 18px;
-webkit-text-size-adjust:100%; text-size-adjust:100%;
}
.marquee-group span.dot{color:var(--nar-orange); padding:0 8px;}
@keyframes marquee-scroll{
from{transform:translateX(0);}
to{transform:translateX(-50%);}
}
@media (prefers-reduced-motion: reduce){
.marquee-track{animation:none;}
.order-bar-inner{overflow-x:auto;}
}
.order-bar:hover .marquee-track{animation-play-state:paused;}
/* ---------- nav ---------- */
header.site-header{
position:sticky; top:37px; z-index:59;
background:rgba(11,10,8,.92);
backdrop-filter:blur(10px);
border-bottom:1px solid var(--nar-line);
}
.nav-inner{
display:flex; align-items:center; justify-content:space-between;
padding:16px var(--pad-x);
max-width:var(--container); margin:0 auto;
}
.logo{
font-family:var(--font-display); font-weight:900; font-size:26px;
letter-spacing:0.02em; color:var(--nar-white); display:flex; align-items:baseline; gap:6px;
}
.logo span{color:var(--nar-orange);}
.logo small{
display:block; font-family:var(--font-body); font-weight:600; font-size:9px;
letter-spacing:.28em; color:var(--nar-cream-dim); text-transform:uppercase; margin-top:2px;
}
.logo-lockup{display:flex; flex-direction:column;}
.logo-lockup{display:flex; align-items:center;}
.nav-logo-img{height:64px; width:auto; display:block;}
.mobile-logo-img{height:70px; width:auto; display:block;}
.footer-logo-img{height:150px; width:auto; display:block; margin-bottom:14px;}
@media (max-width: 600px){
.nav-logo-img{height:40px;}
.footer-logo-img{height:120px;}
}
@media (max-width: 420px){
.nav-logo-img{height:34px;}
}
nav.primary-nav ul{display:flex; gap:30px; align-items:center;}
nav.primary-nav a{
font-family:var(--font-display); font-weight:700; font-size:13px;
letter-spacing:0.07em; text-transform:uppercase; color:var(--nar-cream-dim);
padding:6px 2px; position:relative; transition:color .2s;
}
nav.primary-nav a:hover, nav.primary-nav a.active{color:var(--nar-white);}
nav.primary-nav a.active::after,
nav.primary-nav a:hover::after{
content:''; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:var(--nar-orange);
}
.nav-cta{display:flex; align-items:center; gap:12px;}
.nav-call-btn{display:inline-flex; align-items:center; gap:7px; padding:11px 20px;}
.nav-call-btn svg{flex-shrink:0;}
.menu-toggle{display:none; background:none; border:none; color:var(--nar-white); padding:6px;}
.menu-toggle svg{width:26px;height:26px;}
.mobile-nav{
display:none; position:fixed; inset:0; z-index:70; background:var(--nar-black);
padding:24px var(--pad-x); overflow-y:auto;
}
.mobile-nav.open{display:block;}
.mobile-nav-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:36px;}
.mobile-nav ul{display:flex; flex-direction:column; gap:4px;}
.mobile-nav a{
font-family:var(--font-display); font-weight:800; font-size:26px; text-transform:uppercase;
padding:16px 0; border-bottom:1px solid var(--nar-line); display:block; color:var(--nar-white);
}
.mobile-nav .btn{margin-top:28px;}
@media (max-width: 1140px){
nav.primary-nav{display:none;}
.menu-toggle{display:block;}
}
@media (max-width: 420px){
.nav-call-btn svg{display:none;}
}
/* ---------- section scaffolding ---------- */
section{padding:88px 0;}
.section-head{max-width:680px; margin:0 auto 52px; text-align:center;}
.section-head h2{font-size:clamp(30px,4.4vw,50px); margin-bottom:16px;}
.section-head p{font-size:17px; color:var(--nar-cream-dim);}
.section-head.left{margin-left:0; text-align:left;}
.bg-soft{background:var(--nar-black-soft);}
.bg-black{background:var(--nar-black);}
.hero{
position:relative; overflow:hidden;
padding:70px 0 100px;
background:
radial-gradient(circle at 18% 0%, rgba(255,90,31,.16), transparent 42%),
radial-gradient(circle at 100% 30%, rgba(255,182,39,.10), transparent 45%),
var(--nar-black);
}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;}
.hero h1{font-size:clamp(42px,6vw,74px); color:var(--nar-white);}
.hero h1 em{font-style:normal; color:var(--nar-orange);}
.hero-sub{font-size:19px; color:var(--nar-cream-dim); max-width:520px; margin:22px 0 34px;}
.hero-cta-row{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:26px;}
.hero-trust{display:flex; gap:22px; flex-wrap:wrap; margin-top:8px;}
.hero-trust .stat{display:flex; flex-direction:column;}
.hero-trust .stat b{font-family:var(--font-display); font-size:22px; color:var(--nar-orange);}
.hero-trust .stat span{font-size:12px; color:var(--nar-cream-dim); text-transform:uppercase; letter-spacing:.06em;}
.hero-visual{position:relative;}
.hero-visual .card{
line-height:0;
}
.hero-visual .card img{width:100%; height:auto; display:block;}
.hero-badge{
position:absolute; top:-18px; right:-14px; background:var(--nar-orange); color:var(--nar-black);
font-family:var(--font-display); font-weight:900; font-size:13px; letter-spacing:.03em;
padding:12px 16px; border-radius:50%; width:96px; height:96px; display:flex; align-items:center;
justify-content:center; text-align:center; line-height:1.15; transform:rotate(9deg);
box-shadow:0 8px 0 var(--nar-orange-deep);
}
/* ---------- delivery/order platform row ---------- */
.order-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.order-tile{
background:var(--nar-card); border:1px solid var(--nar-line); border-radius:6px;
padding:26px 20px; text-align:center; transition:transform .2s var(--ease), border-color .2s;
}
.order-tile:hover{transform:translateY(-4px); border-color:var(--nar-orange);}
.order-tile .plat{font-family:var(--font-display); font-weight:900; font-size:17px; margin-bottom:6px;}
.order-tile p.d{color:var(--nar-cream-dim); font-size:13px; margin-bottom:16px;}
/* ---------- feature strip ---------- */
.feature-strip{display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:1px solid var(--nar-line); border-radius:6px; overflow:hidden;}
.feature-strip .f{
padding:30px 22px; border-right:1px solid var(--nar-line);
background:linear-gradient(160deg, rgba(255,90,31,.14), transparent 70%);
display:flex; flex-direction:column; justify-content:center; align-items:center;
text-align:center;
}
.feature-strip .f:last-child{border-right:none;}
.halal-seal{
display:inline-block; background:var(--nar-orange); color:var(--nar-black);
font-family:var(--font-display); font-weight:900; font-size:11px; letter-spacing:.06em;
text-transform:uppercase; padding:5px 12px; border-radius:30px; margin-bottom:12px;
}
.feature-strip h3{font-size:15px; margin-bottom:8px; color:var(--nar-orange);}
.feature-strip p{font-size:13.5px; color:var(--nar-cream-dim);}
/* ---------- menu preview cards ---------- */
.menu-cat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.menu-cat{
background:var(--nar-card); border:1px solid var(--nar-line); border-radius:6px; overflow:hidden;
transition:transform .2s var(--ease), border-color .2s;
}
.menu-cat:hover{transform:translateY(-4px); border-color:var(--nar-orange);}
.menu-cat .swatch{height:8px; background:var(--nar-orange);}
.menu-cat-body{padding:26px 24px 28px;}
.menu-cat h3{font-size:19px; margin-bottom:10px;}
.menu-cat p{color:var(--nar-cream-dim); font-size:14px; margin-bottom:16px;}
.menu-cat a.tl{font-family:var(--font-display); font-weight:800; font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--nar-orange);}
/* ---------- East vs West teaser (home) ---------- */
.evw-teaser{
position:relative; border-radius:8px; overflow:hidden;
background:var(--nar-black-soft); border:1px solid var(--nar-line);
}
.evw-teaser-grid{display:grid; grid-template-columns:1fr 1fr; align-items:stretch;}
.evw-teaser-copy{padding:56px 52px; display:flex; flex-direction:column; justify-content:center;}
.evw-teaser-copy h2{font-size:clamp(28px,3.6vw,42px); margin-bottom:18px;}
.evw-teaser-copy p{color:var(--nar-cream-dim); font-size:16px; margin-bottom:26px; max-width:440px;}
.evw-teaser-img{position:relative; display:flex; align-items:center; overflow:hidden;}
.evw-teaser-img img{width:100%; height:auto; display:block;}
.evw-teaser-img.banner-fit{background:var(--nar-black); display:flex; align-items:center;}
.evw-teaser-img.banner-fit img{object-fit:contain; height:auto;}
/* ---------- vs split visual (reusable) ---------- */
.vs-split{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:0;}
.vs-badge{
width:64px; height:64px; border-radius:50%; background:var(--nar-black);
border:3px solid var(--nar-orange); display:flex; align-items:center; justify-content:center;
font-family:var(--font-display); font-weight:900; font-size:16px; color:var(--nar-orange); z-index:2;
}
/* ---------- reviews ---------- */
.review-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.review-card{background:var(--nar-card); border:1px solid var(--nar-line); border-radius:6px; padding:28px;}
.stars{color:var(--nar-orange); font-size:15px; letter-spacing:2px; margin-bottom:14px;}
.review-card p{font-size:14.5px; color:var(--nar-cream-dim); margin-bottom:18px; line-height:1.7;}
.review-name{font-family:var(--font-display); font-weight:800; font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--nar-white);}
/* ---------- catering teaser ---------- */
.catering-cta{
background:linear-gradient(120deg, var(--nar-orange-deep), var(--nar-orange));
border-radius:8px; padding:56px 52px; display:grid; grid-template-columns:1.3fr auto; gap:24px; align-items:center;
}
.catering-cta h2{color:var(--nar-black); font-size:clamp(26px,3.4vw,38px); margin-bottom:12px;}
.catering-cta p{color:rgba(11,10,8,.78); font-size:15.5px; max-width:520px;}
.catering-cta .btn-primary{background:var(--nar-black); color:var(--nar-white); box-shadow:0 4px 0 #000;}
/* ---------- location/hours ---------- */
.loc-grid{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start;}
.loc-card{background:var(--nar-card); border:1px solid var(--nar-line); border-radius:6px; padding:34px;}
.loc-card h3{font-size:14px; letter-spacing:.1em; color:var(--nar-orange); margin-bottom:18px;}
.hours-row{display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--nar-line); font-size:14.5px;}
.hours-row:last-child{border-bottom:none;}
.hours-row span:first-child{color:var(--nar-white); font-weight:600;}
.hours-row span:last-child{color:var(--nar-cream-dim);}
.map-embed{border-radius:6px; overflow:hidden; border:1px solid var(--nar-line); height:100%; min-height:340px; position:relative;}
.map-embed iframe{width:100%; height:100%; min-height:340px; border:0; filter:grayscale(.12) contrast(1.05); pointer-events:auto;}
.map-embed-link{
position:absolute; bottom:12px; right:12px; z-index:2;
background:var(--nar-black); color:var(--nar-white); border:1px solid var(--nar-line);
font-family:var(--font-display); font-weight:700; font-size:11px; letter-spacing:.05em; text-transform:uppercase;
padding:8px 14px; border-radius:4px; box-shadow:0 4px 14px rgba(0,0,0,.5); transition:background .2s, color .2s;
}
.map-embed-link:hover{background:var(--nar-orange); color:var(--nar-black); border-color:var(--nar-orange);}
.cover-banner{width:100%; border-top:1px solid var(--nar-line); border-bottom:1px solid var(--nar-line);}
.cover-banner img{width:100%; height:auto; display:block; max-height:340px; object-fit:contain;}
@media (max-width:700px){
.cover-banner img{max-height:220px;}
}
/* ---------- footer ---------- */
footer.site-footer{background:var(--nar-black-soft); border-top:1px solid var(--nar-line); padding:64px 0 0;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:48px;}
.footer-col h4{font-family:var(--font-display); font-weight:800; font-size:12.5px; letter-spacing:.1em; color:var(--nar-orange); margin-bottom:18px;}
.footer-col ul li{margin-bottom:11px;}
.footer-col a{color:var(--nar-cream-dim); font-size:14px; transition:color .2s;}
.footer-col a:hover{color:var(--nar-white);}
.footer-brand p{color:var(--nar-cream-dim); font-size:14px; margin:16px 0 20px; max-width:280px;}
.social-row{display:flex; gap:10px;}
.social-row a{
width:38px; height:38px; border-radius:50%; border:1px solid var(--nar-line);
display:flex; align-items:center; justify-content:center; transition:all .2s;
}
.social-row a:hover{background:var(--nar-orange); border-color:var(--nar-orange); color:var(--nar-black);}
.footer-bottom{
border-top:1px solid var(--nar-line); padding:22px 0; display:flex; justify-content:space-between;
align-items:center; font-size:12.5px; color:var(--nar-cream-dim); flex-wrap:wrap; gap:10px;
}
.footer-bottom a{color:var(--nar-cream-dim);}
.footer-bottom a:hover{color:var(--nar-orange);}
/* ---------- reveal animation ---------- */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease);}
.reveal.in{opacity:1; transform:translateY(0);}
/* ---------- generic page hero (inner pages) ---------- */
.page-hero{
padding:64px 0 60px;
background:radial-gradient(circle at 15% 20%, rgba(255,90,31,.14), transparent 45%), var(--nar-black);
border-bottom:1px solid var(--nar-line);
}
.page-hero h1{font-size:clamp(36px,5.4vw,58px);}
.page-hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center;}
.page-hero-coupon img{width:100%; display:block; border-radius:10px; box-shadow:0 24px 60px rgba(0,0,0,.5);}
@media (max-width:900px){
.page-hero-grid{grid-template-columns:1fr;}
.page-hero-coupon{order:-1;}
}
.breadcrumb{font-size:12.5px; color:var(--nar-cream-dim); text-transform:uppercase; letter-spacing:.08em; margin-bottom:18px;}
.breadcrumb a{color:var(--nar-cream-dim);}
.breadcrumb a:hover{color:var(--nar-orange);}
/* ---------- menu page ---------- */
.menu-filter-bar{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:44px;}
.chip{
font-family:var(--font-display); font-weight:700; font-size:12.5px; letter-spacing:.05em; text-transform:uppercase;
padding:10px 18px; border:1px solid var(--nar-line); border-radius:30px; color:var(--nar-cream-dim);
background:transparent; transition:all .2s;
}
.chip:hover{border-color:var(--nar-orange); color:var(--nar-white);}
.chip.active{background:var(--nar-orange); border-color:var(--nar-orange); color:var(--nar-black);}
.menu-section-block{margin-bottom:64px;}
.menu-section-block .head{display:flex; align-items:baseline; gap:16px; margin-bottom:24px;}
.menu-section-block h2{font-size:26px; color:var(--nar-orange);}
.menu-section-block .rule{flex:1; height:1px; background:var(--nar-line);}
.menu-items{display:grid; grid-template-columns:1fr 1fr; gap:8px 40px;}
.menu-item{display:flex; justify-content:space-between; gap:14px; padding:16px 0; border-bottom:1px solid var(--nar-line);}
.menu-item .mi-name{font-family:var(--font-display); font-weight:700; font-size:15.5px; color:var(--nar-white); display:flex; align-items:center; gap:8px;}
.menu-item .mi-desc{font-size:13px; color:var(--nar-cream-dim); margin-top:4px; max-width:340px;}
.menu-item .mi-price{font-family:var(--font-display); font-weight:800; color:var(--nar-orange); white-space:nowrap;}
.tag-pop{background:var(--nar-orange); color:var(--nar-black); font-size:9px; font-weight:800; padding:2px 7px; border-radius:20px; letter-spacing:.04em;}
.tag-veg{background:transparent; color:var(--nar-orange); border:1px solid var(--nar-orange); font-size:9px; font-weight:800; padding:2px 7px; border-radius:20px; letter-spacing:.04em;}
.evw-bowl-card{background:var(--nar-card); border:2px solid var(--nar-orange); border-radius:8px; padding:28px; margin-bottom:20px;}
.menu-graphic-wrap{max-width:620px; margin:0 auto 48px; text-align:center;}
.menu-graphic-wrap img{width:100%; border-radius:10px; border:1px solid var(--nar-line); box-shadow:0 24px 60px rgba(0,0,0,.5);}
.menu-graphic-caption{font-size:13px; color:var(--nar-cream-dim); margin-top:14px;}
.menu-note{font-size:14px; color:var(--nar-cream-dim); margin:-8px 0 22px;}
.menu-addons{margin-top:8px;}
.addon-row{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
.addon{
background:var(--nar-card); border:1px solid var(--nar-line); border-radius:6px;
padding:16px 18px; display:flex; justify-content:space-between; align-items:center;
font-size:13.5px; color:var(--nar-cream-dim);
}
.addon span:last-child{font-family:var(--font-display); font-weight:800; color:var(--nar-orange);}
.byo-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.byo-col{background:var(--nar-card); border:1px solid var(--nar-line); border-radius:6px; padding:22px 20px;}
.byo-num{
width:30px; height:30px; border-radius:50%; background:var(--nar-orange); color:var(--nar-black);
font-family:var(--font-display); font-weight:900; font-size:14px; display:flex; align-items:center; justify-content:center;
margin-bottom:14px;
}
.byo-col h4{font-size:13.5px; letter-spacing:.04em; text-transform:uppercase; margin-bottom:12px; color:var(--nar-white);}
.byo-col ul li{font-size:13px; color:var(--nar-cream-dim); padding:5px 0; border-bottom:1px solid rgba(255,255,255,.05);}
.byo-col ul li:last-child{border-bottom:none;}
.size-price-row{display:flex; gap:16px; margin-top:24px; justify-content:center;}
.size-price{
background:var(--nar-card); border:1px solid var(--nar-orange); border-radius:6px;
padding:18px 34px; text-align:center; min-width:150px;
}
.size-price span{display:block; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--nar-cream-dim); margin-bottom:6px;}
.size-price b{font-family:var(--font-display); font-weight:900; font-size:24px; color:var(--nar-orange);}
/* ---------- East vs West page specific ---------- */
.evw-hero{
position:relative; padding:0; background:var(--nar-black); overflow:hidden;
border-bottom:1px solid var(--nar-line);
}
.evw-hero-inner{max-width:var(--container); margin:0 auto; padding:70px var(--pad-x) 0; text-align:center;}
.evw-hero h1{font-size:clamp(40px,7vw,84px); line-height:.98;}
.evw-hero .vs-word{color:var(--nar-orange); display:block; font-size:clamp(20px,3vw,30px); margin:6px 0;}
.evw-h1-new{font-size:clamp(32px,5.4vw,58px) !important; line-height:1.08 !important;}
.evw-hero-sub{max-width:640px; margin:22px auto 0; color:var(--nar-cream-dim); font-size:17px;}
.evw-hero-img{margin-top:46px; max-width:620px; margin-left:auto; margin-right:auto; padding:0 var(--pad-x);}
.evw-hero-img img{width:100%; display:block; border-radius:12px;}
.story-block{max-width:760px; margin:0 auto;}
.story-block p{color:var(--nar-cream-dim); font-size:17.5px; line-height:1.85; margin-bottom:24px;}
.story-block p.lead{color:var(--nar-white); font-size:20px; font-weight:500;}
.story-block .pull{
font-family:var(--font-display); font-weight:800; font-size:26px; color:var(--nar-orange);
text-transform:uppercase; line-height:1.3; margin:44px 0; text-align:center;
}
.side-compare{display:grid; grid-template-columns:1fr 1px 1fr; gap:0; border-radius:10px; overflow:hidden; border:1px solid var(--nar-line);}
.side-col{padding:48px 40px; display:flex; flex-direction:column;}
.side-col > a.btn{margin-top:auto; align-self:flex-start;}
.bowl-photo-placeholder{
width:100%; aspect-ratio:4/3; margin-bottom:22px; border-radius:8px;
border:2px dashed var(--nar-line); background:rgba(255,255,255,.02);
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
color:var(--nar-cream-dim); text-align:center; padding:20px;
}
.bowl-photo-placeholder svg{opacity:.5;}
.bowl-photo-placeholder span{font-family:var(--font-display); font-weight:700; font-size:12px; letter-spacing:.05em; text-transform:uppercase; opacity:.7;}
.bowl-photo{width:100%; aspect-ratio:1/1; margin-bottom:22px; border-radius:8px; overflow:hidden; border:1px solid var(--nar-line); background:var(--nar-black);}
.bowl-photo img{width:100%; height:100%; object-fit:contain; display:block;}
.side-col.west{background:linear-gradient(160deg, #1c1815, #120f0c);}
.side-col.east{background:linear-gradient(200deg, #1c1815, #120f0c);}
.side-col .tag{font-family:var(--font-display); font-weight:900; font-size:13px; letter-spacing:.1em; color:var(--nar-cream-dim); margin-bottom:6px;}
.side-col h3{font-size:clamp(28px,3.6vw,40px); color:var(--nar-orange); margin-bottom:20px;}
.ingredient-list{display:grid; grid-template-columns:1fr 1fr; gap:0 24px;}
.ingredient-list li{
display:flex; align-items:center; gap:10px; padding:9px 0; font-size:14.5px; color:var(--nar-cream-dim);
}
.ingredient-list svg{flex-shrink:0; color:var(--nar-orange);}
@media (max-width:600px){
.ingredient-list{grid-template-columns:1fr;}
}
.side-divider{
width:1px; background:linear-gradient(var(--nar-orange), var(--nar-line));
position:relative;
}
.timeline{max-width:720px; margin:0 auto;}
.tl-row{display:grid; grid-template-columns:110px 1fr; gap:24px; padding:22px 0; border-bottom:1px solid var(--nar-line);}
.tl-row:last-child{border-bottom:none;}
.tl-row .yr{font-family:var(--font-display); font-weight:900; font-size:22px; color:var(--nar-orange);}
.tl-row h4{font-size:16px; margin-bottom:6px; text-transform:none;}
.tl-row p{color:var(--nar-cream-dim); font-size:14.5px;}
/* ---------- about / catering / contact page bits ---------- */
.value-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.value-card{background:var(--nar-card); border:1px solid var(--nar-line); border-radius:6px; padding:30px;}
.value-card .num{font-family:var(--font-display); font-weight:900; color:var(--nar-orange); font-size:13px; letter-spacing:.1em; margin-bottom:14px;}
.value-card h3{font-size:18px; margin-bottom:10px;}
.value-card p{font-size:14px; color:var(--nar-cream-dim);}
.cat-pkg-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.cat-pkg{background:var(--nar-card); border:1px solid var(--nar-line); border-radius:8px; padding:32px; display:flex; flex-direction:column;}
.cat-pkg.featured{border-color:var(--nar-orange); position:relative;}
.cat-pkg.featured::before{
content:'Most Popular'; position:absolute; top:-13px; left:50%; transform:translateX(-50%);
background:var(--nar-orange); color:var(--nar-black); font-family:var(--font-display); font-weight:800;
font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; padding:6px 14px; border-radius:30px;
}
.cat-pkg h3{font-size:20px; margin-bottom:6px;}
.cat-pkg .price{font-family:var(--font-display); font-weight:900; color:var(--nar-orange); font-size:26px; margin-bottom:16px;}
.cat-pkg .price span{font-size:13px; color:var(--nar-cream-dim); text-transform:none; font-family:var(--font-body); font-weight:400;}
.cat-pkg ul{margin-bottom:24px; flex:1;}
.cat-pkg li{font-size:13.5px; color:var(--nar-cream-dim); padding:8px 0; border-bottom:1px solid var(--nar-line); display:flex; gap:8px; align-items:flex-start;}
.cat-pkg li:last-child{border-bottom:none;}
.cat-pkg li svg{flex-shrink:0; margin-top:2px; color:var(--nar-orange);}
.contact-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:44px;}
.contact-item{display:flex; gap:16px; padding:20px 0; border-bottom:1px solid var(--nar-line);}
.contact-item:last-child{border-bottom:none;}
.contact-icon{
width:44px; height:44px; border-radius:50%; background:rgba(255,90,31,.12); color:var(--nar-orange);
display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.contact-item h4{font-size:14px; text-transform:none; margin-bottom:4px;}
.contact-item p, .contact-item a{font-size:14.5px; color:var(--nar-cream-dim);}
.contact-item a:hover{color:var(--nar-orange);}
.faq-item{border-bottom:1px solid var(--nar-line); padding:22px 0;}
.faq-item h4{font-size:16px; margin-bottom:8px; text-transform:none; display:flex; align-items:center; gap:10px;}
.faq-item h4::before{content:'Q.'; color:var(--nar-orange); font-family:var(--font-display); font-weight:900;}
.faq-item p{color:var(--nar-cream-dim); font-size:14.5px; padding-left:26px;}
.faq-cat-block{margin-bottom:44px;}
.faq-cat-block .eyebrow{display:block; margin-bottom:8px;}
.med-graphic-wrap{margin-bottom:48px; text-align:center;}
.med-graphic-wrap img{width:100%; border-radius:10px; border:1px solid var(--nar-line); box-shadow:0 24px 60px rgba(0,0,0,.5);}
.med-benefit{margin-bottom:36px;}
.med-benefit h2{font-size:22px; color:var(--nar-orange); margin-bottom:12px; text-transform:none;}
.med-benefit p{color:var(--nar-cream-dim); font-size:15.5px; line-height:1.8;}
.med-benefit p em{color:var(--nar-white); font-style:italic;}
.med-disclaimer{
background:var(--nar-card); border:1px solid var(--nar-line); border-left:3px solid var(--nar-orange);
border-radius:6px; padding:26px 28px; margin:44px 0;
}
.med-disclaimer h3{font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--nar-orange); margin-bottom:12px;}
.med-disclaimer p{color:var(--nar-cream-dim); font-size:14px; line-height:1.8;}
.med-local{margin:44px 0;}
.med-local h2{font-size:24px; margin-bottom:14px; text-transform:none;}
.med-local p{color:var(--nar-cream-dim); font-size:15.5px; line-height:1.8; margin-bottom:14px;}
.med-sources{margin-top:44px; padding-top:32px; border-top:1px solid var(--nar-line);}
.med-sources h3{font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--nar-orange); margin-bottom:16px;}
.med-sources ul{display:flex; flex-direction:column; gap:12px;}
.med-sources li{font-size:13.5px; color:var(--nar-cream-dim); padding-bottom:12px; border-bottom:1px solid var(--nar-line);}
.med-sources li:last-child{border-bottom:none;}
.med-sources a{color:var(--nar-cream-dim); transition:color .2s;}
.med-sources a:hover{color:var(--nar-orange);}
.med-sources a em{font-style:italic;}
/* ---------- sticky mobile order bar ---------- */
.mobile-order-bar{
display:none; position:fixed; bottom:0; left:0; right:0; z-index:65;
background:var(--nar-black); border-top:1px solid var(--nar-line);
padding:12px var(--pad-x); box-shadow:0 -6px 20px rgba(0,0,0,.4);
}
.mobile-order-bar .btn{width:100%;}
@media (max-width: 760px){
.mobile-order-bar{display:block;}
body{padding-bottom:74px;}
.side-compare{grid-template-columns:1fr;}
.side-divider{display:none;}
.side-col > a.btn{margin-top:24px;}
}
/* ---------- responsive ---------- */
@media (max-width: 980px){
.hero-grid{grid-template-columns:1fr;}
.hero-visual{order:-1;}
.feature-strip{grid-template-columns:repeat(2,1fr);}
.feature-strip .f:nth-child(2){border-right:none;}
.menu-cat-grid{grid-template-columns:1fr 1fr;}
.evw-teaser-grid{grid-template-columns:1fr;}
.evw-teaser-img{order:-1;}
.review-grid{grid-template-columns:1fr;}
.catering-cta{grid-template-columns:1fr; text-align:center;}
.catering-cta p{margin:0 auto;}
.loc-grid{grid-template-columns:1fr;}
.footer-grid{grid-template-columns:1fr 1fr; gap:32px;}
.menu-items{grid-template-columns:1fr;}
.value-grid, .cat-pkg-grid{grid-template-columns:1fr;}
.contact-grid{grid-template-columns:1fr;}
.byo-grid{grid-template-columns:1fr 1fr;}
.addon-row{grid-template-columns:1fr;}
.size-price-row{flex-direction:column; align-items:center;}
}
@media (max-width: 600px){
.byo-grid{grid-template-columns:1fr;}
}
@media (max-width: 600px){
section{padding:64px 0;}
.order-grid{grid-template-columns:1fr;}
.menu-cat-grid{grid-template-columns:1fr;}
.footer-grid{grid-template-columns:1fr;}
.hero-cta-row .btn{width:100%;}
.hero-cta-row{flex-direction:column;}
}