/* =========================================================
   BEER CITY BREAD CO. :: SITE STYLES
   Palette pulled from the buildings themselves:
   black facade, white clapboard, stone pillars, string-light
   gold, 80 ft hickory bar, and the Rogue River in Rockford.
   ========================================================= */
:root{
  --ink:#000; --paper:#fff; --stone:#e7e3dc; --stone-2:#cfc9bf; --smoke:#1c1c1c; --ash:#2b2b2b;
  --ale:#f0a92e; --ale-deep:#c9831a; --ale-glow:rgba(240,169,46,.55);
  --hickory:#8a4b24; --rogue:#1f5257; --rogue-2:#2f7a80; --rogue-mist:#e3eeee;
  --muted:#5f5f5f; --line:rgba(0,0,0,.14);
  --f-display:'Big Shoulders Display', 'Arial Narrow', Impact, sans-serif;
  --f-body:'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --f-serif:'Newsreader', Georgia, 'Times New Roman', serif;
  --bg:var(--paper); --fg:var(--ink); --accent:var(--ale); --soft:var(--stone);
  --hdr-h:76px; --wrap:1240px; --gut:clamp(20px,4vw,48px);
  --ease:cubic-bezier(.2,.8,.2,1); --ease-in:cubic-bezier(.7,0,.84,0);
  color-scheme:light;
}
body[data-theme="beltline"]{ --bg:#000; --fg:#fff; --soft:#141414; --muted:#a3a3a3; --line:rgba(255,255,255,.16); --accent:var(--ale); color-scheme:dark; }
body[data-theme="rockford"]{ --accent:var(--rogue); --soft:var(--rogue-mist); }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--hdr-h) + 20px); }
body{ margin:0; background:var(--bg); color:var(--fg); font-family:var(--f-body); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img{ max-width:100%; display:block; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }
:focus-visible{ outline:3px solid var(--ale); outline-offset:3px; border-radius:4px; }
.skip{ position:fixed; left:12px; top:-60px; z-index:200; background:var(--ale); color:#000; padding:10px 16px; border-radius:8px; font-weight:700; text-decoration:none; }
.skip:focus{ top:12px; }
.sr{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 var(--gut); }
.sec{ padding:clamp(72px,10vw,140px) 0; position:relative; }
.sec-dark{ background:#000; color:#fff; --fg:#fff; --muted:#a3a3a3; --line:rgba(255,255,255,.16); }
.sec-stone{ background:var(--stone); }
.sec-soft{ background:var(--soft); }

/* ---------- type ---------- */
.d-xxl,.d-xl,.d-l,.d-m{ font-family:var(--f-display); font-weight:800; line-height:.9; letter-spacing:.005em; text-transform:uppercase; margin:0; }
.d-xxl{ font-size:clamp(64px,13vw,210px); }
.d-xl{ font-size:clamp(52px,8.4vw,132px); }
.d-l{ font-size:clamp(40px,5.6vw,84px); }
.d-m{ font-size:clamp(28px,3.2vw,44px); line-height:1; }
.lede{ font-size:clamp(19px,1.8vw,23px); line-height:1.5; max-width:34em; color:var(--fg); }
.body-copy{ max-width:36em; color:var(--muted); }
.body-copy p{ margin:0 0 1em; }
.kicker{ font-weight:600; font-size:15px; color:var(--accent); margin:0 0 14px; display:flex; align-items:center; gap:10px; }
.kicker::before{ content:""; width:28px; height:2px; background:currentColor; }
body[data-theme="rockford"] .serif-h{ font-family:var(--f-serif); text-transform:none; font-weight:500; letter-spacing:-.01em; line-height:1; }
body[data-theme="rockford"] .d-xl.serif-h{ font-size:clamp(50px,8vw,120px); }
.serif-i{ font-family:var(--f-serif); font-style:italic; font-weight:400; }

/* ---------- buttons ---------- */
.btn{ --b:var(--fg); --t:var(--bg); display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:0 26px; border-radius:999px; border:2px solid var(--b); background:var(--b); color:var(--t); font-weight:700; font-size:16px; text-decoration:none; cursor:pointer; transition:transform .35s var(--ease), background .25s, color .25s, box-shadow .35s; position:relative; overflow:hidden; isolation:isolate; white-space:nowrap; }
.btn::after{ content:""; position:absolute; inset:0; background:var(--ale); transform:translateY(101%); transition:transform .45s var(--ease); z-index:-1; }
.btn:hover::after{ transform:none; }
.btn:hover{ color:#000; border-color:var(--ale); }
.btn-ale{ --b:var(--ale); --t:#000; }
.btn-ale::after{ background:#fff; }
.btn-ale:hover{ border-color:#fff; box-shadow:0 0 0 6px rgba(240,169,46,.25), 0 10px 40px var(--ale-glow); }
.btn-line{ background:transparent; color:var(--fg); }
.btn-sm{ min-height:42px; padding:0 18px; font-size:15px; }
.btn svg{ width:18px; height:18px; flex:none; }
.tlink{ font-weight:700; text-decoration:none; background:linear-gradient(currentColor,currentColor) 0 100%/100% 2px no-repeat; padding-bottom:2px; transition:background-size .35s var(--ease), color .2s; }
.tlink:hover{ background-size:0 2px; background-position:100% 100%; color:var(--accent); }

/* ---------- page curtain transition ---------- */
.curtain{ position:fixed; inset:0; z-index:150; pointer-events:none; display:grid; grid-template-columns:repeat(5,1fr); }
.curtain i{ background:var(--c,#000); transform-origin:top; transform:scaleY(1); transition:transform .55s var(--ease); }
.curtain i:nth-child(2){ transition-delay:.04s } .curtain i:nth-child(3){ transition-delay:.08s } .curtain i:nth-child(4){ transition-delay:.12s } .curtain i:nth-child(5){ transition-delay:.16s }
.curtain.off i{ transform:scaleY(0); transform-origin:bottom; }
.curtain.in i{ transform:scaleY(1); transform-origin:top; transition-timing-function:var(--ease-in); transition-duration:.42s; }

/* ---------- announcement bar ---------- */
.ann{ position:relative; z-index:61; background:var(--ale); color:#000; font-size:15px; font-weight:600; text-align:center; padding:9px 48px; }
.ann a{ font-weight:800; }
.ann button{ position:absolute; right:10px; top:50%; transform:translateY(-50%); background:none; border:0; width:32px; height:32px; border-radius:50%; cursor:pointer; font-size:20px; line-height:1; }
.ann button:hover{ background:rgba(0,0,0,.1); }
body[data-theme="rockford"] .ann{ background:var(--rogue); color:#fff; }

/* ---------- header ---------- */
.hdr{ position:sticky; top:0; z-index:60; height:var(--hdr-h); transition:background .35s, box-shadow .35s, color .35s, transform .45s var(--ease); color:var(--hc,var(--fg)); }
.hdr.over{ --hc:#fff; }
.hdr.solid{ background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(14px) saturate(1.4); -webkit-backdrop-filter:blur(14px) saturate(1.4); box-shadow:0 1px 0 var(--line); --hc:var(--fg); }
.hdr.hide{ transform:translateY(-100%); }
.hdr-in{ height:100%; display:flex; align-items:center; gap:18px; }
.brand{ display:flex; align-items:center; width:150px; flex:none; color:inherit; }
.brand svg{ width:100%; height:auto; }
.nav{ display:flex; align-items:center; gap:2px; margin-left:auto; }
.nav > a, .nav-dd > button{ white-space:nowrap; display:flex; align-items:center; gap:6px; height:44px; padding:0 13px; border-radius:999px; text-decoration:none; font-weight:600; font-size:15.5px; background:none; border:0; cursor:pointer; color:inherit; transition:background .2s; }
.nav > a:hover, .nav-dd > button:hover, .nav > a[aria-current="page"]{ background:color-mix(in srgb, currentColor 10%, transparent); }
.nav-dd{ position:relative; }
.nav-dd > button svg{ width:12px; transition:transform .3s; }
.nav-dd.open > button svg{ transform:rotate(180deg); }
.dd{ position:absolute; top:calc(100% + 10px); left:50%; width:560px; transform:translate(-50%,8px); opacity:0; visibility:hidden; transition:opacity .25s, transform .35s var(--ease), visibility .25s; background:#fff; color:#000; border-radius:22px; padding:12px; box-shadow:0 30px 80px rgba(0,0,0,.28); display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.nav-dd.open .dd{ opacity:1; visibility:visible; transform:translate(-50%,0); }
.dd-loc{ position:relative; border-radius:14px; overflow:hidden; aspect-ratio:4/3.3; text-decoration:none; color:#fff; display:flex; flex-direction:column; justify-content:flex-end; padding:16px; }
.dd-loc img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.dd-loc::before{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,.05) 70%); z-index:1; }
.dd-loc:hover img{ transform:scale(1.06); }
.dd-loc > *:not(img){ position:relative; z-index:2; }
.dd-loc b{ font-family:var(--f-display); font-size:30px; text-transform:uppercase; line-height:1; }
.dd-loc span{ font-size:14px; opacity:.85; }
.hdr-act{ display:flex; align-items:center; gap:10px; margin-left:10px; }
.sfx{ white-space:nowrap; display:flex; align-items:center; gap:8px; height:40px; padding:0 12px 0 10px; border-radius:999px; border:1.5px solid color-mix(in srgb, currentColor 30%, transparent); background:none; cursor:pointer; color:inherit; font-size:13.5px; font-weight:700; position:relative; }
.sfx:hover{ border-color:currentColor; }
.sfx-bars{ display:flex; align-items:flex-end; gap:2px; height:14px; width:16px; }
.sfx-bars i{ flex:1; background:currentColor; border-radius:1px; height:30%; }
.sfx.on .sfx-bars i{ animation:eq 1s ease-in-out infinite; }
.sfx.on .sfx-bars i:nth-child(2){ animation-delay:-.3s } .sfx.on .sfx-bars i:nth-child(3){ animation-delay:-.6s } .sfx.on .sfx-bars i:nth-child(4){ animation-delay:-.15s }
@keyframes eq{ 0%,100%{ height:25% } 50%{ height:100% } }
.sfx.on{ color:var(--ale); border-color:var(--ale); }
.hdr.solid .sfx.on, body:not([data-theme="beltline"]) .hdr:not(.over) .sfx.on{ color:var(--ale-deep); border-color:var(--ale-deep); }
.sfx .sfx-wait{ position:absolute; inset:-5px; border-radius:inherit; border:2px solid var(--ale); opacity:0; }
.sfx.waiting .sfx-wait{ animation:ping 1.8s ease-out infinite; }
@keyframes ping{ 0%{ opacity:.8; transform:scale(.95) } 100%{ opacity:0; transform:scale(1.25) } }
.burger{ display:none; width:46px; height:46px; border-radius:50%; border:0; background:color-mix(in srgb, currentColor 10%, transparent); cursor:pointer; place-items:center; }
.burger span{ display:block; width:20px; height:2px; background:currentColor; margin:4px auto; transition:transform .35s var(--ease), opacity .2s; }
body.mnav-open .burger span:nth-child(1){ transform:translateY(6px) rotate(45deg) }
body.mnav-open .burger span:nth-child(2){ opacity:0 }
body.mnav-open .burger span:nth-child(3){ transform:translateY(-6px) rotate(-45deg) }

.mnav{ position:fixed; inset:0; z-index:59; background:#000; color:#fff; padding:calc(var(--hdr-h) + 70px) var(--gut) 40px; display:flex; flex-direction:column; gap:4px; overflow:auto; clip-path:circle(0% at calc(100% - 44px) 38px); transition:clip-path .7s var(--ease); visibility:hidden; }
body.mnav-open .mnav{ clip-path:circle(150% at calc(100% - 44px) 38px); visibility:visible; }
body.mnav-open{ overflow:hidden; }
body.mnav-open .hdr{ --hc:#fff; background:transparent; box-shadow:none; backdrop-filter:none; }
.mnav > a{ font-family:var(--f-display); font-weight:800; text-transform:uppercase; font-size:clamp(40px,11vw,64px); line-height:1.02; text-decoration:none; opacity:0; transform:translateY(24px); transition:opacity .4s, transform .6s var(--ease), color .2s; }
.mnav > a:hover{ color:var(--ale); }
body.mnav-open .mnav > a{ opacity:1; transform:none; }
.mnav small{ display:block; font-family:var(--f-body); text-transform:none; font-size:15px; font-weight:500; opacity:.6; margin-top:-4px; margin-bottom:8px; }
.mnav-foot{ margin-top:auto; padding-top:24px; display:flex; flex-wrap:wrap; gap:10px; }

/* ---------- status pill ---------- */
.pill{ display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:700; padding:6px 12px 6px 10px; border-radius:999px; background:rgba(0,0,0,.55); color:#fff; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.pill i{ width:9px; height:9px; border-radius:50%; background:#9a9a9a; position:relative; }
.pill.open i{ background:#3ddc84; box-shadow:0 0 0 0 rgba(61,220,132,.7); animation:live 2s infinite; }
.pill.soon i{ background:var(--ale); }
@keyframes live{ 0%{ box-shadow:0 0 0 0 rgba(61,220,132,.6) } 70%{ box-shadow:0 0 0 9px rgba(61,220,132,0) } 100%{ box-shadow:0 0 0 0 rgba(61,220,132,0) } }
.pill-light{ background:rgba(255,255,255,.92); color:#000; box-shadow:0 0 0 1px rgba(0,0,0,.08); }

/* ---------- HOME hero: logo that draws itself ---------- */
.hero-home{ background:#000; color:#fff; position:relative; overflow:hidden; margin-top:calc(var(--hdr-h) * -1); padding-top:var(--hdr-h); }
.hh-stage{ min-height:min(84vh,860px); display:grid; place-items:center; position:relative; padding:40px var(--gut) 120px; }
.hh-glow{ position:absolute; inset:0; background:radial-gradient(60% 45% at 50% 55%, rgba(240,169,46,.18), transparent 70%); pointer-events:none; }
.hh-lights{ position:absolute; left:0; right:0; top:calc(var(--hdr-h) + 6px); height:90px; pointer-events:none; }
.hh-logo{ width:min(1040px,92vw); position:relative; color:#fff; }
.hh-logo svg{ width:100%; height:auto; overflow:visible; }
.hh-logo path{ fill:currentColor; fill-opacity:0; stroke:var(--ale); stroke-width:2.2; stroke-linejoin:round; filter:drop-shadow(0 0 6px var(--ale-glow)); }
.hh-logo.drawn path{ transition:fill-opacity 1s ease, stroke-opacity 1.2s ease; fill-opacity:1; stroke-opacity:0; }
.hh-sub{ margin:clamp(22px,3vw,40px) auto 0; text-align:center; font-family:var(--f-serif); font-style:italic; font-size:clamp(20px,2.4vw,30px); color:#e9e2d6; opacity:0; transform:translateY(12px); transition:opacity .9s .2s, transform 1s .2s var(--ease); }
.hh-cta{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:30px; opacity:0; transform:translateY(12px); transition:opacity .9s .45s, transform 1s .45s var(--ease); }
.hero-home.ready .hh-sub, .hero-home.ready .hh-cta{ opacity:1; transform:none; }
.hh-lights .bulb{ animation:twinkle 3.4s ease-in-out infinite; }
@keyframes twinkle{ 0%,100%{ opacity:1 } 45%{ opacity:.45 } 55%{ opacity:.9 } }
.hh-scroll{ position:absolute; bottom:34px; left:50%; transform:translateX(-50%); font-size:13px; font-weight:600; opacity:.6; display:flex; flex-direction:column; align-items:center; gap:10px; text-decoration:none; }
.hh-scroll i{ width:1.5px; height:44px; background:linear-gradient(#fff 50%, transparent 50%) 0 0/100% 200%; animation:drip 1.8s linear infinite; }
@keyframes drip{ to{ background-position:0 -100% } }

/* ---------- location doors ---------- */
.doors{ display:flex; gap:10px; height:min(78vh,760px); padding:10px; background:#000; }
.door{ position:relative; flex:1; border-radius:26px; overflow:hidden; text-decoration:none; color:#fff; transition:flex .9s var(--ease); display:flex; flex-direction:column; justify-content:flex-end; padding:clamp(22px,3vw,44px); isolation:isolate; }
.door img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform 1.4s var(--ease), filter .8s; transform:scale(1.04); }
.door::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(to top, rgba(0,0,0,.88) 5%, rgba(0,0,0,.15) 55%, rgba(0,0,0,.35)); transition:opacity .6s; }
.doors:hover .door{ flex:.8; }
.doors .door:hover{ flex:1.35; }
.door:hover img{ transform:scale(1.1); }
.door .pill{ position:absolute; top:clamp(18px,2.4vw,32px); left:clamp(18px,2.4vw,32px); }
.door-city{ font-size:15px; font-weight:600; opacity:.85; }
.door h2{ margin:4px 0 10px; font-family:var(--f-display); font-weight:900; text-transform:uppercase; font-size:clamp(46px,7vw,112px); line-height:.86; }
.door-old h2{ font-family:var(--f-serif); text-transform:none; font-weight:500; letter-spacing:-.02em; font-size:clamp(46px,6.6vw,104px); }
.door p{ margin:0; max-width:28em; opacity:.88; font-size:16px; }
.door-go{ margin-top:18px; display:inline-flex; align-items:center; gap:12px; font-weight:700; }
.door-go b{ width:46px; height:46px; border-radius:50%; background:#fff; color:#000; display:grid; place-items:center; transition:transform .5s var(--ease), background .3s; }
.door:hover .door-go b{ transform:rotate(-45deg) scale(1.08); background:var(--ale); }
.door-old:hover .door-go b{ background:#8cc7c9; }
.door-go svg{ width:18px; }

/* ---------- marquee ---------- */
.marq{ overflow:hidden; border-block:1px solid var(--line); padding:18px 0; }
.marq-track{ display:flex; gap:48px; width:max-content; animation:marq 38s linear infinite; }
.marq:hover .marq-track{ animation-play-state:paused; }
.marq span{ font-family:var(--f-display); font-weight:800; text-transform:uppercase; font-size:clamp(28px,3.6vw,48px); white-space:nowrap; display:flex; align-items:center; gap:48px; }
.marq span::after{ content:""; width:14px; height:14px; border-radius:50%; background:var(--ale); }
@keyframes marq{ to{ transform:translateX(-50%) } }

/* ---------- split layouts ---------- */
.split{ display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(36px,6vw,96px); align-items:center; }
.split.rev > :first-child{ order:2; }
.stack > * + *{ margin-top:22px; }
.mosaic{ display:grid; grid-template-columns:1fr 1fr; grid-template-rows:repeat(2, clamp(170px,19vw,280px)); gap:14px; }
.mosaic figure{ margin:0; border-radius:20px; overflow:hidden; position:relative; }
.mosaic figure:first-child{ grid-row:span 2; }
.mosaic img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); }
.mosaic figure:hover img{ transform:scale(1.05); }
.par{ will-change:transform; }

/* reveal: images uncover like a wipe; text stays quiet */
.wipe{ clip-path:inset(0 0 100% 0); transition:clip-path 1.3s var(--ease); }
.wipe.in{ clip-path:inset(0 0 0 0); }

/* ---------- dish rail ---------- */
.rail-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:36px; }
.rail-ctrl{ display:flex; gap:8px; }
.rail-ctrl button{ width:52px; height:52px; border-radius:50%; border:1.5px solid var(--line); background:none; cursor:pointer; display:grid; place-items:center; transition:background .2s, color .2s, border-color .2s; }
.rail-ctrl button:hover{ background:var(--fg); color:var(--bg); border-color:var(--fg); }
.rail-ctrl svg{ width:18px; }
.rail{ display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; padding:4px var(--gut) 24px; padding-inline:max(var(--gut), calc((100vw - var(--wrap)) / 2 + var(--gut))); scroll-padding-inline:max(var(--gut), calc((100vw - var(--wrap)) / 2 + var(--gut))); scrollbar-width:none; cursor:grab; }
.rail::-webkit-scrollbar{ display:none; }
.rail.drag{ cursor:grabbing; scroll-snap-type:none; }
.rail.drag a{ pointer-events:none; }
.dish{ flex:0 0 clamp(250px,26vw,340px); scroll-snap-align:start; text-decoration:none; color:inherit; position:relative; }
.dish-img{ aspect-ratio:4/5; border-radius:22px; overflow:hidden; position:relative; background:var(--soft); transform-style:preserve-3d; transition:transform .5s var(--ease); }
.dish-img img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); user-select:none; -webkit-user-drag:none; }
.dish:hover .dish-img img{ transform:scale(1.07); }
.dish-img .badge{ position:absolute; left:14px; top:14px; }
.dish h3{ font-family:var(--f-display); font-weight:800; text-transform:uppercase; font-size:28px; line-height:1; margin:16px 0 6px; }
.dish p{ margin:0; font-size:15px; color:var(--muted); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.dish-meta{ display:flex; justify-content:space-between; align-items:center; margin-top:10px; font-weight:700; font-size:15px; }
.badge{ display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:999px; background:var(--ale); color:#000; font-weight:700; font-size:12.5px; }
.badge.dark{ background:#000; color:#fff; }
.loc-tag{ font-size:13px; font-weight:700; padding:3px 9px; border-radius:999px; border:1.5px solid currentColor; opacity:.75; }

/* ---------- locations hero (sub-experience) ---------- */
.lhero{ position:relative; min-height:min(92vh,900px); display:flex; align-items:flex-end; overflow:hidden; margin-top:calc(var(--hdr-h) * -1); color:#fff; isolation:isolate; }
.lhero-media{ position:absolute; inset:0; z-index:-2; }
.lhero-media img{ width:100%; height:100%; object-fit:cover; }
.lhero::after{ content:""; position:absolute; inset:0; z-index:-1; }
.lhero-in{ width:100%; padding-bottom:clamp(40px,7vw,96px); padding-top:calc(var(--hdr-h) + 60px); }
.lhero h1{ margin:12px 0 18px; }
.lhero .lede{ color:inherit; opacity:.92; }
.lhero-cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:30px; }
/* Old Mill: bright daylight, the white clapboard does the talking */
.lhero-old{ color:#0b1e20; min-height:min(96vh,940px); }
.lhero-old .lhero-media img{ object-position:50% 40%; animation:kb 22s ease-in-out infinite alternate; }
@keyframes kb{ from{ transform:scale(1.02) } to{ transform:scale(1.12) translate(-1.5%, 1%) } }
.lhero-old::after{ background:linear-gradient(90deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.78) 34%, rgba(255,255,255,0) 62%); }
.lhero-old .kicker{ color:var(--rogue); }
.lhero-old .btn-line{ --b:#0b1e20; color:#0b1e20; }
.river{ position:absolute; left:0; right:0; bottom:-1px; height:70px; z-index:1; color:var(--paper); }
.river svg{ width:200%; height:100%; animation:flow 16s linear infinite; }
@keyframes flow{ to{ transform:translateX(-50%) } }
/* Beltline: black facade + string lights + tap bubbles */
.lhero-belt::after{ background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.25) 40%, rgba(0,0,0,.92)); }
.lhero-belt .lhero-media img{ filter:saturate(.9) contrast(1.05) brightness(.8); }
.bubbles{ position:absolute; inset:0; width:100%; height:100%; display:block; z-index:0; pointer-events:none; }
.lhero-belt h1{ text-shadow:0 0 60px rgba(240,169,46,.35); }

/* info bar under location heroes */
.infobar{ display:grid; grid-template-columns:repeat(4,1fr); border-bottom:1px solid var(--line); }
.infobar > div{ padding:26px var(--gut); border-right:1px solid var(--line); }
.infobar > div:last-child{ border-right:0; }
.infobar h4{ margin:0 0 6px; font-size:14px; font-weight:600; color:var(--muted); }
.infobar p{ margin:0; font-weight:600; line-height:1.45; }
.infobar a{ text-decoration:none; }
.infobar a:hover{ color:var(--accent); }

.infobar p[data-status]{ display:flex; align-items:center; gap:9px; }
.infobar p[data-status] i{ width:10px; height:10px; border-radius:50%; background:#9a9a9a; flex:none; }
.infobar p[data-status].open i{ background:#2fbf71; animation:live 2s infinite; }
.infobar p[data-status].soon i{ background:var(--ale); }
/* ---------- hours ---------- */
.hours{ width:100%; border-collapse:collapse; }
.hours td{ padding:11px 0; border-bottom:1px solid var(--line); }
.hours td:last-child{ text-align:right; font-weight:600; }
.hours tr.today td{ color:var(--accent); font-weight:700; }
body[data-theme="rockford"] .hours tr.today td{ color:var(--rogue); }
.hours tr.today td:first-child::after{ content:"Today"; margin-left:10px; font-size:12px; padding:2px 8px; border-radius:999px; background:currentColor; color:var(--bg); }
.hours tr.today td:first-child{ position:relative; }

/* ---------- timeline (Old Mill) ---------- */
.tl{ position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:56px; }
.tl::before{ content:""; position:absolute; left:0; right:0; top:34px; height:2px; background:linear-gradient(90deg, var(--rogue) var(--p,0%), var(--line) var(--p,0%)); }
.tl-item{ position:relative; padding-top:64px; }
.tl-item::before{ content:""; position:absolute; top:26px; left:0; width:18px; height:18px; border-radius:50%; background:var(--bg); border:3px solid var(--rogue); }
.tl-year{ font-family:var(--f-serif); font-size:clamp(40px,4.4vw,60px); line-height:1; color:var(--rogue); }
.tl-item h3{ margin:10px 0 6px; font-size:20px; }
.tl-item p{ margin:0; color:var(--muted); }

/* ---------- weekly specials ---------- */
.specials{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.spec{ border-radius:22px; padding:28px; background:#fff; border:1px solid var(--line); position:relative; overflow:hidden; transition:transform .5s var(--ease), box-shadow .5s; }
.spec:hover{ transform:translateY(-4px); box-shadow:0 22px 50px -24px rgba(31,82,87,.45); }
.spec.today{ background:var(--rogue); color:#fff; border-color:var(--rogue); }
.spec.today .spec-day::after{ content:"Tonight"; margin-left:8px; font-size:12px; padding:3px 9px; border-radius:999px; background:#fff; color:var(--rogue); font-weight:700; }
.spec-day{ font-weight:700; font-size:15px; display:flex; align-items:center; }
.spec h3{ font-family:var(--f-serif); font-weight:500; font-size:32px; line-height:1.05; margin:14px 0 8px; }
.spec p{ margin:0; opacity:.8; }
.spec-price{ font-family:var(--f-display); font-weight:800; font-size:48px; line-height:1; margin-top:22px; }

/* ---------- Beltline bar specs ---------- */
.specs-row{ display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); margin-top:56px; }
.specs-row > div{ padding:28px 24px 0 0; }
.specs-row b{ display:block; font-family:var(--f-display); font-weight:900; font-size:clamp(64px,8vw,120px); line-height:.85; color:var(--ale); text-shadow:0 0 40px rgba(240,169,46,.35); }
.specs-row span{ display:block; margin-top:10px; color:var(--muted); max-width:20em; }
.taps{ background:var(--ale); color:#000; }
.taps .marq{ border:0; }
.taps .marq span::after{ background:#000; }

/* ---------- menu ---------- */
.menu-shell{ display:grid; grid-template-columns:240px 1fr; gap:48px; align-items:start; }
.mside{ position:sticky; top:calc(var(--hdr-h) + 24px); }
.menu-shell > *, .mbody, .mitem{ min-width:0; }
.msearch{ position:relative; margin-bottom:18px; }
.msearch input{ width:100%; height:48px; border-radius:999px; border:1.5px solid var(--line); background:transparent; color:var(--fg); padding:0 16px 0 42px; font:inherit; font-size:15px; }
.msearch input:focus{ outline:none; border-color:var(--accent); }
.msearch svg{ position:absolute; left:15px; top:50%; transform:translateY(-50%); width:17px; opacity:.6; }
.mcats{ display:flex; flex-direction:column; gap:2px; }
.mcats button{ text-align:left; background:none; border:0; padding:9px 14px; border-radius:12px; cursor:pointer; font-weight:600; color:var(--muted); display:flex; justify-content:space-between; transition:background .2s, color .2s; }
.mcats button small{ font-weight:600; opacity:.6; }
.mcats button:hover{ color:var(--fg); background:var(--soft); }
.mcats button.on{ color:var(--bg); background:var(--fg); }
body[data-theme="rockford"] .mcats button.on{ background:var(--rogue); color:#fff; }
.msync{ margin-top:20px; font-size:13px; color:var(--muted); display:flex; gap:8px; align-items:flex-start; line-height:1.4; }
.msync i{ width:8px; height:8px; border-radius:50%; background:#3ddc84; margin-top:5px; flex:none; }
.mcat{ margin-bottom:56px; }
.mcat-h{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; border-bottom:2px solid var(--fg); padding-bottom:10px; margin-bottom:6px; }
.mcat-h h3{ margin:0; font-family:var(--f-display); font-weight:800; text-transform:uppercase; font-size:clamp(34px,4vw,52px); line-height:1; }
body[data-theme="rockford"] .mcat-h h3{ font-family:var(--f-serif); text-transform:none; font-weight:500; }
.mcat-h span{ color:var(--muted); font-size:14px; }
.mitems{ display:grid; grid-template-columns:1fr 1fr; column-gap:40px; grid-auto-flow:dense; }
.mitem{ display:grid; grid-template-columns:1fr auto; gap:4px 16px; padding:18px 0; border-bottom:1px solid var(--line); }
.mitem h4{ margin:0; font-size:17.5px; font-weight:700; display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.mitem .price{ font-weight:700; font-variant-numeric:tabular-nums; }
.mitem p{ grid-column:1/-1; margin:0; font-size:14.5px; color:var(--muted); line-height:1.5; }
.mitem.feat{ grid-column:1/-1; grid-template-columns:200px 1fr auto; align-items:center; gap:6px 24px; }
.mitem.feat .mimg{ grid-row:span 2; border-radius:16px; overflow:hidden; aspect-ratio:4/3; }
.mitem.feat .mimg img{ width:100%; height:100%; object-fit:cover; }
.mitem.feat p{ grid-column:2/-1; }
.mempty{ padding:60px 0; text-align:center; color:var(--muted); }
.menu-note{ font-size:14px; color:var(--muted); margin-top:10px; }

/* ---------- events ---------- */
.ev-filters{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:32px; }
.chip{ height:42px; padding:0 18px; border-radius:999px; border:1.5px solid var(--line); background:none; cursor:pointer; font-weight:600; font-size:15px; color:inherit; transition:all .2s; }
.chip:hover{ border-color:var(--fg); }
.chip.on{ background:var(--fg); color:var(--bg); border-color:var(--fg); }
.evlist{ display:flex; flex-direction:column; }
.ev{ display:grid; grid-template-columns:110px 1fr auto; gap:28px; align-items:center; padding:26px 0; border-top:1px solid var(--line); transition:padding .4s var(--ease); }
.ev:last-child{ border-bottom:1px solid var(--line); }
.ev:hover{ padding-left:14px; }
.ev-date{ text-align:center; border-radius:18px; padding:12px 0; background:var(--fg); color:var(--bg); }
.ev-date b{ display:block; font-family:var(--f-display); font-size:48px; line-height:.9; font-weight:900; }
.ev-date span{ font-size:13px; font-weight:700; }
.ev h3{ margin:0 0 4px; font-family:var(--f-display); font-weight:800; text-transform:uppercase; font-size:30px; line-height:1; }
.ev p{ margin:0; color:var(--muted); }
.ev-meta{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; font-size:14px; font-weight:600; margin-bottom:8px; }
.ev-act{ display:flex; gap:8px; }

/* ---------- forms ---------- */
.form{ display:grid; gap:18px; }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.row3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:18px; }
.field label, .flabel{ display:block; font-weight:700; font-size:14.5px; margin-bottom:7px; }
.field .hint{ font-weight:500; color:var(--muted); font-size:13.5px; }
.inp, .sel, .txa{ width:100%; min-height:52px; border-radius:14px; border:1.5px solid var(--line); background:var(--bg); color:var(--fg); padding:12px 16px; font:inherit; font-size:16px; transition:border-color .2s, box-shadow .2s; }
.txa{ min-height:120px; resize:vertical; }
.sel{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23777' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; background-size:18px; padding-right:44px; }
.inp:focus, .sel:focus, .txa:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
.field.bad .inp, .field.bad .sel, .field.bad .txa{ border-color:#d93b3b; }
.field .err{ display:none; color:#d93b3b; font-size:13.5px; font-weight:600; margin-top:6px; }
.field.bad .err{ display:block; }
.seg{ display:flex; gap:8px; flex-wrap:wrap; }
.seg label{ cursor:pointer; }
.seg input{ position:absolute; opacity:0; pointer-events:none; }
.seg span{ display:inline-flex; align-items:center; gap:8px; min-height:48px; padding:0 18px; border-radius:999px; border:1.5px solid var(--line); font-weight:600; transition:all .2s; }
.seg input:checked + span{ background:var(--fg); color:var(--bg); border-color:var(--fg); }
.seg input:focus-visible + span{ outline:3px solid var(--ale); outline-offset:2px; }
body[data-theme="rockford"] .seg input:checked + span{ background:var(--rogue); border-color:var(--rogue); color:#fff; }
.avail{ display:grid; grid-template-columns:70px repeat(7,minmax(0,1fr)); gap:6px; font-size:13px; font-weight:700; text-align:center; }
.avail button{ min-width:0; padding:0; height:40px; border-radius:10px; border:1.5px solid var(--line); background:none; cursor:pointer; font-weight:700; font-size:12px; color:var(--muted); transition:all .15s; }
.avail button[aria-pressed="true"]{ background:var(--ale); border-color:var(--ale); color:#000; }
.avail .al{ text-align:left; align-self:center; color:var(--muted); }
.drop{ border:2px dashed var(--line); border-radius:16px; padding:22px; text-align:center; cursor:pointer; transition:border-color .2s, background .2s; }
.drop:hover, .drop.over{ border-color:var(--accent); background:var(--soft); }
.drop input{ display:none; }
.check{ display:flex; gap:10px; align-items:flex-start; font-size:15px; cursor:pointer; }
.check input{ width:20px; height:20px; accent-color:var(--ale-deep); margin-top:2px; flex:none; }

/* ---------- catering builder ---------- */
.steps{ display:flex; gap:8px; margin-bottom:34px; flex-wrap:wrap; }
.steps li{ list-style:none; display:flex; align-items:center; gap:10px; font-weight:700; color:var(--muted); padding-right:14px; }
.steps li b{ width:34px; height:34px; border-radius:50%; display:grid; place-items:center; border:2px solid var(--line); font-size:14px; }
.steps li.on{ color:var(--fg); }
.steps li.on b{ background:var(--fg); color:var(--bg); border-color:var(--fg); }
.steps li.done b{ background:var(--ale); color:#000; border-color:var(--ale); }
.steps{ padding:0; margin-top:0; }
.pkgs{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.pkg{ border:1.5px solid var(--line); border-radius:22px; overflow:hidden; display:flex; flex-direction:column; transition:border-color .25s, transform .4s var(--ease), box-shadow .4s; background:var(--bg); }
.pkg.has{ border-color:var(--ale-deep); box-shadow:0 0 0 3px rgba(240,169,46,.3); }
.pkg-img{ aspect-ratio:16/10; overflow:hidden; }
.pkg-img img{ width:100%; height:100%; object-fit:cover; }
.pkg-b{ padding:18px; display:flex; flex-direction:column; gap:8px; flex:1; }
.pkg h4{ margin:0; font-size:18px; }
.pkg p{ margin:0; font-size:14px; color:var(--muted); flex:1; }
.pkg-f{ display:flex; justify-content:space-between; align-items:center; margin-top:8px; }
.pkg-f b{ font-size:18px; }
.pkg-f small{ color:var(--muted); font-weight:600; }
.qty{ display:flex; align-items:center; gap:4px; border:1.5px solid var(--line); border-radius:999px; padding:3px; }
.qty button{ width:34px; height:34px; border-radius:50%; border:0; background:var(--soft); cursor:pointer; font-size:18px; font-weight:700; line-height:1; }
.qty button:hover{ background:var(--ale); }
.qty output{ min-width:24px; text-align:center; font-weight:800; }
.est{ position:sticky; bottom:16px; z-index:5; margin-top:24px; background:#000; color:#fff; border-radius:20px; padding:16px 16px 16px 24px; display:flex; align-items:center; gap:18px; justify-content:space-between; flex-wrap:wrap; box-shadow:0 20px 50px -20px rgba(0,0,0,.6); }
.est b{ font-family:var(--f-display); font-size:36px; line-height:1; color:var(--ale); }
.est small{ display:block; opacity:.7; font-size:13px; }
.panel{ display:none; }
.panel.on{ display:block; animation:rise .6s var(--ease); }
@keyframes rise{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }
.tracker{ display:grid; grid-template-columns:repeat(6,1fr); gap:6px; margin:30px 0; }
.tracker div{ position:relative; padding-top:22px; font-size:13.5px; font-weight:700; color:var(--muted); }
.tracker div::before{ content:""; position:absolute; top:0; left:0; right:0; height:8px; border-radius:99px; background:var(--line); }
.tracker div.done{ color:var(--fg); }
.tracker div.done::before{ background:var(--ale); }
.tracker div.cur::before{ background:linear-gradient(90deg, var(--ale), #ffd88a, var(--ale)); background-size:200% 100%; animation:shimmer 1.6s linear infinite; }
@keyframes shimmer{ to{ background-position:-200% 0 } }

/* designer note */
.dnote{ position:relative; background:#fff8e6; color:#1d1a12; border-radius:6px 22px 22px 22px; padding:28px 30px 26px 34px; box-shadow:0 30px 60px -30px rgba(120,80,0,.45), inset 5px 0 0 var(--ale); max-width:720px; transform:rotate(-.6deg); }
.dnote h3{ margin:0 0 8px; font-family:var(--f-serif); font-weight:500; font-size:26px; }
.dnote p{ margin:0 0 10px; }
.dnote .sig{ font-family:var(--f-serif); font-style:italic; font-size:20px; margin-top:10px; }
.dnote-x{ position:absolute; top:12px; right:12px; width:36px; height:36px; border-radius:50%; border:0; background:rgba(0,0,0,.06); cursor:pointer; font-size:18px; }
.dnote-x:hover{ background:rgba(0,0,0,.12); }
.dnote-tag{ position:absolute; top:-14px; left:24px; background:#000; color:#fff; font-size:12.5px; font-weight:700; padding:5px 12px; border-radius:999px; }
.dnote-mini{ display:inline-flex; align-items:center; gap:8px; }

/* ---------- accordion ---------- */
.acc{ border-top:1px solid var(--line); }
.acc-i{ border-bottom:1px solid var(--line); }
.acc-q{ width:100%; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:24px 0; background:none; border:0; text-align:left; font-size:19px; font-weight:700; cursor:pointer; }
.acc-q i{ width:36px; height:36px; border-radius:50%; border:1.5px solid var(--line); position:relative; flex:none; transition:transform .45s var(--ease), background .2s; }
.acc-q i::before, .acc-q i::after{ content:""; position:absolute; left:50%; top:50%; width:13px; height:2px; background:currentColor; transform:translate(-50%,-50%); }
.acc-q i::after{ transform:translate(-50%,-50%) rotate(90deg); transition:transform .45s var(--ease); }
.acc-i.open .acc-q i{ background:var(--ale); border-color:var(--ale); color:#000; }
.acc-i.open .acc-q i::after{ transform:translate(-50%,-50%) rotate(0); }
.acc-a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .5s var(--ease); }
.acc-i.open .acc-a{ grid-template-rows:1fr; }
.acc-a > div{ overflow:hidden; }
.acc-a p{ margin:0 0 24px; color:var(--muted); max-width:44em; }

/* ---------- cards / misc ---------- */
.card{ border-radius:24px; padding:30px; background:var(--soft); }
.card-dark{ background:#000; color:#fff; }
.cols3{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.cols2{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.process{ counter-reset:p; display:grid; grid-template-columns:repeat(5,1fr); gap:0; margin-top:56px; border-top:1px solid var(--line); }
.process li{ list-style:none; padding:28px 22px 0 0; position:relative; }
.process li::before{ counter-increment:p; content:counter(p); font-family:var(--f-display); font-weight:900; font-size:68px; line-height:1; color:var(--ale); display:block; margin-bottom:12px; }
.process h3{ margin:0 0 6px; font-size:19px; }
.process p{ margin:0; color:var(--muted); font-size:15.5px; }
.process{ padding:0; }
.map{ border-radius:24px; overflow:hidden; aspect-ratio:4/3; background:var(--soft); border:1px solid var(--line); }
.map iframe{ width:100%; height:100%; border:0; filter:grayscale(1) contrast(1.05); }
body[data-theme="beltline"] .map iframe{ filter:grayscale(1) invert(.92) contrast(.9); }
.big-quote{ font-family:var(--f-serif); font-weight:400; font-size:clamp(30px,4vw,56px); line-height:1.12; letter-spacing:-.01em; max-width:20em; margin:0; }
.loaf-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.loaf{ border-radius:22px; padding:26px 22px; background:#fff; border:1px solid var(--line); min-height:220px; display:flex; flex-direction:column; justify-content:space-between; transition:background .3s, color .3s, transform .5s var(--ease); }
.loaf:hover{ background:#000; color:#fff; transform:translateY(-6px); }
.loaf b{ font-family:var(--f-display); font-weight:800; text-transform:uppercase; font-size:30px; line-height:1; }
.loaf span{ font-size:14.5px; opacity:.72; }
.loaf em{ font-style:normal; font-size:13px; font-weight:700; color:var(--ale-deep); }
.loaf:hover em{ color:var(--ale); }
.jobs{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.job{ border:1.5px solid var(--line); border-radius:20px; padding:22px; text-align:left; background:none; cursor:pointer; transition:all .25s; color:inherit; }
.job:hover{ border-color:var(--fg); }
.job[aria-pressed="true"]{ background:#000; color:#fff; border-color:#000; }
.job b{ display:block; font-size:19px; margin-bottom:4px; }
.job span{ font-size:14px; opacity:.7; }
.success{ text-align:center; padding:40px 20px; }
.success .tick{ width:86px; height:86px; margin:0 auto 18px; border-radius:50%; background:var(--ale); display:grid; place-items:center; animation:pop .6s var(--ease); }
.success .tick svg{ width:40px; stroke-dasharray:40; stroke-dashoffset:40; animation:tick .6s .25s forwards; }
@keyframes pop{ from{ transform:scale(.4); opacity:0 } }
@keyframes tick{ to{ stroke-dashoffset:0 } }

.promo{ position:relative; min-height:420px; border-radius:28px; overflow:hidden; padding:32px; color:#fff; text-decoration:none; display:flex; flex-direction:column; justify-content:space-between; isolation:isolate; }
.promo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform 1.2s var(--ease); }
.promo::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(0,0,0,.82), rgba(0,0,0,.25) 55%, rgba(0,0,0,.75)); }
.promo:hover img{ transform:scale(1.07); }
.promo .kicker{ color:var(--ale); }
.promo h3{ max-width:12em; }
.promo p{ margin:0; max-width:24em; color:#e6e6e6; }
.promo-go{ position:absolute; right:26px; bottom:26px; width:56px; height:56px; border-radius:50%; background:var(--ale); color:#000; display:grid; place-items:center; transition:transform .5s var(--ease); }
.promo-go svg{ width:20px; }
.promo:hover .promo-go{ transform:rotate(-45deg) scale(1.08); }
@media (max-width:720px){ .promo{ min-height:360px; padding:24px; } .promo p{ padding-right:64px; } }
/* ---------- newsletter ---------- */
.news{ background:var(--ale); color:#000; border-radius:34px; padding:clamp(34px,6vw,76px); display:grid; grid-template-columns:1.1fr 1fr; gap:40px; align-items:center; position:relative; overflow:hidden; }
.news::before{ content:""; position:absolute; right:-80px; top:-120px; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.55), transparent 65%); }
.news .inp{ background:#fff; border-color:#fff; color:#000; }
.news .inp:focus{ border-color:#000; box-shadow:0 0 0 4px rgba(0,0,0,.12); }
.news form{ display:grid; gap:12px; position:relative; }
.news .seg span{ border-color:rgba(0,0,0,.25); }
.news .seg input:checked + span{ background:#000; color:#fff; border-color:#000; }
.news .btn{ --b:#000; --t:#fff; }
.news .btn::after{ background:#fff; }
.news .btn:hover{ color:#000; border-color:#000; }
.news-ok{ font-weight:700; font-size:18px; }

/* ---------- modal + toast ---------- */
.modal{ position:fixed; inset:0; z-index:120; display:grid; place-items:center; padding:20px; visibility:hidden; }
.modal.open{ visibility:visible; }
.modal-bg{ position:absolute; inset:0; background:rgba(0,0,0,.6); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); opacity:0; transition:opacity .35s; }
.modal.open .modal-bg{ opacity:1; }
.modal-card{ position:relative; width:min(760px,100%); max-height:calc(100vh - 40px); overflow:auto; background:#fff; color:#000; border-radius:28px; padding:clamp(22px,3.4vw,40px); transform:translateY(30px) scale(.97); opacity:0; transition:transform .5s var(--ease), opacity .35s; --fg:#000; --bg:#fff; --muted:#5f5f5f; --line:rgba(0,0,0,.14); }
.modal.open .modal-card{ transform:none; opacity:1; }
.modal-x{ position:absolute; top:16px; right:16px; width:42px; height:42px; border-radius:50%; border:0; background:#f0eee9; cursor:pointer; font-size:20px; }
.modal-x:hover{ background:var(--ale); }
.order-opts{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:22px; }
.oopt{ position:relative; border-radius:20px; overflow:hidden; text-decoration:none; color:#fff; aspect-ratio:1/1.05; display:flex; flex-direction:column; justify-content:flex-end; padding:20px; isolation:isolate; }
.oopt img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform .8s var(--ease); }
.oopt::before{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.9), rgba(0,0,0,.1)); z-index:-1; }
.oopt:hover img{ transform:scale(1.06); }
.oopt b{ font-family:var(--f-display); font-size:34px; text-transform:uppercase; line-height:1; }
.oopt .pill{ position:absolute; top:14px; left:14px; }
.oopt small{ opacity:.85; font-size:14px; }
.oopt.pref{ box-shadow:0 0 0 3px var(--ale); }
.toast{ position:fixed; left:50%; bottom:26px; z-index:130; transform:translate(-50%,calc(100% + 60px)); visibility:hidden; background:#000; color:#fff; padding:14px 20px; border-radius:16px; font-weight:600; box-shadow:0 20px 50px rgba(0,0,0,.35); transition:transform .5s var(--ease), visibility .5s; max-width:calc(100vw - 32px); display:flex; gap:10px; align-items:center; }
.toast.show{ transform:translate(-50%,0); visibility:visible; }
.toast i{ width:10px; height:10px; border-radius:50%; background:var(--ale); flex:none; }

/* cursor glow on dark sections */
.glow{ position:relative; }
.glow::before{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(240,169,46,.14), transparent 60%); opacity:0; transition:opacity .4s; z-index:0; }
.glow:hover::before{ opacity:1; }
.glow > *{ position:relative; z-index:1; }

/* ---------- footer ---------- */
.ftr{ background:#000; color:#fff; padding:clamp(64px,8vw,110px) 0 28px; position:relative; overflow:hidden; }
.ftr-top{ display:grid; grid-template-columns:1.2fr 1fr 1fr 1fr; gap:40px; }
.ftr h4{ margin:0 0 14px; font-size:14px; font-weight:600; color:#9a9a9a; }
.ftr p{ margin:0 0 6px; }
.ftr a{ text-decoration:none; }
.ftr a:hover{ color:var(--ale); }
.ftr ul{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.ftr-loc b{ display:block; font-family:var(--f-display); font-size:30px; text-transform:uppercase; line-height:1; margin-bottom:8px; }
.ftr-loc .pill{ margin-top:10px; background:rgba(255,255,255,.08); }
.ftr-big{ margin-top:clamp(50px,7vw,100px); color:#fff; opacity:.95; }
.ftr-big svg{ width:100%; height:auto; }
.ftr-bot{ display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-top:30px; padding-top:22px; border-top:1px solid rgba(255,255,255,.14); font-size:14px; color:#a3a3a3; }
.ftr-bot a{ color:#fff; }
.solar{ display:inline-flex; align-items:center; gap:8px; }
.solar i{ width:10px; height:10px; border-radius:50%; background:radial-gradient(circle, #ffd76a, #ff8a00); box-shadow:0 0 10px #ffb13b; }
.socials{ display:flex; gap:10px; margin-top:18px; }
.socials a{ width:44px; height:44px; border-radius:50%; border:1.5px solid rgba(255,255,255,.25); display:grid; place-items:center; transition:all .25s; }
.socials a:hover{ background:var(--ale); border-color:var(--ale); color:#000; }
.socials svg{ width:18px; }

/* ---------- responsive ---------- */
@media (max-width:1400px){ .hdr .sfx-txt{ display:none; } .sfx{ padding:0 12px; } .nav > a, .nav-dd > button{ padding:0 11px; } }
@media (max-width:1240px){
  .nav{ display:none; }
  .burger{ display:grid; }
  .hdr-act{ margin-left:auto; }
  .hdr-act .order-btn{ display:none; }
}
@media (max-width:980px){
  .split, .news, .menu-shell{ grid-template-columns:1fr; }
  .split.rev > :first-child{ order:0; }
  .mside{ position:sticky; top:0; z-index:5; background:var(--bg); margin:0 calc(var(--gut) * -1); padding:12px var(--gut); border-bottom:1px solid var(--line); }
  .mcats{ flex-direction:row; overflow-x:auto; scrollbar-width:none; gap:6px; }
  .mcats::-webkit-scrollbar{ display:none; }
  .mcats button{ white-space:nowrap; border:1.5px solid var(--line); border-radius:999px; }
  .mcats button small{ display:none; }
  .msearch{ margin-bottom:10px; }
  .msync{ display:none; }
  .infobar{ grid-template-columns:1fr 1fr; }
  .infobar > div:nth-child(2){ border-right:0; }
  .infobar > div:nth-child(-n+2){ border-bottom:1px solid var(--line); }
  .ftr-top{ grid-template-columns:1fr 1fr; }
  .pkgs, .cols3, .specials, .jobs{ grid-template-columns:1fr 1fr; }
  .process{ grid-template-columns:1fr 1fr; gap:10px 20px; }
  .loaf-grid{ grid-template-columns:1fr 1fr; }
  .tl{ grid-template-columns:1fr; gap:10px; }
  .tl::before{ left:8px; right:auto; top:0; bottom:0; width:2px; height:auto; background:linear-gradient(180deg, var(--rogue) var(--p,0%), var(--line) var(--p,0%)); }
  .tl-item{ padding:0 0 26px 44px; }
  .tl-item::before{ top:6px; left:0; }
  .lhero-old::after{ background:linear-gradient(0deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.82) 45%, rgba(255,255,255,.1) 75%); }
}
@media (max-width:720px){
  body{ font-size:16px; }
  :root{ --hdr-h:66px; }
  .brand{ width:120px; }
  .sfx-txt{ display:none; }
  .doors{ flex-direction:column; height:auto; }
  .door{ min-height:62vh; }
  .doors:hover .door, .doors .door:hover{ flex:1; }
  .mitems{ grid-template-columns:1fr; }
  .mitem.feat{ grid-template-columns:110px 1fr auto; gap:4px 14px; }
  .mitem.feat p{ grid-column:1/-1; }
  .mitem.feat .mimg{ grid-row:auto; }
  .row2, .row3, .pkgs, .cols3, .cols2, .specials, .jobs, .order-opts, .specs-row, .loaf-grid{ grid-template-columns:1fr; }
  .ev{ grid-template-columns:78px 1fr; gap:16px; }
  .ev-act{ grid-column:1/-1; }
  .ev-date b{ font-size:36px; }
  .ftr-top{ grid-template-columns:1fr; }
  .infobar{ grid-template-columns:1fr; }
  .infobar > div{ border-right:0; border-bottom:1px solid var(--line); }
  .tracker{ grid-template-columns:repeat(3,1fr); row-gap:18px; }
  .avail{ grid-template-columns:44px repeat(7,minmax(0,1fr)); gap:4px; }
  .avail button{ font-size:10.5px; }
  .process{ grid-template-columns:1fr; }
  .dd{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; scroll-behavior:auto!important; }
  .wipe{ clip-path:none; }
}

/* =========================================================
   ROUND 2 ADDITIONS
   ========================================================= */
.sfx svg{ width:18px; height:18px; flex:none; }
.sfx .ic-off{ display:none; }
.sfx:not(.on) .ic-on{ display:none; }
.sfx:not(.on) .ic-off{ display:block; }
.addr-btn{ background:none; border:0; padding:0; font:inherit; font-weight:inherit; color:inherit; text-align:left; cursor:pointer; line-height:inherit; text-decoration:underline; text-decoration-color:color-mix(in srgb, currentColor 35%, transparent); text-underline-offset:4px; transition:color .2s; }
.addr-btn:hover{ color:var(--ale); }
.infobar .addr-btn:hover{ color:var(--accent); }

/* directions */
.modal-card.modal-sm{ width:min(470px,100%); }
.dir-opts{ display:grid; gap:10px; margin-top:22px; }
.dir-opt{ display:flex; align-items:center; gap:14px; width:100%; padding:12px 16px 12px 12px; border-radius:18px; border:1.5px solid rgba(0,0,0,.12); background:#fff; color:#000; text-decoration:none; text-align:left; cursor:pointer; font:inherit; transition:border-color .2s, transform .35s var(--ease), box-shadow .3s; }
.dir-opt:hover{ border-color:#000; transform:translateX(4px); box-shadow:0 10px 30px -18px rgba(0,0,0,.5); }
.dir-opt img, .dir-ic{ width:52px; height:52px; border-radius:13px; flex:none; }
.dir-ic{ display:grid; place-items:center; background:#000; color:#fff; transition:background .3s; }
.dir-ic svg{ width:22px; height:22px; }
.dir-opt b{ display:block; font-size:16.5px; }
.dir-opt small{ display:block; color:#666; font-size:13.5px; }
.dir-opt.copied .dir-ic{ background:#2fbf71; }

/* menu photos */
.mcam{ width:30px; height:30px; border-radius:50%; border:1.5px solid var(--line); background:transparent; color:var(--fg); display:inline-grid; place-items:center; cursor:pointer; transition:background .2s, color .2s, border-color .2s, transform .3s var(--ease); vertical-align:middle; flex:none; }
.mcam:hover{ background:var(--ale); border-color:var(--ale); color:#000; transform:scale(1.1); }
.mcam svg{ width:15px; height:15px; }
.modal-card.photo-card{ width:min(540px,100%); padding:0; overflow:hidden; }
.photo-card > div > img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.photo-card .pc-b{ padding:20px 24px 24px; }
.photo-card h3{ margin:0; font-family:var(--f-display); font-weight:800; text-transform:uppercase; font-size:32px; line-height:1; display:flex; justify-content:space-between; gap:16px; }
.photo-card .pc-b p{ margin:8px 0 0; color:var(--muted); }
.photo-card .modal-x{ background:rgba(255,255,255,.92); z-index:2; }

/* help me decide */
.decide-btn{ width:100%; display:flex; align-items:center; justify-content:center; gap:8px; min-height:46px; padding:0 14px; border-radius:999px; border:1.5px dashed var(--fg); background:transparent; color:var(--fg); font-weight:700; font-size:15px; cursor:pointer; margin-bottom:16px; transition:background .25s, color .25s, border-color .25s, box-shadow .3s; }
.decide-btn svg{ width:18px; height:18px; flex:none; }
.decide-btn:hover{ background:var(--fg); color:var(--bg); border-style:solid; }
.decide-btn.on{ background:var(--ale); border:1.5px solid var(--ale); color:#000; box-shadow:0 0 0 5px rgba(240,169,46,.25); }
.mitem.pickable{ cursor:pointer; border-radius:14px; padding-left:12px; padding-right:12px; margin:0 -12px; transition:background .2s; user-select:none; }
.mitem.pickable:hover{ background:color-mix(in srgb, var(--ale) 12%, transparent); }
.mitem.picked{ background:color-mix(in srgb, var(--ale) 24%, transparent); }
.pick-dot{ width:22px; height:22px; border-radius:50%; border:2px solid var(--fg); flex:none; display:inline-grid; place-items:center; transition:background .2s, border-color .2s; }
.mitem.picked .pick-dot{ background:var(--ale); border-color:var(--ale); }
.mitem.picked .pick-dot::after{ content:""; width:9px; height:5px; border-left:2.5px solid #000; border-bottom:2.5px solid #000; transform:translate(0,-1px) rotate(-45deg); }
.decide-bar{ position:fixed; left:50%; bottom:20px; transform:translateX(-50%); z-index:58; background:#000; color:#fff; border-radius:999px; padding:7px 7px 7px 22px; display:flex; align-items:center; gap:10px; box-shadow:0 20px 50px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.12); animation:barIn .5s var(--ease); max-width:calc(100vw - 24px); }
.decide-bar[hidden]{ display:none; }
@keyframes barIn{ from{ transform:translate(-50%, 140%); } }
.decide-bar .db-txt{ font-weight:700; white-space:nowrap; }
.decide-bar .db-txt b{ color:var(--ale); }
.decide-bar .btn{ min-height:42px; }
.decide-bar .btn[disabled]{ opacity:.4; pointer-events:none; }
.modal-card.wheel-card{ width:min(540px,100%); text-align:center; background:#000; color:#fff; --fg:#fff; --bg:#000; --muted:#bdbdbd; }
.wheel-card .modal-x{ background:#222; color:#fff; }
.wheel-wrap{ position:relative; width:min(380px,74vw); aspect-ratio:1; margin:20px auto 8px; }
.wheel-wrap canvas{ width:100%; height:100%; display:block; filter:drop-shadow(0 20px 50px rgba(240,169,46,.28)); }
.wheel-ptr{ position:absolute; left:50%; top:-10px; transform:translateX(-50%); border-left:17px solid transparent; border-right:17px solid transparent; border-top:30px solid #fff; filter:drop-shadow(0 4px 6px rgba(0,0,0,.6)); z-index:2; }
.wheel-res{ min-height:130px; }
.wheel-res .wr-k{ color:var(--ale); font-weight:700; margin:8px 0 6px; }
.wheel-res h3{ font-family:var(--f-display); text-transform:uppercase; font-weight:900; font-size:clamp(34px,6vw,50px); line-height:.95; margin:0; animation:pop .55s var(--ease); }
.wheel-res .wr-acts{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:16px; }

/* menu page intro: confirm the location */
.mintro-veil{ position:fixed; inset:0; z-index:65; background:rgba(0,0,0,.5); backdrop-filter:blur(10px) saturate(.8); -webkit-backdrop-filter:blur(10px) saturate(.8); opacity:0; pointer-events:none; transition:opacity .9s ease; }
body.m-intro .mintro-veil{ opacity:1; pointer-events:auto; }
body.m-intro .mhero .wrap{ z-index:auto; }
.ls-wrap{ position:relative; display:inline-block; margin-top:28px; }
.ls-wrap .loc-switch{ margin-top:0; transition:box-shadow .8s; }
body.m-intro .ls-wrap .loc-switch{ z-index:70; box-shadow:0 0 0 6px rgba(240,169,46,.32), 0 0 80px rgba(240,169,46,.55); }
.mintro-tip{ position:absolute; left:0; top:calc(100% + 16px); z-index:70; width:max-content; max-width:min(440px, 86vw); color:#fff; font-weight:700; font-size:18px; line-height:1.35; opacity:0; transform:translateY(-6px); transition:opacity .6s, transform .6s var(--ease); pointer-events:none; }
body.m-intro .mintro-tip{ opacity:1; transform:none; }
.mintro-tip .mt-bar{ display:block; height:4px; width:220px; max-width:100%; border-radius:4px; background:rgba(255,255,255,.2); margin-top:12px; overflow:hidden; }
.mintro-tip .mt-bar i{ display:block; height:100%; width:100%; background:var(--ale); }
body.m-intro .mintro-tip .mt-bar i{ animation:drain 4.5s linear forwards; }
@keyframes drain{ to{ width:0 } }
@media (max-width:720px){ .decide-bar{ padding-left:16px; gap:6px; bottom:12px; } .decide-bar .btn{ padding:0 12px; } }

.dir-opt img.gm{ background:#fff; object-fit:contain; padding:7px; box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.1); }
/* site pop-up */
.modal-card.site-pop{ width:min(500px,100%); padding:clamp(28px,4vw,40px); border-top:6px solid var(--ale); overflow:hidden; }
.site-pop .sp-glow{ position:absolute; right:-90px; top:-110px; width:280px; height:280px; border-radius:50%; background:radial-gradient(circle, rgba(240,169,46,.35), transparent 65%); pointer-events:none; }
.site-pop h2{ position:relative; padding-right:40px; }
.site-pop .sp-body{ position:relative; margin:12px 0 0; color:#4a4a4a; font-size:17px; white-space:pre-line; }
.site-pop .sp-acts{ position:relative; display:flex; gap:10px; flex-wrap:wrap; margin-top:24px; }
.site-pop .sp-acts:empty{ display:none; }
body.deciding .toast{ bottom:96px; }
.mitem.pickable{ position:relative; padding-left:46px; }
.mitem.pickable .pick-dot{ position:absolute; left:14px; top:19px; }