@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&family=Protest+Revolution&family=Bangers&display=swap');

:root{
  --red:#C8102E;
  --red-deep:#9F0B22;
  --black:#000000;
  --black-soft:#070707;
  --white:#000000; /* page background variable — keep the name, value is now pure black */
  --paper:#0C0C0C;
  --ink:#F3E9DC;
  --ink-dim:#BCAB96;
  --line:rgba(243,233,220,.18);
  --line-inv:rgba(255,255,255,.18);
  --gold:#FFB300;
  --disp:'Protest Revolution','Bangers','Arial Black',sans-serif;
  --marker:'Permanent Marker',cursive;
  --serif:Georgia,'Times New Roman',serif;
  --ui:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
body{background:var(--white);color:var(--ink);font-family:var(--ui);line-height:1.55;margin:0}
h1,h2,h3{margin:0;text-wrap:balance}
p{margin:0}
.disp{font-family:var(--disp);font-weight:400;text-transform:uppercase;letter-spacing:.01em;line-height:1.08}
.drip{background:linear-gradient(180deg,#FFD84D 0%,#FFA51E 42%,#E4210B 100%);-webkit-background-clip:text;background-clip:text;color:var(--red);-webkit-text-fill-color:transparent}
.eyebrow{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--red);font-weight:700}
.hero .eyebrow,.page-hero .eyebrow{color:var(--gold)}
a{color:var(--red)}
button{font-family:var(--ui);cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.wrap{max-width:1100px;margin:0 auto;padding:0 24px}

/* buttons */
.btn{display:inline-block;border:0;border-radius:3px;font-weight:800;font-size:15px;padding:13px 24px;text-decoration:none;text-align:center;letter-spacing:.02em}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:var(--red-deep)}
.btn-black{background:transparent;color:var(--gold);border:1.5px solid var(--gold)}
.btn-black:hover{background:var(--gold);color:var(--black)}
.btn-line{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.btn-line:hover{background:var(--ink);color:#fff}
.btn-line-inv{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.6)}
.btn-line-inv:hover{border-color:#fff}
.btn-sm{padding:9px 16px;font-size:13px}

/* top bar */
.topbar{position:sticky;top:0;z-index:40;background:rgba(0,0,0,.95);backdrop-filter:blur(8px);border-bottom:2px solid var(--red);box-shadow:0 1px 0 rgba(243,233,220,.16)}
.topbar .wrap{display:flex;align-items:center;gap:20px;height:64px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand .disp{font-size:17px}
.brand .lips{width:38px;height:38px;flex:none}
.stars4{display:inline-flex;gap:3px}
.stars4 svg{width:11px;height:11px;fill:var(--red)}
nav.main{margin-left:auto;display:flex;gap:24px}
nav.main a{color:var(--ink);text-decoration:none;font-size:14px;font-weight:600;padding:4px 0;border-bottom:2px solid transparent}
nav.main a:hover{color:var(--red)}
nav.main a.on{color:var(--red);border-bottom-color:var(--red)}
.topbar .btn{padding:10px 18px;font-size:13px;white-space:nowrap}
.topbar>.wrap>.btn+.btn{margin-left:-8px}
.topsocial{display:flex;align-items:center;gap:14px;margin-left:18px}
.topsocial a{color:rgba(243,233,220,.7);display:inline-flex;transition:color .12s ease,transform .12s ease}
.topsocial a:hover{color:var(--red);transform:translateY(-1px)}
.mobile-nav .topsocial{margin:22px 0 0;gap:30px;justify-content:center}
.mobile-nav .topsocial a{color:var(--ink);border-bottom:0;padding:8px}
.mobile-nav .topsocial a:hover{color:var(--red)}
.mobile-nav .topsocial svg{width:26px;height:26px}
@media(max-width:820px){nav.main{display:none}}

/* hero */
.hero{position:relative;background:var(--black);color:#fff;border-bottom:6px solid var(--red);overflow:hidden}
/* red/amber radial glow layer removed 2026-07-14 (owner: pure black, no tint) */
.hero .wrap{position:relative;z-index:1;padding:84px 24px 72px}
.hero h1{font-size:clamp(36px,6.2vw,84px);max-width:14ch}
.hero h1 .hot{color:var(--red)}
.hero p.lead{font-size:18px;color:rgba(255,255,255,.72);max-width:52ch;margin:22px 0 30px}
.cta-row{display:flex;gap:14px;flex-wrap:wrap}
.proof{display:flex;gap:30px;flex-wrap:wrap;margin-top:46px;padding-top:24px;border-top:1px solid var(--line-inv)}
.proof div{font-size:13px;color:rgba(255,255,255,.6)}
.proof strong{display:block;font-size:19px;color:#fff;font-variant-numeric:tabular-nums}
.g-star{color:var(--gold)}

/* page hero (interior pages) */
.page-hero{background:var(--black);color:#fff;border-bottom:6px solid var(--red)}
.page-hero .wrap{padding:56px 24px 48px}
.page-hero h1{font-size:clamp(30px,5vw,62px)}
.page-hero p{color:rgba(255,255,255,.72);max-width:56ch;margin-top:14px;font-size:17px}

/* sections */
section{padding:68px 0}
.alt{background:var(--paper);border-block:1px solid var(--line)}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:18px;margin-bottom:32px;flex-wrap:wrap}
.sec-head h2{font-size:clamp(26px,3.8vw,42px)}
.sec-head .note{font-size:14px;color:var(--ink-dim);max-width:40ch}

/* cards */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(245px,1fr));gap:18px}
.card{background:var(--white);border:1.5px solid var(--line);border-radius:4px;padding:22px;display:flex;flex-direction:column;gap:10px;box-shadow:4px 4px 0 var(--red)}
.card h3{font-family:var(--disp);text-transform:uppercase;font-size:22px}
.card .feeds{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--red);font-weight:800}
.card p{font-size:14px;color:var(--ink-dim);flex:1}
.card .price{font-family:var(--serif);font-size:24px;font-variant-numeric:tabular-nums}
.card .price small{font-size:13px;color:var(--ink-dim);font-family:var(--ui)}


/* forms */
.formgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
label.f{display:flex;flex-direction:column;gap:6px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim);font-weight:700}
input,select,textarea{background:#080808;border:1.5px solid var(--line);border-radius:3px;color:var(--ink);padding:11px 12px;font-size:15px;font-family:var(--ui)}
textarea{resize:vertical;min-height:74px}
.panel{background:var(--white);border:1.5px solid var(--line);border-radius:4px;padding:26px;box-shadow:4px 4px 0 var(--red)}
.split{display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:start}
@media(max-width:840px){.split{grid-template-columns:1fr}}
.estimate{background:var(--black);color:#fff;border:1px solid rgba(243,233,220,.16);border-radius:4px;padding:24px;box-shadow:4px 4px 0 var(--red)}
.estimate .big{font-family:var(--serif);font-size:40px;font-variant-numeric:tabular-nums}
.estimate small{color:rgba(255,255,255,.6)}
.estimate .hintline{color:rgba(255,255,255,.6)}
.hintline{font-size:13px;color:var(--ink-dim);margin-top:12px}
.okmsg{display:none;background:#EFF7EC;border:1.5px solid #4C8C3F;color:#2E5A26;border-radius:4px;padding:14px 16px;font-size:14px;margin-top:16px}
.okmsg.show{display:block}
.okmsg.error{background:#fff0f0;border-color:var(--red);color:#8b101b}
.datebadge{display:inline-flex;align-items:center;gap:8px;background:var(--gold);color:var(--black);border-radius:3px;padding:7px 13px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-top:14px}

/* promo strip */
.promo{background:var(--gold);border-block:4px solid var(--red);padding:13px 0}
.promo .wrap{display:flex;gap:6px 20px;align-items:center;flex-wrap:wrap}
.promo .tag{font-family:var(--disp);font-size:22px;color:var(--red);text-transform:uppercase;white-space:nowrap}
.promo .deal{font-family:var(--marker);font-size:15.5px;color:var(--black)}
.steps p{font-size:14.5px;margin:0 0 12px;color:rgba(255,255,255,.75)}
.steps strong{color:#fff}

/* menu */
.menu-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:36px 46px}
.mcat h3{font-family:var(--disp);text-transform:uppercase;font-size:25px;color:var(--red);margin-bottom:12px}
.mi{display:flex;align-items:center;gap:8px;padding:7px 0;font-family:var(--serif);font-size:16px;border-bottom:1px dotted rgba(243,233,220,.3)}
.mi:last-child{border-bottom:0}
.mi .nm{flex:1;min-width:0}
.mi .sub{display:block;font-family:var(--ui);font-size:12.5px;color:var(--ink-dim)}
.mi .pr{font-variant-numeric:tabular-nums;white-space:nowrap}

/* story / about */
.bigstars{display:flex;gap:18px;justify-content:center}
.bigstars svg{width:54px;height:54px;fill:var(--red)}
.story-card{background:var(--black);color:#fff;border:1px solid rgba(243,233,220,.16);border-radius:4px;padding:36px;text-align:center;box-shadow:6px 6px 0 var(--red)}
.story-card .disp{font-size:26px;margin-top:18px}
.story-card small{color:rgba(255,255,255,.6)}
.prose p{color:var(--ink-dim);max-width:58ch;margin-bottom:14px;font-size:16px}
.prose p strong{color:var(--ink)}

/* reviews */
.rev{background:var(--white);color:var(--ink);border:1.5px solid var(--line);border-radius:4px;padding:24px;box-shadow:4px 4px 0 var(--red)}
.rev p{font-family:var(--serif);font-size:17px;margin:8px 0 14px;font-style:italic}
.rev .who{font-size:13px;color:var(--ink-dim)}
.rev .g-star{letter-spacing:2px;font-size:14px}

/* review wall (Google reviews marquee) */
.revwall{background:var(--black);color:#fff;border-block:6px solid var(--red);padding:64px 0 58px;overflow:hidden}
.revwall .wrap{margin-bottom:34px}
.rev-head{display:flex;align-items:center;gap:14px 40px;flex-wrap:wrap}
.rev-score{display:flex;align-items:center;gap:18px}
.rev-score .num{font-family:var(--disp);font-size:76px;line-height:1}
.rev-score .stars{color:var(--gold);font-size:22px;letter-spacing:3px}
.rev-score .count{font-size:14px;color:rgba(255,255,255,.65)}
.rev-score .count a{color:var(--gold)}
.rev-chips{display:flex;gap:10px;flex-wrap:wrap}
.rev-chips span{border:1.5px solid rgba(255,179,0,.55);color:var(--gold);border-radius:999px;padding:6px 14px;font-size:12.5px;font-weight:700;letter-spacing:.04em}
.rev-chips span b{color:#fff;font-variant-numeric:tabular-nums}
.marquee-clip{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.marquee{display:flex;width:max-content;animation:revscroll 55s linear infinite}
.marquee:hover{animation-play-state:paused}
.marquee .rev{width:330px;flex:none;margin-right:18px;box-shadow:4px 4px 0 var(--red)}
.marquee .rev p{font-size:15.5px}
@keyframes revscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .marquee{animation:none}
  .marquee-clip{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
}

/* visit */
.hours{width:100%;border-collapse:collapse;font-size:15px}
.hours td{padding:9px 0;border-bottom:1px solid var(--line)}
.hours td:last-child{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink-dim)}
.hours tr.today td{color:var(--red);font-weight:800}
.visit-info p{margin-bottom:14px;color:var(--ink-dim)}
.visit-info strong{color:var(--ink)}

/* footer */
footer{background:var(--black);color:rgba(255,255,255,.65);padding:40px 0;font-size:13px;border-top:6px solid var(--red)}
footer .wrap{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;align-items:center}
footer a{color:#fff}
footer .fbrand{font-family:var(--disp);text-transform:uppercase;font-size:18px;color:#fff}

/* I Got the Hook Up photo wall */
.hookwall{background:var(--black);color:#fff;border-block:6px solid var(--red);padding:56px 0 50px;overflow:hidden}
.hookwall .wrap{margin-bottom:24px}
.marquee-img{display:flex;align-items:center;width:max-content;animation:revscroll 45s linear infinite}
.marquee-img:hover{animation-play-state:paused}
.marquee-img img{height:230px;width:auto;display:block;margin-right:16px;border:2px solid #fff;border-radius:4px;box-shadow:4px 4px 0 var(--red)}
@media (prefers-reduced-motion:reduce){.marquee-img{animation:none}}


/* ===== mobile optimization (2026-07-07) ===== */
html,body{overflow-x:hidden}
.hamburger{display:none;margin-left:auto;background:transparent;border:0;padding:8px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.hamburger span{display:block;width:24px;height:2.5px;background:var(--ink);margin:5px 0;border-radius:2px;transition:transform .2s ease,opacity .2s ease}
.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-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:65;opacity:0;visibility:hidden;transition:opacity .2s ease}
.mobile-backdrop.open{opacity:1;visibility:visible}
.mobile-nav{position:fixed;top:0;right:0;width:min(320px,86vw);height:100%;background:var(--white);border-left:3px solid var(--red);z-index:70;transform:translateX(100%);transition:transform .25s ease;display:flex;flex-direction:column;padding:74px 26px 26px;gap:2px;box-shadow:-8px 0 30px rgba(0,0,0,.4)}
.mobile-nav.open{transform:translateX(0)}
.mobile-nav a{color:var(--ink);text-decoration:none;font-size:18px;font-weight:700;padding:15px 2px;border-bottom:1px solid var(--line)}
.mobile-nav a.on{color:var(--red)}
.mobile-nav a.btn{margin-top:20px;border-bottom:0;text-align:center;color:#fff}
.mobile-nav a.btn+a.btn{margin-top:12px}
.mobile-nav .close{position:absolute;top:20px;right:22px;background:transparent;border:0;font-size:26px;line-height:1;color:var(--ink);cursor:pointer}
@media(max-width:820px){
  nav.main{display:none}
  .hamburger{display:block}
  .topbar>.wrap>.btn{display:none}
  .topbar>.wrap>.topsocial{display:none}
  .topbar .wrap{gap:12px;height:60px}
  .brand .disp{font-size:16px}
  .brand .lips{width:34px;height:34px}
  section{padding:48px 0}
  .hero .wrap{padding:52px 20px 44px}
  .page-hero .wrap{padding:38px 20px 32px}
  .sec-head{margin-bottom:24px}
  .proof{gap:16px 24px;margin-top:34px}
  .split{gap:22px}
  .promo .wrap{gap:4px 14px}
}
@media(max-width:480px){
  .wrap{padding:0 18px}
  .hero h1{font-size:clamp(32px,9vw,50px)}
  .rev-score .num{font-size:58px}
  .rev-head{gap:12px 18px}
  .marquee .rev{width:270px}
  .hookwall .marquee-img img,.marquee-img img{height:180px}
}


/* brand logo image (2026-07-07) */
.brand .brandlogo{height:56px;width:auto;display:block}
@media(max-width:820px){.brand .brandlogo{height:46px}}

/* ============ Reggie round 1 (black) ============ */
/* Bigger, bolder main headline */
.hero h1{font-size:clamp(52px,9.5vw,132px);max-width:15ch;line-height:1.02}
/* Headline in logo colors: orange top -> yellow bottom */
.drip-hero{
  background:linear-gradient(180deg,#FB6A0A 0%,#FF8A1E 38%,#FFC72C 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  color:#FF8A1E;
  filter:drop-shadow(0 3px 0 rgba(0,0,0,.35));
}

/* Reggie: "What's Up Family?" welcome greeting at the very top */
.greet{background:var(--gold);color:#111;text-align:center;font-family:var(--marker);font-size:15px;letter-spacing:.02em;padding:9px 0}

/* Bottom-right mascot guide */
.btn-gold{background:var(--gold);color:#111}
.btn-gold:hover{background:#e6a200}
.family-guide{position:fixed;right:16px;bottom:0;z-index:75;width:600px;max-width:calc(100vw - 24px);height:340px;pointer-events:none}
.family-guide-trigger{position:absolute;right:0;bottom:-12px;width:188px;height:300px;padding:0;border:0;background:transparent;pointer-events:auto;filter:drop-shadow(0 12px 18px rgba(0,0,0,.52));transition:transform .22s ease;z-index:2}
.family-guide-trigger:hover{transform:translateY(-5px)}
.family-guide-trigger img{display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom}
.family-guide-nudge{position:absolute;right:-4px;bottom:26px;z-index:2;padding:7px 11px;border:2px solid #fff;border-radius:999px;background:var(--red);color:#fff;font-size:11px;font-weight:800;letter-spacing:.03em;box-shadow:0 6px 16px rgba(0,0,0,.35);transition:opacity .18s ease,transform .18s ease}
.guide-label-mobile{display:none}
.family-guide.open .family-guide-nudge{opacity:0;transform:translateY(5px);pointer-events:none}
.family-guide-card{position:absolute;right:156px;bottom:34px;width:410px;padding:25px 28px 27px;background:#0a0a0a;border:2px solid rgba(243,233,220,.28);border-radius:12px;box-shadow:8px 8px 0 var(--red),0 22px 60px rgba(0,0,0,.58);pointer-events:auto;opacity:0;visibility:hidden;transform:translate(24px,18px) scale(.94);transform-origin:bottom right;transition:opacity .22s ease,transform .22s ease,visibility .22s;z-index:1}
.family-guide-card::after{content:"";position:absolute;right:-18px;bottom:48px;width:30px;height:30px;background:#0a0a0a;border-top:2px solid rgba(243,233,220,.28);border-right:2px solid rgba(243,233,220,.28);transform:rotate(45deg)}
.family-guide.open .family-guide-card{opacity:1;visibility:visible;transform:translate(0) scale(1)}
.family-guide-close{position:absolute;top:10px;right:13px;border:0;background:transparent;color:var(--ink-dim);font-size:22px;line-height:1;padding:5px}
.family-guide-close:hover{color:#fff}
.family-guide-kicker{color:var(--gold);font-size:10px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;margin-bottom:7px}
.family-guide-card h2{font-size:38px;color:#fff;margin:0 32px 10px 0}
.family-guide-card p{color:var(--ink-dim);font-size:15px;line-height:1.55;max-width:34ch}
.family-guide-actions{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:20px}
.family-guide-actions .btn{padding:12px 13px;font-size:13px}

@media(max-width:680px){
  .family-guide{right:8px;width:calc(100vw - 16px);height:385px}
  .family-guide-trigger{width:126px;height:196px;bottom:-8px}
  .family-guide-nudge{right:-2px;bottom:18px;min-width:118px;padding:7px 9px;border-color:var(--red);background:#fff;color:#171212;font-size:10px;text-align:center;white-space:nowrap}
  .guide-label-desktop{display:none}
  .guide-label-mobile{display:inline}
  .family-guide-card{right:6px;bottom:153px;width:calc(100vw - 28px);padding:22px 21px 23px;border-radius:10px;transform-origin:bottom right}
  .family-guide-card::after{right:55px;bottom:-17px;border-top:0;border-left:0;border-right:2px solid rgba(243,233,220,.28);border-bottom:2px solid rgba(243,233,220,.28)}
  .family-guide-card h2{font-size:32px}
  .family-guide-card p{font-size:14px}
  .family-guide-actions{gap:8px}
  .family-guide-actions .btn{font-size:12px;padding:11px 8px}
}

/* Hero headline as brush-lettering image */
.hero-h1{margin:0}
.hero-headline{display:block;width:min(96%,680px);height:auto;margin:2px 0 8px;margin-left:-10px}

/* Real family photos, treated like a fanned deck of retro instant prints */
.hero .wrap{max-width:1380px}
.hero-intro{display:grid;grid-template-columns:minmax(0,1fr) clamp(440px,38vw,560px);gap:clamp(26px,3vw,46px);align-items:center}
.hero-copy{position:relative;z-index:2;min-width:0}
.hero-prints{position:relative;width:min(100%,560px);height:410px;margin-left:auto;isolation:isolate}
.deck-stage{position:absolute;top:0;left:50%;width:540px;height:400px;transform:translateX(-50%);transform-origin:top center}
.deck-print{position:absolute;margin:0;padding:8px 8px 27px;background:#f4efe6;border:1px solid rgba(85,60,42,.34);box-shadow:0 22px 50px rgba(0,0,0,.52),0 2px 0 rgba(255,255,255,.68) inset;overflow:hidden;transition:transform .22s ease,box-shadow .22s ease}
.deck-print::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 26px rgba(87,55,28,.08)}
.deck-print img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.88) sepia(.07) contrast(1.04)}
.deck-back{top:13px;width:142px;height:190px;padding-bottom:22px;z-index:1}
.deck-back img{object-position:50% 38%}
.deck-back:nth-child(1){left:116px;transform:rotate(-15deg) translateY(28px)}
.deck-back:nth-child(2){left:205px;transform:rotate(-6deg) translateY(4px)}
.deck-back:nth-child(3){left:294px;transform:rotate(6deg) translateY(5px)}
.deck-back:nth-child(4){left:382px;transform:rotate(15deg) translateY(29px)}
.deck-feature{top:116px;width:188px;height:266px;z-index:5;padding:9px 9px 31px}
.deck-feature-left{left:8px;transform:rotate(-9deg) translateY(9px)}
.deck-feature-center{top:82px;left:158px;width:224px;height:304px;z-index:8;padding:10px 10px 40px;transform:rotate(-.4deg);box-shadow:0 28px 64px rgba(0,0,0,.64),0 2px 0 rgba(255,255,255,.72) inset}
.deck-feature-right{left:344px;transform:rotate(9deg) translateY(9px)}
.deck-feature-left img{object-position:58% 48%}
.deck-feature-center img{object-position:47% 45%}
.deck-feature-right img{object-position:50% 44%}
.deck-feature figcaption{position:absolute;left:10px;right:10px;bottom:10px;text-align:center;color:#302922;font-family:Arial,sans-serif;font-size:13px;line-height:1;letter-spacing:.14em}

/* Hero: bigger headline + smoke/fire ambiance */
.hero{overflow:hidden}
.hero .wrap{position:relative;z-index:2;padding-top:60px;padding-bottom:54px}
.hero-fx{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
/* amber firepit radial glow removed 2026-07-14 (owner: pure black, no tint) */
.hero-headline{width:min(100%,1000px);height:auto;display:block;margin:0 0 6px -14px}
.hero p.lead{margin-top:14px}
@media(max-width:820px){.hero-headline{margin-left:-4px}}

/* Hero: pop-out header + hotter grill fire */
.hero-headline{filter:drop-shadow(0 6px 0 rgba(0,0,0,.5)) drop-shadow(0 0 30px rgba(255,95,0,.5));animation:heroPop .75s cubic-bezier(.2,.9,.25,1.35) both}
@keyframes heroPop{0%{opacity:0;transform:scale(.8) translateY(16px)}55%{opacity:1}100%{opacity:1;transform:scale(1) translateY(0)}}
@media (prefers-reduced-motion:reduce){.hero-headline{animation:none}}

/* Hero = three stacked sections: content, firepit band, business info on black */
.hero .wrap{z-index:3}
.hero::before,.hero::after{display:none}

/* firepit: grill + flames live in this band, but the hero is pure black so the
   video blends in seamlessly and its smoke rises UP behind the headline (no seam). */
.hero{background:#000}
.firepit{position:relative;width:100%;line-height:0;background:transparent;height:clamp(210px,24vw,380px)}
.firepit .hero-grill{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,1560px);max-width:1560px;min-width:0;height:auto;display:block;z-index:0;pointer-events:none;opacity:.92;filter:saturate(.85) contrast(1.05) brightness(.9);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%)}
.firepit,.hero .wrap{overflow:visible}

/* business info: solid black band below the firepit */
.hero-info{background:#000;position:relative;z-index:3}
.hero-info .wrap{padding-top:30px;padding-bottom:38px}
.hero-info .proof{margin:0;padding:0;border-top:0}

/* Mobile: tighter firepit band + snug info panel */
@media(max-width:820px){
  .hero .wrap{padding-bottom:34px}
  .firepit .hero-grill{width:106%;min-width:760px;max-width:none;opacity:.94;filter:saturate(.88) contrast(1.04) brightness(.92)}
  .hero-info .wrap{padding-top:22px;padding-bottom:26px}
}

@media(hover:hover) and (prefers-reduced-motion:no-preference){
  .deck-feature-left:hover{transform:rotate(-6deg) translate(-5px,-3px)}
  .deck-feature-center:hover{transform:rotate(0) translateY(-6px)}
  .deck-feature-right:hover{transform:rotate(6deg) translate(5px,-3px)}
  .deck-feature:hover{box-shadow:0 30px 66px rgba(0,0,0,.68),0 2px 0 rgba(255,255,255,.7) inset}
}

@media(max-width:1020px){
  .hero-intro{grid-template-columns:1fr}
  .hero-prints{width:450px;height:350px;margin:28px auto 0}
  .deck-stage{transform:translateX(-50%) scale(.82)}
}

@media(max-width:820px){
  .hero-prints{width:100%;max-width:340px;height:270px;margin-top:24px}
  .deck-stage{transform:translateX(-50%) scale(.62)}
}

/* ============ Homepage finish pass (2026-07-09) ============ */
/* Scoped to the homepage so the menu, catering, and about pages keep their
   existing layout. The three-part hero and firepit blend above stay untouched. */
.home{background:#000}
.home .topbar{border-bottom:1px solid rgba(200,16,46,.72);box-shadow:0 1px 0 rgba(243,233,220,.16),0 10px 34px rgba(0,0,0,.28)}
.home .topbar .wrap{max-width:1120px}

.home .btn{border-radius:5px;min-height:44px;transition:transform .18s ease,background-color .18s ease,border-color .18s ease,box-shadow .18s ease;box-shadow:inset 0 -2px 0 rgba(0,0,0,.2)}
.home .btn-red{box-shadow:inset 0 -2px 0 rgba(0,0,0,.22),0 8px 24px rgba(200,16,46,.18)}
.home .btn-line-inv{background:rgba(255,255,255,.02);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}

.home .promo{padding:16px 0;background:linear-gradient(90deg,#f2a900 0%,#ffc13a 50%,#f2a900 100%);border-block:3px solid var(--red);box-shadow:0 12px 32px rgba(0,0,0,.2)}
.home .promo .wrap{justify-content:center;gap:8px 24px;max-width:1120px}
.home .promo .tag{font-size:25px;line-height:1}
.home .promo .deal{font-size:15px;line-height:1.45}

.home section{position:relative;padding:clamp(72px,8vw,104px) 0}
.home #best-sellers{background:linear-gradient(180deg,#050505 0%,#080808 100%)}
.home #packs{background:linear-gradient(180deg,#101010 0%,#0b0b0b 100%);border-block:1px solid rgba(243,233,220,.14)}

.home section .sec-head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(280px,.72fr);align-items:end;gap:34px;margin-bottom:42px;padding-top:20px;border-top:2px solid transparent;border-image:linear-gradient(90deg,var(--red) 0 76px,rgba(243,233,220,.14) 76px 100%) 1}
.home section .sec-head h2{font-size:clamp(34px,4.4vw,52px);letter-spacing:.025em;text-shadow:0 3px 0 rgba(0,0,0,.35)}
.home section .sec-head .note{max-width:42ch;padding-left:18px;border-left:2px solid rgba(255,179,0,.72);font-size:15px;line-height:1.65}

.home .cards{gap:24px}
.home .card{position:relative;overflow:hidden;padding:28px;gap:13px;border:1px solid rgba(243,233,220,.2);border-top:3px solid var(--red);border-radius:8px;background:linear-gradient(145deg,#101010 0%,#070707 72%);box-shadow:0 18px 48px rgba(0,0,0,.24);transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.home #best-sellers .card,.home #packs .card{min-height:300px}
.home .card .feeds{align-self:flex-start;padding:5px 8px;border:1px solid rgba(200,16,46,.32);border-radius:3px;background:rgba(200,16,46,.08);color:#ff6679;font-size:10px;line-height:1.2}
.home .card h3{font-size:clamp(24px,2.2vw,29px);line-height:1.08;letter-spacing:.015em}
.home .card p{font-size:15px;line-height:1.65}
.home .card .price{margin-top:6px;padding-top:14px;border-top:1px solid rgba(243,233,220,.12);font-size:30px;line-height:1;color:#fff}
.home .card .btn{margin-top:2px;width:100%}

.home .revwall{padding:82px 0 72px;border-block-width:4px;background:linear-gradient(180deg,#000 0%,#0a0a0a 100%)}
.home .revwall .wrap{margin-bottom:40px}
.home .review-heading{margin-bottom:28px;padding-top:18px;border-top:2px solid transparent;border-image:linear-gradient(90deg,var(--gold) 0 76px,rgba(255,255,255,.14) 76px 100%) 1}
.home .review-heading h2{font-size:clamp(34px,4.4vw,52px)}
.home .rev-head{justify-content:space-between}
.home .rev-chips{max-width:610px}
.home .rev-chips span{background:rgba(255,179,0,.05)}

.home #visit .split{grid-template-columns:1fr .82fr;gap:clamp(32px,6vw,72px);align-items:center}
.home .visit-eyebrow{margin-bottom:16px}
.home .visit-heading{max-width:14ch;margin-bottom:24px;font-size:clamp(38px,5vw,58px)}
.home #visit .panel{padding:34px;border-top:3px solid var(--gold);border-radius:8px;box-shadow:0 22px 56px rgba(0,0,0,.24)}
.home #visit .hours td{padding:12px 0}
.home footer{padding:48px 0;border-top-width:4px}
.home footer .wrap{max-width:1120px}

@media(hover:hover) and (prefers-reduced-motion:no-preference){
  .home .btn:hover{transform:translateY(-2px)}
  .home .btn:active{transform:translateY(0)}
  .home .card:hover{transform:translateY(-5px);border-color:rgba(255,179,0,.58);box-shadow:0 26px 64px rgba(0,0,0,.34)}
}

@media(max-width:900px){
  .home #best-sellers .cards,.home #packs .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .home #best-sellers .card,.home #packs .card{min-height:288px}
}

@media(max-width:720px){
  .home section{padding:64px 0}
  .home section .sec-head{grid-template-columns:1fr;gap:14px;margin-bottom:30px;padding-top:16px}
  .home section .sec-head h2{font-size:clamp(31px,10vw,42px)}
  .home section .sec-head .note{max-width:none;padding-left:14px;font-size:14.5px}
  .home #best-sellers .cards,.home #packs .cards{grid-template-columns:1fr}
  .home #best-sellers .card,.home #packs .card{min-height:0}
  .home .cards{gap:18px}
  .home .card{padding:24px;gap:12px}
  .home .card h3{font-size:27px}
  .home .card p{font-size:14.5px}
  .home .revwall{padding:64px 0 58px}
  .home .review-heading{margin-bottom:22px}
  .home .rev-head{align-items:flex-start}
  .home #visit .split{gap:30px}
  .home #visit .panel{padding:25px}
  .home .visit-heading{font-size:clamp(36px,12vw,48px)}
}

@media(max-width:480px){
  .home .promo{padding:15px 0}
  .home .promo .wrap{justify-content:flex-start;gap:7px}
  .home .promo .tag{font-size:23px}
  .home .promo .deal{font-size:14px}
  .home .card{border-radius:7px;box-shadow:0 14px 36px rgba(0,0,0,.24)}
  .home .card .price{font-size:28px}
  .home .rev-chips{gap:8px}
  .home .rev-chips span{padding:6px 11px}
  .home footer .wrap{align-items:flex-start;flex-direction:column}
}


/* ===== Chicago variation (2026-07-14): etched landmark line art ===== */

/* Warm-cream (#EAE2D6) line etchings on transparent backgrounds (assets/chicago/).
   v2 owner feedback: art must read CLEARLY at a glance — opacities are final
   design-review values. Tune any band via its --chi-art-* custom properties.
   Placements: HOME hero, MENU page-hero (title band only),
   CATERING page-hero (title band only).
   Menu list sections, catering menu/policy bands, and the shared footer stay art-free.
   Home pre-footer revwall art REMOVED in v2 (the skyline now lives on the
   menu title band instead). Postcard band removed entirely 2026-07-15 (owner). */
.chi-home .hero,.chi-menu .page-hero,.chi-catering .page-hero{position:relative;overflow:hidden}
.chi-menu .page-hero>.wrap{position:relative;z-index:1}
/* art layer rides ::after so it stacks ABOVE the catering hero's photo wash (::before, z:-1) */
.chi-home .hero::after,.chi-menu .page-hero::after,.chi-catering .page-hero::after{
  content:"";display:block;position:absolute;inset:0;width:auto;height:auto;
  z-index:0;pointer-events:none;animation:none;
  background-image:var(--chi-art);
  background-repeat:no-repeat;
  background-position:var(--chi-art-pos);
  background-size:var(--chi-art-size);
  opacity:var(--chi-art-opacity);
}
/* home hero: L train slice, quiet top-edge ghost (owner pick 2026-07-14, replaces
   taste-gate; clean rights). Only l-train use site-wide since the footer moved to the fountain. */
.chi-home .hero{
  --chi-art:url("assets/chicago/l-train-desktop.png");
  --chi-art-pos:30% -48%;
  --chi-art-size:88.4vw auto;
  --chi-art-opacity:.26;
}
/* menu title band: skyline with Navy Pier wheel as the right-side focal */
.chi-menu .page-hero{
  --chi-art:url("assets/chicago/skyline-wheel-desktop.png");
  --chi-art-pos:78% 55%;
  --chi-art-size:68vw auto;
  --chi-art-opacity:.46;
}
/* catering title band: bean, owner pick 2026-07-15 (SHOWCASE ONLY)
   (oversized + left-biased so Marina City falls outside the crop; reads
   differently than the home hero). Sits ABOVE the food-truck photo wash. */
.chi-catering .page-hero{
  --chi-art:url("assets/chicago/bean-desktop.png");
  --chi-art-pos:160% 96%;
  --chi-art-size:71vw auto;
  --chi-art-opacity:.24;
}
/* about story band ("Chicago Raised. Phoenix Smoked.") REMOVED 2026-07-15 (owner)
   along with its skyline-wheel-alt layer */
/* text legibility: localized black scrims so headlines always win over the art */
.chi-home .hero .hero-copy::before{content:"";position:absolute;inset:-34px -52px;z-index:-1;background:radial-gradient(ellipse 75% 68% at 42% 46%,rgba(0,0,0,.72),rgba(0,0,0,0) 74%)}
.chi-menu .page-hero>.wrap{z-index:2}
.chi-menu .page-hero>.wrap::before{content:"";position:absolute;inset:-24px -36px;z-index:-1;background:linear-gradient(90deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.5) 46%,rgba(0,0,0,0) 72%)}
.chi-catering .page-hero>.wrap::before{content:"";position:absolute;inset:-24px -36px;z-index:-1;background:linear-gradient(90deg,rgba(0,0,0,.74) 0%,rgba(0,0,0,.46) 50%,rgba(0,0,0,0) 76%)}

/* WebP with PNG fallback where image-set is supported */
@supports (background-image:image-set(url("i.webp") type("image/webp"))){
  .chi-home .hero{--chi-art:image-set(url("assets/chicago/l-train-desktop.webp") type("image/webp"),url("assets/chicago/l-train-desktop.png") type("image/png"))}
  .chi-catering .page-hero{--chi-art:image-set(url("assets/chicago/bean-desktop.webp") type("image/webp"),url("assets/chicago/bean-desktop.png") type("image/png"))}
  .chi-menu .page-hero{--chi-art:image-set(url("assets/chicago/skyline-wheel-desktop.webp") type("image/webp"),url("assets/chicago/skyline-wheel-desktop.png") type("image/png"))}
}
/* mobile: 800px assets + HIGHER opacity (small screens need more) */
@media(max-width:768px){
  .chi-home .hero{--chi-art:url("assets/chicago/l-train-mobile.png");--chi-art-opacity:.32;--chi-art-size:150vw auto;--chi-art-pos:30% -20%}
  .chi-menu .page-hero{--chi-art:url("assets/chicago/skyline-wheel-mobile.png");--chi-art-opacity:.52;--chi-art-size:160vw auto;--chi-art-pos:88% 58%}
  .chi-catering .page-hero{--chi-art:url("assets/chicago/bean-mobile.png");--chi-art-opacity:.30;--chi-art-size:120vw auto;--chi-art-pos:110% 96%}
  @supports (background-image:image-set(url("i.webp") type("image/webp"))){
    .chi-home .hero{--chi-art:image-set(url("assets/chicago/l-train-mobile.webp") type("image/webp"),url("assets/chicago/l-train-mobile.png") type("image/png"))}
    .chi-catering .page-hero{--chi-art:image-set(url("assets/chicago/bean-mobile.webp") type("image/webp"),url("assets/chicago/bean-mobile.png") type("image/png"))}
    .chi-menu .page-hero{--chi-art:image-set(url("assets/chicago/skyline-wheel-mobile.webp") type("image/webp"),url("assets/chicago/skyline-wheel-mobile.png") type("image/png"))}
  }
}

/* catering menu (real printed menu, 2026-07-14) */
.catmenu{background:var(--black);color:#fff;border:1.5px solid var(--line);border-radius:4px;padding:30px;box-shadow:6px 6px 0 var(--red)}
.catmenu-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:26px 46px}
.cmi{display:flex;gap:12px;align-items:baseline;padding:7px 0;font-family:var(--serif);font-size:16px;border-bottom:1px dotted rgba(255,255,255,.25)}
.cmi:last-child{border-bottom:0}
.cmi .nm{flex:1;min-width:0}
.cmi .pr{width:62px;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.cmi.head{font-family:var(--ui);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55);font-weight:700;border-bottom:1px solid rgba(255,255,255,.3)}
.policy{list-style:none;margin:0;padding:0}
.policy li{padding:9px 0;border-bottom:1px solid var(--line);font-size:15px;color:var(--ink-dim)}
.policy li:last-child{border-bottom:0}
.policy li strong{color:var(--ink)}
@media(max-width:560px){.catmenu{padding:22px 18px}.catmenu-grid{grid-template-columns:1fr;gap:22px}}

/* framed photo card (home teaser; the about "frames" grid was removed 2026-07-15) */
.frame{position:relative;background:var(--paper);border:1.5px solid var(--line);border-radius:4px;box-shadow:4px 4px 0 var(--red);display:flex;align-items:center;justify-content:center;overflow:hidden}
.frame::before{content:"";position:absolute;inset:10px;border:1.5px dashed var(--line);border-radius:3px}
.frame.p45{aspect-ratio:4/5}
.frame.l32{aspect-ratio:3/2}
.frame span{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim);font-weight:700;text-align:center;padding:0 16px}
.frame.filled{margin:0}
.frame.filled::before{display:none}
.frame.filled img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* ===== Chicago outline v3 (2026-07-14 late): FULL COVERAGE — every black band on
   all four pages carries a cream (#EAE2D6) etching (owner directive: use ALL the
   outline images; trademark-risky art allowed for local showcase with SHOWCASE-ONLY
   flags in the HTML). Same layer system as above: ::after art plane at z0,
   content at z1+, per-band custom properties, WebP image-set + PNG fallback,
   mobile variants at +0.06 opacity. Reuse rule: one image max two placements
   site-wide (different crop/position), never twice on the same page. */

.chi-band{position:relative;overflow:hidden}
.chi-band>.wrap{position:relative;z-index:1}
.chi-band .marquee-clip{position:relative;z-index:1}
.chi-band::after{
  content:"";display:block;position:absolute;inset:0;
  z-index:0;pointer-events:none;
  background-image:var(--chi-art);
  background-repeat:no-repeat;
  background-position:var(--chi-art-pos);
  background-size:var(--chi-art-size);
  opacity:var(--chi-art-opacity);
}

/* ---- HOME (owner picks baked 2026-07-14, captured at 1470px) ---- */
/* best-sellers band: Taste of Chicago fork gate, bottom-anchored oversize crop
   (SHOWCASE ONLY — rival event brand lettering, see HTML flag) */
.chi-home .signature-section{--chi-art:url("assets/chicago/taste-gate-desktop.png");--chi-art-pos:50% 160%;--chi-art-size:105vw auto;--chi-art-opacity:.58}
/* Feed the Whole Crib: skyline+wheel, bottom-anchored (2nd use w/ menu title band; replaces Jordan) */
.chi-home #packs{--chi-art:url("assets/chicago/skyline-wheel-desktop.png");--chi-art-pos:50% 160%;--chi-art-size:90vw auto;--chi-art-opacity:.36}
/* Word on the Street (home): art OFF per owner picks (theatre keeps its about-page use) */
/* South Side Roots teaser: Pritzker Pavilion concert crowd */
.chi-home #family-teaser{--chi-art:url("assets/chicago/pavilion-desktop.png");--chi-art-pos:82% 55%;--chi-art-size:63.9vw auto;--chi-art-opacity:.42}
/* Visit the Pit: Derrick Rose portrait, 2nd use w/ menu-band-1 — denser than the old
   White Sox mark so opacity drops .55→.48 (SHOWCASE ONLY — likeness, see HTML flag) */
.chi-home #visit{--chi-art:url("assets/chicago/rose-desktop.png");--chi-art-pos:43% 48%;--chi-art-size:34vw auto;--chi-art-opacity:.48}

/* ---- MENU ---- */
/* first menu list band: Derrick Rose portrait, right margin (SHOWCASE ONLY — see HTML flag) */
.chi-menu .menu-band-1{--chi-art:url("assets/chicago/rose-desktop.png");--chi-art-pos:100% 12%;--chi-art-size:32.7vw auto;--chi-art-opacity:.46}
/* hookwall: Bears poster (SHOWCASE ONLY — see HTML flag) */
.chi-menu .hookwall{--chi-art:url("assets/chicago/bears-desktop.png");--chi-art-pos:100% 12%;--chi-art-size:29.9vw auto;--chi-art-opacity:.42}
/* second menu list band: White Sox mark, left margin (SHOWCASE ONLY — see HTML flag) */
.chi-menu .menu-band-2{--chi-art:url("assets/chicago/whitesox-desktop.png");--chi-art-pos:0% 40%;--chi-art-size:43.5vw auto;--chi-art-opacity:.60}

/* ---- CATERING ---- */
/* catering builder band: skyline-wheel, owner pick 2026-07-15 */
.chi-catering .catmenu-band{--chi-art:url("assets/chicago/skyline-wheel-desktop.png");--chi-art-pos:100% 4%;--chi-art-size:97vw auto;--chi-art-opacity:.24}
/* Review & Reserve (checkout): Buckingham Fountain 2nd use, wide centered crop */
.chi-catering #checkout-details{--chi-art:url("assets/chicago/postcard-letters-desktop.png");--chi-art-pos:1% 101%;--chi-art-size:77vw auto;--chi-art-opacity:.26}

/* ---- ABOUT (owner picks baked 2026-07-15) ---- */
/* family hero: Jordan silhouette returns here (dropped from home earlier), owner
   export opacity .76 (SHOWCASE ONLY — likeness, see HTML flag) */
.chi-about .about-family-hero{--chi-art:url("assets/chicago/jordan-desktop.png");--chi-art-pos:6% 42%;--chi-art-size:90vw auto;--chi-art-opacity:.24}
/* Family Behind the Pit frames section REMOVED 2026-07-15 (owner) — Buddy Guy art went with it */
/* Word on the Street (about): art OFF per owner picks 2026-07-15 (theatre now unused site-wide; assets kept) */
/* Visit the Pit (about): postcard-letters, owner pick 2026-07-15 */
.chi-about .visit-band{--chi-art:url("assets/chicago/postcard-letters-desktop.png");--chi-art-pos:0% 62%;--chi-art-size:61.2vw auto;--chi-art-opacity:.46}

/* ---- SHARED FOOTER (all four pages): Buckingham Fountain, deliberately quiet
   (owner pick 2026-07-15, replaces the L train; fountain's 2nd use w/ catering #book) ---- */
footer.chi-band{--chi-art:url("assets/chicago/fountain-desktop.png");--chi-art-pos:50% 60%;--chi-art-size:102vw auto;--chi-art-opacity:.30}

/* ---- localized black scrims: text always wins over the art. On a pure black
   page a blurred black plate is invisible as a shape — it only dims the etching
   under the text block. Verified AA: worst case body text over scrimmed art
   >= 6.5:1, headings far above 3:1. ---- */
.chi-home .concept-heading,
.chi-home #packs .sec-head,
.chi-home #family-teaser .prose,
.chi-home #visit .visit-info,
.chi-catering .catmenu-band .sec-head,
.chi-catering #checkout-details .sec-head,
.chi-about .about-family-hero .about-family-copy,
.chi-about .visit-band .visit-info{position:relative;z-index:1}
.chi-home .concept-heading::before,
.chi-home #packs .sec-head::before,
.chi-home #family-teaser .prose::before,
.chi-home #visit .visit-info::before,
.chi-menu .menu-band-1 .wrap::before,
.chi-menu .menu-band-2 .wrap::before,
.chi-menu .hookwall .wrap::before,
.chi-catering .catmenu-band .sec-head::before,
.chi-catering #checkout-details .sec-head::before,
.chi-about .visit-band .visit-info::before,
footer.chi-band .wrap::before{
  content:"";position:absolute;inset:-18px -28px;z-index:-1;
  background:rgba(0,0,0,.74);border-radius:32px;
  box-shadow:0 0 46px 28px rgba(0,0,0,.74);
}
/* about family hero scrim REWORKED 2026-07-15 (owner NOTE 1): the old full plate
   smothered the Jordan etching. Tight, light local plate behind the copy only,
   so the art reads clearly like the home hero. Heading stays far above AA
   (white display text on <= .35-dimmed black). */
.chi-about .about-family-hero .about-family-copy::before{
  content:"";position:absolute;inset:-14px -20px;z-index:-1;
  background:rgba(0,0,0,.35);border-radius:22px;
  box-shadow:0 0 22px 10px rgba(0,0,0,.35);
}
/* footer scrim a touch lighter so the train still ghosts through */
footer.chi-band .wrap::before{background:rgba(0,0,0,.58);inset:-12px -24px;box-shadow:0 0 36px 20px rgba(0,0,0,.58)}
/* WebP with PNG fallback (v3 bands) */
@supports (background-image:image-set(url("i.webp") type("image/webp"))){
  .chi-home .signature-section{--chi-art:image-set(url("assets/chicago/taste-gate-desktop.webp") type("image/webp"),url("assets/chicago/taste-gate-desktop.png") type("image/png"))}
  .chi-home #packs{--chi-art:image-set(url("assets/chicago/skyline-wheel-desktop.webp") type("image/webp"),url("assets/chicago/skyline-wheel-desktop.png") type("image/png"))}
  .chi-catering #checkout-details{--chi-art:image-set(url("assets/chicago/postcard-letters-desktop.webp") type("image/webp"),url("assets/chicago/postcard-letters-desktop.png") type("image/png"))}
  .chi-home #family-teaser{--chi-art:image-set(url("assets/chicago/pavilion-desktop.webp") type("image/webp"),url("assets/chicago/pavilion-desktop.png") type("image/png"))}
  .chi-menu .menu-band-2{--chi-art:image-set(url("assets/chicago/whitesox-desktop.webp") type("image/webp"),url("assets/chicago/whitesox-desktop.png") type("image/png"))}
  .chi-menu .menu-band-1,.chi-home #visit{--chi-art:image-set(url("assets/chicago/rose-desktop.webp") type("image/webp"),url("assets/chicago/rose-desktop.png") type("image/png"))}
  .chi-menu .hookwall{--chi-art:image-set(url("assets/chicago/bears-desktop.webp") type("image/webp"),url("assets/chicago/bears-desktop.png") type("image/png"))}
  .chi-catering .catmenu-band{--chi-art:image-set(url("assets/chicago/skyline-wheel-desktop.webp") type("image/webp"),url("assets/chicago/skyline-wheel-desktop.png") type("image/png"))}
  .chi-about .visit-band{--chi-art:image-set(url("assets/chicago/postcard-letters-desktop.webp") type("image/webp"),url("assets/chicago/postcard-letters-desktop.png") type("image/png"))}
  .chi-about .about-family-hero{--chi-art:image-set(url("assets/chicago/jordan-desktop.webp") type("image/webp"),url("assets/chicago/jordan-desktop.png") type("image/png"))}
  footer.chi-band{--chi-art:image-set(url("assets/chicago/fountain-desktop.webp") type("image/webp"),url("assets/chicago/fountain-desktop.png") type("image/png"))}
}

/* mobile (v3 bands): 800/600px assets, +0.06 opacity, repositioned crops */
@media(max-width:768px){
  .chi-home .signature-section{--chi-art:url("assets/chicago/taste-gate-mobile.png");--chi-art-opacity:.64;--chi-art-size:170vw auto;--chi-art-pos:50% 6%}
  .chi-home #packs{--chi-art:url("assets/chicago/skyline-wheel-mobile.png");--chi-art-opacity:.42;--chi-art-size:200vw auto;--chi-art-pos:50% 110%}
  .chi-home #family-teaser{--chi-art:url("assets/chicago/pavilion-mobile.png");--chi-art-opacity:.48;--chi-art-size:180vw auto;--chi-art-pos:60% 30%}
  .chi-home #visit{--chi-art:url("assets/chicago/rose-mobile.png");--chi-art-opacity:.54;--chi-art-size:90vw auto;--chi-art-pos:43% 20%}
  .chi-menu .menu-band-1{--chi-art:url("assets/chicago/rose-mobile.png");--chi-art-opacity:.52;--chi-art-size:85vw auto;--chi-art-pos:100% 4%}
  .chi-menu .hookwall{--chi-art:url("assets/chicago/bears-mobile.png");--chi-art-opacity:.46;--chi-art-size:80vw auto;--chi-art-pos:100% 20%}
  .chi-menu .menu-band-2{--chi-art:url("assets/chicago/whitesox-mobile.png");--chi-art-opacity:.65;--chi-art-size:110vw auto;--chi-art-pos:0% 30%}
  .chi-catering .catmenu-band{--chi-art:url("assets/chicago/skyline-wheel-mobile.png");--chi-art-opacity:.30;--chi-art-size:170vw auto;--chi-art-pos:80% 2%}
  .chi-catering #checkout-details{--chi-art:url("assets/chicago/postcard-letters-mobile.png");--chi-art-opacity:.32;--chi-art-size:140vw auto;--chi-art-pos:10% 101%}
  .chi-about .about-family-hero{--chi-art:url("assets/chicago/jordan-mobile.png");--chi-art-opacity:.30;--chi-art-size:170vw auto;--chi-art-pos:20% 30%}
  .chi-about .visit-band{--chi-art:url("assets/chicago/postcard-letters-mobile.png");--chi-art-opacity:.52;--chi-art-size:130vw auto;--chi-art-pos:30% 60%}
  footer.chi-band{--chi-art:url("assets/chicago/fountain-mobile.png");--chi-art-opacity:.34;--chi-art-size:220vw auto;--chi-art-pos:50% 60%}
  @supports (background-image:image-set(url("i.webp") type("image/webp"))){
    .chi-about .about-family-hero{--chi-art:image-set(url("assets/chicago/jordan-mobile.webp") type("image/webp"),url("assets/chicago/jordan-mobile.png") type("image/png"))}
    .chi-home .signature-section{--chi-art:image-set(url("assets/chicago/taste-gate-mobile.webp") type("image/webp"),url("assets/chicago/taste-gate-mobile.png") type("image/png"))}
    .chi-home #packs{--chi-art:image-set(url("assets/chicago/skyline-wheel-mobile.webp") type("image/webp"),url("assets/chicago/skyline-wheel-mobile.png") type("image/png"))}
    .chi-catering #checkout-details{--chi-art:image-set(url("assets/chicago/postcard-letters-mobile.webp") type("image/webp"),url("assets/chicago/postcard-letters-mobile.png") type("image/png"))}
    .chi-home #family-teaser{--chi-art:image-set(url("assets/chicago/pavilion-mobile.webp") type("image/webp"),url("assets/chicago/pavilion-mobile.png") type("image/png"))}
    .chi-menu .menu-band-2{--chi-art:image-set(url("assets/chicago/whitesox-mobile.webp") type("image/webp"),url("assets/chicago/whitesox-mobile.png") type("image/png"))}
    .chi-menu .menu-band-1,.chi-home #visit{--chi-art:image-set(url("assets/chicago/rose-mobile.webp") type("image/webp"),url("assets/chicago/rose-mobile.png") type("image/png"))}
    .chi-menu .hookwall{--chi-art:image-set(url("assets/chicago/bears-mobile.webp") type("image/webp"),url("assets/chicago/bears-mobile.png") type("image/png"))}
    .chi-catering .catmenu-band{--chi-art:image-set(url("assets/chicago/skyline-wheel-mobile.webp") type("image/webp"),url("assets/chicago/skyline-wheel-mobile.png") type("image/png"))}
    .chi-about .visit-band{--chi-art:image-set(url("assets/chicago/postcard-letters-mobile.webp") type("image/webp"),url("assets/chicago/postcard-letters-mobile.png") type("image/png"))}
    footer.chi-band{--chi-art:image-set(url("assets/chicago/fountain-mobile.webp") type("image/webp"),url("assets/chicago/fountain-mobile.png") type("image/png"))}
  }
}

/* ===== Itemized catering builder (2026-07-15): ported from the deployed Codex
   catering page, warm blacks (#171212/#100d0d/#151111/#171515/#24191a/#0d0b0b)
   swapped for this variation's neutral pure-black tokens. ===== */
.catering-menu-section{background:var(--black)}
.catering-promo{display:flex;align-items:center;justify-content:space-between;gap:14px 26px;margin-bottom:42px;padding:18px 22px;border:2px solid var(--gold);border-radius:6px;background:linear-gradient(100deg,var(--red-deep),#5f0818);box-shadow:5px 5px 0 rgba(255,179,0,.85)}
.catering-promo strong{font-family:var(--disp);font-size:clamp(22px,3vw,32px);font-weight:400;text-transform:uppercase;color:#fff}
.catering-promo span{max-width:46ch;color:rgba(255,255,255,.78);font-size:14px}
.catering-menu-head{padding-top:18px;border-top:2px solid var(--red)}
.catering-builder{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.catering-category{padding:0;overflow:hidden;border:1px solid var(--line);border-radius:7px;background:var(--paper);box-shadow:5px 5px 0 rgba(200,16,46,.78)}
.catering-category-wide{grid-column:1/-1}
.catering-category-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:15px 18px;background:var(--red);color:#fff}
.catering-category-head h3{font-family:var(--disp);font-size:24px;font-weight:400;text-transform:uppercase}
.catering-category-head span{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#ffd56f}
.catering-items{display:grid;gap:1px;background:rgba(243,233,220,.11)}
.catering-items-sides{grid-template-columns:repeat(2,minmax(0,1fr))}
.catering-items-desserts{grid-template-columns:repeat(3,minmax(0,1fr))}
.catering-item{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:14px;min-height:84px;padding:14px 16px;background:#0a0a0a;transition:background-color .16s ease,box-shadow .16s ease}
.catering-item.selected{position:relative;z-index:1;background:#181818;box-shadow:inset 4px 0 0 var(--gold)}
.catering-item h4{margin:0;font-size:16px;line-height:1.2}
.catering-item>div:first-child span{display:block;margin-top:4px;color:var(--ink-dim);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.catering-item>strong{min-width:56px;text-align:right;color:#fff;font-family:var(--serif);font-size:19px;font-variant-numeric:tabular-nums;white-space:nowrap}
.catering-item-ribs>strong{color:var(--gold)}
.qty-control{display:grid;grid-template-columns:34px 42px 34px;align-items:center;overflow:hidden;border:1px solid rgba(255,255,255,.24);border-radius:4px;background:#050505}
.qty-control button{width:34px;height:36px;padding:0;border:0;background:transparent;color:var(--gold);font-size:22px;line-height:1}
.qty-control button:hover{background:var(--red);color:#fff}
.qty-control input{width:42px;height:36px;padding:0;border:0;border-inline:1px solid rgba(255,255,255,.18);border-radius:0;text-align:center;font-weight:800;font-variant-numeric:tabular-nums;-moz-appearance:textfield}
.qty-control input::-webkit-inner-spin-button,.qty-control input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.catering-checkout-section{padding-top:78px}
.catering-checkout-layout{grid-template-columns:1.15fr .85fr}
.first-order-check{display:flex;align-items:flex-start;gap:12px;margin-top:20px;padding:15px;border:1px solid rgba(255,179,0,.55);border-radius:4px;background:rgba(255,179,0,.06);cursor:pointer}
.first-order-check input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--red)}
.first-order-check span{display:grid;gap:3px}
.first-order-check strong{font-size:14px;color:var(--ink)}
.first-order-check small{font-size:12px;color:var(--ink-dim)}
#ct-send{width:100%;margin-top:18px}
#ct-send:disabled{cursor:not-allowed;opacity:.58}
.catering-estimate{position:sticky;top:88px}
.order-items{display:grid;gap:8px;max-height:270px;overflow:auto;margin:14px 0;padding:14px 0;border-block:1px solid rgba(255,255,255,.18)}
.order-items>div{display:flex;justify-content:space-between;gap:16px;font-size:12px}
.order-items span{color:rgba(255,255,255,.72)}
.order-items b{color:var(--gold)}
.order-items strong{white-space:nowrap;font-variant-numeric:tabular-nums}
.order-empty{color:rgba(255,255,255,.55);font-size:13px}
.minimum-meter{display:grid;gap:8px;margin-bottom:18px;color:rgba(255,255,255,.72);font-size:12px}
.minimum-meter>div{height:7px;overflow:hidden;border-radius:999px;background:rgba(255,255,255,.14)}
.minimum-meter i{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--red),var(--gold));transition:width .18s ease}
.order-totals{display:grid;gap:10px}
.order-totals [hidden]{display:none!important}
.order-totals>div{display:flex;align-items:baseline;justify-content:space-between;gap:16px;font-size:13px}
.order-totals span{color:rgba(255,255,255,.65)}
.order-totals strong{font-size:16px;font-variant-numeric:tabular-nums}
.order-totals .deposit-line{margin-top:5px;padding-top:13px;border-top:1px solid rgba(255,255,255,.2)}
.order-totals .deposit-line span{color:#fff;font-weight:800}
.order-totals .deposit-line strong{color:var(--gold);font-size:22px}

@media(max-width:900px){
  .catering-items-sides{grid-template-columns:1fr}
  .catering-items-desserts{grid-template-columns:1fr}
}
@media(max-width:840px){
  .catering-builder{grid-template-columns:1fr}
  .catering-category-wide{grid-column:auto}
  .catering-checkout-layout{grid-template-columns:1fr}
  .catering-estimate{position:static}
}
@media(max-width:560px){
  .catering-promo{align-items:flex-start;flex-direction:column;margin-bottom:34px;padding:17px}
  .catering-category-head{align-items:flex-start;flex-direction:column;gap:2px}
  .catering-item{grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:14px}
  .catering-item>.qty-control{grid-column:1/-1;justify-self:stretch;grid-template-columns:42px 1fr 42px}
  .qty-control,.qty-control input{width:100%}
  .qty-control button{width:42px}
}