:root{
    --green:#0B3826; --green-2:#0d4229; --green-line:#1d5e3f; --green-3:#082b1d;
    --gold:#F5B324; --gold-d:#d99a1f;
    --red:#C0392B; --red-2:#c33a29; --red-d:#a12e22;
    /* Text tones tuned for the red banner only. The base --gold and #ffe3df
       sat at 2.94:1 and 4.48:1 on --red, just under WCAG AA (3.0 large / 4.5
       normal). These clear it at 3.09 and 4.74 and are visually identical.
       --gold itself is unchanged: it passes comfortably on the green surfaces. */
    --gold-on-red:#F7B930; --on-red:#FFEBE8;
    --paper:#F3EAD2; --card:#FBF6E8; --ink:#241c14; --muted:#6b6350;
    --on-green:#e6efe7; --on-green-dim:#a9c2b3;
    --block:'Anton','Arial Narrow',sans-serif;
    --cond:'Oswald','Arial Narrow',sans-serif;
    --script:'Kaushan Script',cursive;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{font-family:"Segoe UI",system-ui,-apple-system,sans-serif;color:var(--ink);
    background:var(--green);line-height:1.6;-webkit-font-smoothing:antialiased}
  /* height:auto is the required companion to the explicit width/height attributes on
     every <img> (added for CLS). Those attributes are presentational hints, so where a
     rule below sets only one dimension the other must stay automatic or the intrinsic
     aspect ratio is lost and the image stretches. Rules that set BOTH dimensions
     (.vp .ic img, .fav-card .photo img, .mphoto img, .loc-card .ph img) are more
     specific and still win. */
  img{max-width:100%;height:auto;display:block}
  a{color:inherit;text-decoration:none}
  .wrap{max-width:1480px;margin:0 auto;padding:0 40px}
  .block{font-family:var(--block);text-transform:uppercase;font-weight:400;letter-spacing:.5px;line-height:.96}
  .script{font-family:var(--script);font-weight:400}

  .btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--cond);font-weight:600;
    text-transform:uppercase;letter-spacing:.6px;font-size:.9rem;line-height:1;min-height:44px;padding:0 24px;
    border-radius:8px;cursor:pointer;border:2px solid transparent;transition:.15s}
  .btn .ar{font-weight:700}
  .btn-gold{background:var(--gold);color:var(--green-3);border-color:var(--gold)}
  .btn-gold:hover{background:var(--gold-d);border-color:var(--gold-d);transform:translateY(-1px)}
  .btn-red{background:var(--red);color:#fff;border-color:var(--red)}
  .btn-red:hover{background:var(--red-d);border-color:var(--red-d);transform:translateY(-1px)}
  .btn-green{background:var(--green);color:#fff;border-color:var(--green)}
  .btn-green:hover{background:var(--green-3);transform:translateY(-1px)}
  .btn-lg{min-height:52px;padding:0 30px;font-size:1rem}

  .dash{display:inline-block;width:26px;height:3px;background:var(--red);border-radius:2px;vertical-align:middle}
  .spark{display:inline-block;width:20px;height:2px;background:var(--gold);border-radius:2px;vertical-align:middle}

  /* ---------- header ---------- */
  header{background:var(--green-3);position:sticky;top:0;z-index:100;border-bottom:3px solid var(--gold)}
  .nav{display:flex;align-items:center;gap:18px;min-height:74px;padding-top:8px;padding-bottom:8px}
  .brand img{height:96px;width:auto}
  .primary-nav{margin-left:auto}
  .primary-nav ul{display:flex;gap:26px;list-style:none;align-items:center}
  .primary-nav a{font-family:var(--cond);text-transform:uppercase;font-weight:500;font-size:.9rem;
    letter-spacing:.6px;color:var(--on-green);padding:6px 2px;border-bottom:2px solid transparent}
  .primary-nav a:hover{color:var(--gold);border-color:var(--gold)}
  .nav-right{display:flex;align-items:center;gap:12px}
  .hamburger{display:none;width:46px;height:44px;background:transparent;border:2px solid var(--green-line);
    border-radius:6px;flex-direction:column;justify-content:center;align-items:center;gap:5px;cursor:pointer}
  .hamburger span{display:block;width:22px;height:2.5px;background:var(--gold);border-radius:2px;transition:.2s}
  body.nav-open .hamburger span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  body.nav-open .hamburger span:nth-child(2){opacity:0}
  body.nav-open .hamburger span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

  /* ---------- hero ---------- */
  .hero{position:relative;display:flex;align-items:center;min-height:660px;padding:52px 0;overflow:hidden;
    background-color:var(--paper);
    background-image:linear-gradient(90deg, var(--paper) 0%, rgba(243,234,210,.9) 22%, rgba(243,234,210,.15) 44%, rgba(243,234,210,0) 60%), url("../images/hero-store.webp");
    background-size:cover,contain;background-position:center,center right;background-repeat:no-repeat}
  .hero-in{width:100%}
  .hero-copy{max-width:540px}
  .hero .eyebrow{display:flex;align-items:center;gap:12px;font-family:var(--cond);text-transform:uppercase;
    font-weight:700;letter-spacing:2px;color:var(--green);font-size:.98rem;margin-bottom:8px}
  .hero h1{font-family:var(--block);text-transform:uppercase;color:var(--green);
    font-size:clamp(3rem,7vw,5.4rem);line-height:.92;letter-spacing:1px}
  .hero .since{display:flex;align-items:center;gap:14px;margin:6px 0 18px}
  .hero .since b{font-family:var(--script);color:var(--red);font-size:clamp(2rem,4vw,2.9rem);line-height:1;font-weight:400}
  .hero p{color:#4a4234;font-size:1.1rem;max-width:400px;margin-bottom:26px}

  /* ---------- value ribbon ---------- */
  .ribbon-wrap{background:linear-gradient(to bottom, var(--paper) 52%, var(--green) 52%)}
  .ribbon-card{margin:0 auto;background:var(--card);border:3px solid var(--green);
    border-radius:14px;box-shadow:0 16px 34px rgba(0,0,0,.25);display:flex;overflow:hidden}
  .vp{flex:1;display:flex;align-items:center;gap:11px;padding:16px 13px;border-right:1px solid #e4d9bd}
  .vp:last-child{border-right:none}
  .vp .ic{flex:0 0 60px;width:60px;height:60px;border-radius:50%;overflow:hidden;
    border:3px solid var(--green-3);background:var(--paper);box-shadow:0 6px 14px rgba(0,0,0,.2);
    display:flex;align-items:center;justify-content:center}
  .vp .ic img{width:100%;height:100%;object-fit:cover;display:block}
  .vp .ic svg{width:100%;height:100%;display:block}
  .vp b{display:block;font-family:var(--cond);text-transform:uppercase;color:var(--green);font-weight:700;font-size:.9rem;letter-spacing:.4px;line-height:1.1}
  .vp span{display:block;color:var(--muted);font-size:.8rem;line-height:1.3;margin-top:3px}
  /* middot separator for the city list — red so the towns stay easy to scan */
  .vp .sep{font-style:normal;color:var(--red);font-weight:700;padding:0 1px}

  /* ---------- section head ---------- */
  section{padding:66px 0}
  .eyebrow-c{display:flex;align-items:center;justify-content:center;gap:12px;font-family:var(--cond);
    text-transform:uppercase;font-weight:700;letter-spacing:3px;color:var(--gold);font-size:1rem}
  .eyebrow-c .dash{background:var(--gold)}
  .sec-title{font-family:var(--block);text-transform:uppercase;color:var(--card);font-size:clamp(2.2rem,4.6vw,3.2rem);letter-spacing:1px;text-align:center;margin-top:4px}

  /* ---------- fan favorites ---------- */
  .favorites{background:var(--green);padding-top:44px}
  .fav-wrap{position:relative;margin-top:36px}
  .fav-track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;justify-content:safe center;
    padding:4px 2px 8px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .fav-track::-webkit-scrollbar{display:none}
  .fav-card{flex:0 0 232px;scroll-snap-align:center;background:var(--card);border-radius:12px;overflow:hidden;
    box-shadow:0 12px 24px rgba(0,0,0,.3);display:flex;flex-direction:column}
  .fav-card .photo{aspect-ratio:1/1;overflow:hidden;background:var(--paper);border-bottom:4px solid var(--red)}
  .fav-card .photo img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
  .fav-card:hover .photo img{transform:scale(1.05)}
  .fav-card .cap{padding:16px 16px 20px;text-align:center}
  .fav-card h3{font-family:var(--cond);text-transform:uppercase;color:var(--green);font-weight:700;font-size:1.05rem;line-height:1.1}
  .fav-card p{color:var(--muted);font-size:.82rem;margin-top:7px;line-height:1.4}
  .fav-arrow{display:none}
  .fav-cta{text-align:center;margin-top:34px}

  /* ---------- tradition ---------- */
  .tradition{background:var(--paper)}
  .trad-in{display:grid;grid-template-columns:1fr 1.15fr;gap:50px;align-items:center}
  .trad-copy h2{font-family:var(--block);text-transform:uppercase;color:var(--green);font-size:clamp(2rem,4.4vw,3.1rem);line-height:.98}
  .trad-copy .tscript{display:flex;align-items:center;gap:14px;margin:2px 0 18px}
  .trad-copy .tscript b{font-family:var(--script);color:var(--red);font-size:clamp(2.2rem,4.6vw,3.2rem);font-weight:400;line-height:1}
  .trad-copy p{color:#4a4234;margin-bottom:24px;max-width:420px}
  .trad-photo{border-radius:12px;overflow:hidden;box-shadow:0 16px 36px rgba(0,0,0,.18);border:4px solid #fff;background:#fff}
  .trad-photo img{width:100%;display:block}
  /* portrait source — cap the width so it doesn't tower over the copy column,
     and pull it to the start of its column so it sits closer to the copy */
  .trad-photo-tall{max-width:400px;margin-right:auto}

  /* ---------- about: single-column bio ----------
     The whole story lives in one block so nothing reads as a separate
     section the reader can stop at. Deliberately not in motion.js GROUPS —
     the copy must be visible without scrolling past a reveal trigger. */
  .bio{background:var(--paper);padding-top:46px}
  .bio-in{max-width:820px}
  .bio h2{font-family:var(--block);text-transform:uppercase;color:var(--green);
    font-size:clamp(2rem,4.4vw,3.1rem);line-height:.98;text-align:center}
  .bio .bscript{display:flex;align-items:center;justify-content:center;gap:14px;margin:4px 0 26px}
  .bio .bscript b{font-family:var(--script);color:var(--red);font-size:clamp(2rem,4.2vw,2.9rem);
    font-weight:400;line-height:1}
  .bio-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:38px}

  /* timeline rail — milestone markers down the left of the one bio column.
     --rail is the distance from the step's left edge to the centre of the line;
     it must stay in sync with the grid columns below. */
  .tl{--rail:136px;list-style:none;margin:0 auto;max-width:760px}
  .tl-step{position:relative;display:grid;grid-template-columns:114px 44px 1fr;
    grid-template-areas:"year rail copy";align-items:start;padding-bottom:34px}
  .tl-step:last-child{padding-bottom:0}
  /* connecting line: starts under the dot and runs through the gap to the next step */
  .tl-step::before{content:"";position:absolute;left:var(--rail);top:12px;bottom:0;
    width:3px;margin-left:-1.5px;background:var(--gold);border-radius:2px}
  .tl-step:last-child::before{display:none}
  .tl-mark{grid-area:rail;justify-self:center;position:relative;z-index:1;margin-top:4px;
    width:17px;height:17px;border-radius:50%;background:var(--red);
    box-shadow:0 0 0 4px var(--paper),0 0 0 7px rgba(192,57,43,.22)}
  .tl-year{grid-area:year;text-align:right;font-family:var(--block);text-transform:uppercase;
    font-weight:400;color:var(--green);letter-spacing:.5px;line-height:1.05;
    font-size:clamp(1.15rem,2.2vw,1.5rem)}
  .tl-copy{grid-area:copy;padding-left:4px}
  .tl-copy p{color:#4a4234;font-size:1.04rem;margin-bottom:16px}
  .tl-copy p:last-child{margin-bottom:0}

  @media(max-width:720px){
    /* year label moves above the copy so the text column keeps a readable width */
    .tl{--rail:17px}
    .tl-step{grid-template-columns:34px 1fr;grid-template-areas:"rail year" "rail copy";
      padding-bottom:30px}
    .tl-mark{margin-top:2px}
    .tl-year{text-align:left;margin-bottom:8px}
    .tl-copy{padding-left:0}
  }

  /* ---------- locations map ---------- */
  .findmap{background:var(--green);padding:66px 0}
  .findmap-shell{display:grid;grid-template-columns:.8fr 1.2fr;align-items:stretch;
    border-radius:16px;overflow:hidden;border:3px solid var(--gold);box-shadow:0 16px 34px rgba(0,0,0,.3)}
  .findmap-panel{background:var(--green-3);padding:44px clamp(28px,4vw,48px);display:flex;flex-direction:column;justify-content:center;
    background-image:radial-gradient(circle at 18% 12%, rgba(255,255,255,.06) 0 1.4px, transparent 1.4px);background-size:20px 20px}
  .findmap-panel h2{font-family:var(--block);text-transform:uppercase;color:#fff;font-size:clamp(1.9rem,3.2vw,2.7rem);line-height:1}
  .findmap-panel h2 .y{color:var(--gold);display:block}
  .findmap-panel p{color:var(--on-green-dim);margin:16px 0 24px;max-width:340px}
  .findmap-map{position:relative;min-height:430px;background:#e9ece5}
  #cpmap{position:absolute;inset:0;height:100%;width:100%;z-index:1}
  .cp-marker{width:32px;height:32px;border-radius:50%;background:var(--red);color:#fff;
    display:flex;align-items:center;justify-content:center;font-family:var(--cond);font-weight:700;font-size:15px;
    border:3px solid #fff;box-shadow:0 2px 7px rgba(0,0,0,.4)}
  .leaflet-popup-content{font-family:"Segoe UI",system-ui,sans-serif}
  .leaflet-popup-content strong{color:var(--green);font-family:var(--cond);text-transform:uppercase;letter-spacing:.3px}
  .leaflet-popup-content a{color:var(--red);font-weight:700}
  .loc-chips{display:flex;flex-flow:row wrap;gap:10px;align-items:flex-start}
  .loc-chips a{display:inline-flex;align-items:center;gap:10px;background:var(--card);color:var(--green);
    border-radius:40px;padding:10px 20px;font-family:var(--cond);font-weight:700;font-size:.9rem;
    text-transform:uppercase;letter-spacing:.4px;transition:.15s;min-height:44px}
  .loc-chips a:hover{background:var(--gold)}
  .loc-chips .n{flex:0 0 24px;width:24px;height:24px;border-radius:50%;background:var(--red);color:#fff;
    display:flex;align-items:center;justify-content:center;font-size:.82rem;font-weight:700}

  /* ---------- craving ---------- */
  .craving{background:var(--red);color:#fff;
    background-image:repeating-linear-gradient(45deg,rgba(0,0,0,.05) 0 16px,transparent 16px 32px)}
  .craving-in{display:grid;grid-template-columns:.85fr 1.15fr;gap:44px;align-items:center}
  .craving h2{font-family:var(--block);text-transform:uppercase;font-size:clamp(2rem,4.4vw,3rem);line-height:.98}
  .craving .cscript{font-family:var(--script);color:var(--gold-on-red);font-size:clamp(1.8rem,3.6vw,2.4rem);margin:6px 0 22px;line-height:1}
  .svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0}
  .svc{padding:6px 20px;border-left:1px solid rgba(255,255,255,.3)}
  .svc:first-child{border-left:none;padding-left:0}
  .svc .ic{width:40px;height:40px;margin-bottom:10px}
  .svc .ic svg{width:40px;height:40px;stroke:#fff;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
  .svc h3{font-family:var(--cond);text-transform:uppercase;font-weight:700;font-size:1.05rem;letter-spacing:.5px}
  .svc p{color:#ffe3df;font-size:.9rem;margin-top:6px}

  /* ---------- footer ---------- */
  footer{background:var(--green-3);color:var(--on-green-dim);padding:46px 0 26px}
  .foot-in{display:grid;grid-template-columns:1.1fr .8fr .8fr .9fr 1.2fr;gap:28px;align-items:start}
  .foot-brand img{height:74px;width:auto}
  .foot-col h3{font-family:var(--cond);text-transform:uppercase;font-size:.86rem;letter-spacing:1.5px;color:var(--gold);margin-bottom:14px;font-weight:600}
  .foot-col ul{list-style:none}
  .foot-col li{margin-bottom:8px}
  .foot-col a{font-size:.92rem}
  .foot-col a:hover{color:var(--gold)}
  .foot-hours span{display:block}
  .foot-hours .day{color:#fff;font-weight:600}
  .socials{display:flex;gap:12px}
  .socials a{width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;transition:.15s}
  .socials a:hover{background:var(--gold)}
  .socials svg{width:19px;height:19px;fill:#fff}
  .socials a:hover svg{fill:var(--green-3)}
  .foot-callout{background:var(--card);color:var(--green);border:2px solid var(--gold);border-radius:12px;padding:20px;text-align:center}
  .foot-callout .h{font-family:var(--block);text-transform:uppercase;line-height:1;font-size:1.5rem}
  .foot-callout .h .r{color:var(--red);display:block;font-size:1.7rem;margin-top:2px}
  .foot-callout .btn{margin-top:14px}
  .copyright{text-align:center;color:var(--on-green-dim);font-size:.82rem;margin-top:38px;padding-top:22px;border-top:1px solid var(--green-line)}

  /* ---------- responsive ---------- */
  @media(max-width:960px){
    .foot-in{grid-template-columns:1fr 1fr;gap:26px}
    .foot-callout{grid-column:1 / -1}
  }
  @media(max-width:860px){
    .hamburger{display:flex}
    .nav-right{margin-left:auto}
    .brand img{height:60px}
    .primary-nav{position:absolute;top:100%;left:0;right:0;background:var(--green-3);border-bottom:3px solid var(--gold);
      margin:0;max-height:0;overflow:hidden;transition:max-height .28s ease;box-shadow:0 12px 24px rgba(0,0,0,.35)}
    body.nav-open .primary-nav{max-height:70vh}
    .primary-nav ul{flex-direction:column;gap:0;padding:8px 24px 16px}
    .primary-nav li{width:100%}
    .primary-nav a{display:block;padding:14px 0;border-bottom:1px solid var(--green-line);text-align:right}
    .hero{min-height:auto;padding:44px 0 336px;
      background-image:linear-gradient(180deg, var(--paper) 0%, var(--paper) 44%, rgba(243,234,210,.82) 52%, rgba(243,234,210,.28) 66%, rgba(243,234,210,0) 82%), url("../images/hero-store-mobile.webp");
      background-size:cover,contain;background-position:center,center bottom}
    .hero-copy{max-width:none;text-align:center;margin:0 auto}
    .hero .eyebrow,.hero .since{justify-content:center}
    .hero p{margin-inline:auto}
    /* The 52% cream/green split works on desktop because the card is short and
       straddles it. Stacked, the card is ~330px tall and the split cuts straight
       across it, so go one solid green and let the card sit on it. */
    .ribbon-wrap{background:var(--green)}
    /* stacked ribbon: the 60px icon was setting a ~96px row height against two
       short lines of text, which left every row looking half empty */
    .ribbon-card{flex-direction:column}
    .vp{border-right:none;border-bottom:1px solid #e4d9bd;padding:13px 16px;gap:13px}
    .vp:last-child{border-bottom:none}
    .vp .ic{flex:0 0 46px;width:46px;height:46px;border-width:2px}
    /* .78 keeps the five-town list to two lines in the 245px text column,
       which is what evens the four rows out */
    .vp span{font-size:.78rem;line-height:1.35}
    .findmap-shell{grid-template-columns:1fr}
    .findmap-map{min-height:360px;order:2}
    .loc-chips{flex-flow:row wrap;justify-content:center}
    .trad-in{grid-template-columns:1fr;gap:28px}
    .trad-copy{text-align:center}.trad-copy .tscript{justify-content:center}.trad-copy p{margin-inline:auto}
    .trad-photo-tall{margin-inline:auto}
    .craving-in{grid-template-columns:1fr;gap:30px;text-align:center}
    .craving .cscript{margin-inline:auto}
    .svc-grid{grid-template-columns:1fr;gap:18px;text-align:left;max-width:420px;margin:0 auto}
    .svc{border-left:none;border-top:1px solid rgba(255,255,255,.3);padding:16px 0 0}
    .svc:first-child{border-top:none;padding-top:0}
    .svc .ic{margin-inline:auto}
    .fav-arrow{display:flex;position:absolute;top:38%;transform:translateY(-50%);width:38px;height:38px;
      border-radius:50%;background:var(--red);color:#fff;border:none;font-size:1.35rem;line-height:1;
      align-items:center;justify-content:center;cursor:pointer;z-index:5;box-shadow:0 3px 10px rgba(0,0,0,.4)}
    .fav-prev{left:2px} .fav-next{right:2px}
  }
  @media(max-width:640px){
    section{padding:52px 0}
    .wrap{padding:0 20px}
    .foot-in{grid-template-columns:1fr;gap:26px;text-align:center;justify-items:center}
    .socials{justify-content:center}
    .foot-callout{max-width:360px}
  }
  @media(max-width:420px){ .brand img{height:46px} .order-cta{padding:0 14px;font-size:.8rem} }

  /* =========================================================
     INNER PAGES — shared page header
     ========================================================= */
  .page-head{background:var(--green);padding:56px 0 48px;
    background-image:radial-gradient(circle at 18% 12%, rgba(255,255,255,.055) 0 1.4px, transparent 1.4px);
    background-size:20px 20px}
  .page-head h1{font-family:var(--block);text-transform:uppercase;color:var(--card);text-align:center;
    font-size:clamp(2.6rem,6.4vw,4.4rem);line-height:.94;letter-spacing:1px;margin-top:6px}
  .page-head .pscript{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:6px}
  .page-head .pscript b{font-family:var(--script);color:var(--gold);font-weight:400;line-height:1;
    font-size:clamp(1.6rem,3.4vw,2.3rem)}
  .page-head .lede{color:var(--on-green-dim);text-align:center;max-width:620px;margin:16px auto 0}

  /* checkerboard rail — echoes the drive-thru menu board */
  .rail{height:20px;background:repeating-conic-gradient(var(--card) 0% 25%, transparent 0% 50%) 0 0/20px 20px;
    opacity:.85}
  .rail-dark{background-image:repeating-conic-gradient(var(--green) 0% 25%, transparent 0% 50%)}

  /* =========================================================
     MENU PAGE
     ========================================================= */
  .menu-nav{position:sticky;top:var(--hdr,112px);z-index:60;background:var(--green-3)}
  .menu-nav .wrap{display:flex;gap:12px;padding-top:15px;padding-bottom:15px;overflow-x:auto;
    justify-content:safe center;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .menu-nav .wrap::-webkit-scrollbar{display:none}
  .menu-nav a{flex:0 0 auto;font-family:var(--cond);text-transform:uppercase;font-weight:700;font-size:1rem;
    letter-spacing:.8px;color:var(--green-3);background:var(--gold);border:2px solid var(--gold);
    border-radius:8px;padding:12px 26px;white-space:nowrap;transition:.15s}
  .menu-nav a:hover,.menu-nav a:focus-visible{background:var(--card);color:var(--green);border-color:var(--card)}

  .menu-body{background:var(--green);padding:20px 0 70px}
  .menu-note{text-align:center;color:var(--on-green-dim);font-size:.86rem;padding:22px 0 6px}

  .mcard{position:relative;background:var(--card);border:3px solid var(--green-3);border-radius:16px;
    box-shadow:0 16px 34px rgba(0,0,0,.28);padding:54px clamp(20px,3.2vw,40px) 34px;margin:44px auto 0;max-width:880px}
  .mcard-wide{max-width:1020px}
  .pill{position:absolute;top:-23px;left:50%;transform:translateX(-50%);white-space:nowrap;
    display:inline-flex;align-items:center;background:var(--card);border:3px solid var(--red);color:var(--red);
    font-family:var(--block);text-transform:uppercase;font-size:clamp(1.1rem,2.4vw,1.45rem);letter-spacing:1.5px;
    padding:9px 28px;border-radius:40px;line-height:1;box-shadow:0 6px 14px rgba(0,0,0,.22)}
  .pill-gold{border-color:var(--gold-d);color:var(--green)}

  .mintro{text-align:center;font-family:var(--cond);font-weight:600;text-transform:uppercase;letter-spacing:.6px;
    color:var(--green);font-size:.92rem;margin-bottom:14px}
  .note-red{background:var(--red);color:#fff;border-radius:10px;padding:12px 20px;text-align:center;
    font-size:.88rem;line-height:1.4;margin-bottom:18px}

  .mlist{list-style:none}
  .mi{display:flex;align-items:baseline;gap:10px;padding:10px 0;border-top:1px solid #e7dcbe}
  .mi:first-child{border-top:none}
  .badge{flex:0 0 auto;align-self:flex-start;display:inline-flex;align-items:center;justify-content:center;
    min-width:36px;height:26px;background:var(--gold);border:2px solid var(--gold-d);border-radius:6px;
    color:var(--green-3);font-family:var(--cond);font-weight:700;font-size:.84rem;margin-top:1px}
  .mi .nm{font-family:var(--cond);font-weight:600;text-transform:uppercase;color:var(--green);
    font-size:1.02rem;letter-spacing:.3px;line-height:1.25}
  .mi .dots{flex:1 1 auto;min-width:16px;align-self:flex-start;margin-top:.75em;
    border-bottom:2px dotted #c5b78f}
  .mi .pr{flex:0 0 auto;font-family:var(--cond);font-weight:700;color:var(--red);font-size:1.05rem;white-space:nowrap}
  .sub{display:block;font-family:"Segoe UI",system-ui,sans-serif;font-weight:400;text-transform:none;
    letter-spacing:0;color:var(--muted);font-size:.8rem;line-height:1.35;margin-top:2px}
  .sub-red{color:var(--red)}

  .mgrid-2{display:grid;grid-template-columns:1fr 1fr;gap:0 46px}
  .mgrid-2 .mlist:nth-child(2) .mi:first-child{border-top:none}

  .chips-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:2px 0 16px}
  .chips-row span{background:var(--paper);border:1px solid #ddd0ac;color:var(--green);border-radius:30px;
    padding:6px 14px;font-family:var(--cond);font-weight:600;font-size:.79rem;text-transform:uppercase;letter-spacing:.5px}

  .mphoto{width:104px;height:104px;border-radius:50%;overflow:hidden;border:4px solid var(--green-3);
    margin:-2px auto 16px;background:var(--paper);box-shadow:0 8px 18px rgba(0,0,0,.2)}
  .mphoto img{width:100%;height:100%;object-fit:cover}

  .mrow{display:grid;gap:34px;max-width:1180px;margin:0 auto}
  .mrow-3{grid-template-columns:repeat(3,1fr)}
  .mrow-2{grid-template-columns:repeat(2,1fr);max-width:940px}
  .mrow .mcard{max-width:none;margin-left:0;margin-right:0}

  @media(max-width:980px){
    .mrow-3,.mrow-2{grid-template-columns:1fr;max-width:620px}
  }
  @media(max-width:760px){
    .mgrid-2{grid-template-columns:1fr;gap:0}
    .mgrid-2 .mlist:nth-child(2) .mi:first-child{border-top:1px solid #e7dcbe}
    .mcard{padding-left:20px;padding-right:20px}
    .pill{font-size:1rem;padding:8px 20px;letter-spacing:1px}
  }
  .mcard[id]{scroll-margin-top:calc(var(--hdr,112px) + 112px)}
  .mrow-2{align-items:start}

  /* centered variant of the red craving banner (no service columns) */
  .craving-in.craving-center{grid-template-columns:1fr;justify-items:center;text-align:center;
    max-width:760px;margin:0 auto;gap:0}
  .craving-center .cscript{margin-bottom:14px}
  .craving-center p{color:var(--on-red);font-size:1.02rem;max-width:540px;margin:0 auto 26px}

  /* =========================================================
     LOCATIONS PAGE
     ========================================================= */
  .loc-body-sec{background:var(--green);padding:46px 0 70px}
  .loc-map{position:relative;margin-top:44px;height:460px;border-radius:16px;overflow:hidden;
    border:3px solid var(--gold);box-shadow:0 16px 34px rgba(0,0,0,.3);background:#e9ece5}

  .loc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:44px}
  .loc-card{background:var(--card);border:3px solid var(--green-3);border-radius:16px;overflow:hidden;
    box-shadow:0 16px 34px rgba(0,0,0,.28);display:flex;flex-direction:column}
  .loc-card .ph{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--paper);
    border-bottom:4px solid var(--red)}
  .loc-card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
  .loc-card:hover .ph img{transform:scale(1.04)}
  .loc-card .num{position:absolute;top:12px;left:12px;width:38px;height:38px;border-radius:50%;
    background:var(--red);color:#fff;border:3px solid #fff;display:flex;align-items:center;justify-content:center;
    font-family:var(--cond);font-weight:700;font-size:1rem;box-shadow:0 3px 10px rgba(0,0,0,.35)}
  .loc-info{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1}
  .loc-info h2{font-family:var(--block);text-transform:uppercase;color:var(--green);
    font-size:1.5rem;letter-spacing:.5px;line-height:1}
  .loc-meta{list-style:none;margin:14px 0 18px;flex:1}
  .loc-meta li{display:flex;gap:10px;align-items:flex-start;color:#4a4234;font-size:.92rem;padding:5px 0;line-height:1.45}
  .loc-meta svg{flex:0 0 18px;width:18px;height:18px;margin-top:3px;stroke:var(--red);fill:none;
    stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
  .loc-meta a{color:var(--green);font-weight:600;border-bottom:1px solid rgba(11,56,38,.25)}
  .loc-meta a:hover{color:var(--red);border-color:var(--red)}
  .loc-actions{display:flex;gap:10px;flex-wrap:wrap}
  .loc-actions .btn{flex:1 1 130px;justify-content:center;padding:0 14px}
  .tbd{display:inline-flex;align-items:center;background:#fdf1cf;border:1px dashed var(--gold-d);
    color:#8a6200;border-radius:6px;padding:2px 9px;font-size:.79rem;font-weight:700;
    font-family:var(--cond);text-transform:uppercase;letter-spacing:.4px}

  @media(max-width:1080px){ .loc-grid{grid-template-columns:repeat(2,1fr)} }
  @media(max-width:860px){ .loc-map{height:380px} }
  @media(max-width:720px){ .loc-grid{grid-template-columns:1fr;max-width:420px;margin-inline:auto} }

  .foot-hours .btn{margin-top:14px}

  /* =========================================================
     ABOUT PAGE
     ========================================================= */
  .trad-rev .trad-photo{order:-1}

  /* dark centered story band — the "changing hands" chapter */
  .story-dark{background:var(--green)}
  .story-dark .sd-in{max-width:820px;margin:0 auto;text-align:center}
  .story-dark h2{font-family:var(--block);text-transform:uppercase;color:var(--card);
    font-size:clamp(2rem,4.4vw,3rem);line-height:.98;letter-spacing:1px}
  .story-dark .sd-script{font-family:var(--script);color:var(--gold);font-weight:400;line-height:1;
    font-size:clamp(1.5rem,3vw,2rem);margin:8px 0 20px}
  .story-dark p{color:var(--on-green-dim);margin-bottom:16px}
  .story-dark p:last-child{margin-bottom:0}

  .stats{display:flex;flex-wrap:wrap;background:var(--card);border:3px solid var(--green-3);
    border-radius:14px;overflow:hidden;box-shadow:0 16px 34px rgba(0,0,0,.28);max-width:900px;margin:0 auto}
  .stat{flex:1 1 210px;padding:26px 20px;text-align:center;border-left:1px solid #e7dcbe}
  .stat:first-child{border-left:none}
  .stat b{display:block;font-family:var(--block);color:var(--red);font-size:2.3rem;line-height:1}
  .stat span{display:block;font-family:var(--cond);text-transform:uppercase;color:var(--green);
    font-weight:600;font-size:.84rem;letter-spacing:1px;margin-top:7px}

  .vals{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:38px}
  .val{background:var(--card);border-radius:14px;padding:30px 24px;text-align:center;
    box-shadow:0 12px 24px rgba(0,0,0,.25)}
  .val .ic{width:58px;height:58px;margin:0 auto 14px;display:flex;align-items:center;justify-content:center}
  .val .ic svg{width:58px;height:58px}
  .val h3{font-family:var(--cond);text-transform:uppercase;color:var(--green);font-weight:700;
    font-size:1.1rem;letter-spacing:.4px}
  .val p{color:var(--muted);font-size:.9rem;margin-top:8px;line-height:1.5}

  @media(max-width:860px){
    .trad-rev .trad-photo{order:0}
    .vals{grid-template-columns:1fr;max-width:420px;margin-inline:auto}
    .stat{border-left:none;border-top:1px solid #e7dcbe}
    .stat:first-child{border-top:none}
  }

  /* =========================================================
     CAREERS PAGE — application form
     ========================================================= */
  .form-sec{background:var(--green);padding:52px 0 72px}
  .form-card{background:var(--card);border:3px solid var(--green-3);border-radius:16px;
    box-shadow:0 16px 34px rgba(0,0,0,.28);padding:38px clamp(20px,3.4vw,46px);max-width:840px;margin:0 auto}
  .form-card h2{font-family:var(--block);text-transform:uppercase;color:var(--green);text-align:center;
    font-size:clamp(1.6rem,3.4vw,2.2rem);line-height:1;letter-spacing:.5px}
  .form-note{text-align:center;color:var(--muted);font-size:.88rem;margin:10px auto 28px;max-width:540px}

  .fgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px 22px}
  .field{display:flex;flex-direction:column;min-width:0;position:relative}
  .field.full{grid-column:1 / -1}
  .field label{font-family:var(--cond);text-transform:uppercase;font-weight:600;color:var(--green);
    font-size:.82rem;letter-spacing:.7px;margin-bottom:6px}
  .req{color:var(--red)}
  .field input,.field select,.field textarea{font-family:inherit;font-size:.98rem;color:var(--ink);
    background:#fff;border:2px solid #ddd0ac;border-radius:8px;padding:12px 14px;min-height:48px;width:100%}
  .field textarea{min-height:112px;resize:vertical;line-height:1.5}
  .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--green);
    box-shadow:0 0 0 3px rgba(11,56,38,.14)}
  .field input:invalid:not(:placeholder-shown),.field select:invalid:not([data-pristine]){border-color:var(--red)}

  .radios{display:flex;flex-wrap:wrap;gap:10px}
  .radios label{display:inline-flex;align-items:center;gap:9px;background:var(--paper);border:2px solid #ddd0ac;
    border-radius:8px;padding:0 16px;min-height:48px;margin-bottom:0;cursor:pointer;
    font-family:var(--cond);font-weight:600;text-transform:uppercase;font-size:.82rem;letter-spacing:.5px;color:var(--green)}
  .radios input{accent-color:var(--red);width:17px;height:17px}
  .radios label:has(input:checked){background:var(--gold);border-color:var(--gold-d)}

  .form-actions{margin-top:28px;text-align:center}
  .eeo{text-align:center;color:var(--muted);font-size:.8rem;margin-top:20px;line-height:1.55}
  .form-msg{display:none;margin-top:20px;border-radius:10px;padding:15px 18px;font-size:.9rem;line-height:1.5;text-align:center}
  .form-msg.show{display:block}
  .form-msg.warn{background:#fdf1cf;border:1px dashed var(--gold-d);color:#8a6200}
  .hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

  @media(max-width:700px){ .fgrid{grid-template-columns:1fr} }

  /* careers — optional work history repeater */
  .work-history{border:0;padding:0;margin:30px 0 0;border-top:1px solid #e7dcbe;padding-top:26px}
  .work-history legend{padding:0;font-family:var(--cond);text-transform:uppercase;font-weight:700;
    color:var(--green);font-size:1rem;letter-spacing:1px}
  .job{border:2px dashed #ddd0ac;border-radius:12px;padding:18px;margin-bottom:14px;background:rgba(255,255,255,.55)}
  .job-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
  .job-num{font-family:var(--cond);text-transform:uppercase;font-weight:700;color:var(--green);
    font-size:.82rem;letter-spacing:.8px}
  .job-remove{background:none;border:0;padding:6px 2px;cursor:pointer;color:var(--red);
    font-family:var(--cond);text-transform:uppercase;font-weight:600;font-size:.78rem;letter-spacing:.5px}
  .job-remove:hover{text-decoration:underline}

  /* month + year picker (careers work history From/To) */
  input[data-monthpicker]{cursor:pointer;background:#fff}
  .mpick{position:absolute;top:calc(100% + 6px);left:0;z-index:40;width:286px;max-width:100%;
    background:#fff;border:2px solid var(--green);border-radius:12px;padding:12px;
    box-shadow:0 16px 32px rgba(0,0,0,.3)}
  .mpick-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
  .mpick-year{font-family:var(--cond);font-weight:700;color:var(--green);font-size:1.08rem;letter-spacing:.6px}
  .mpick-nav{width:36px;height:36px;border-radius:8px;border:2px solid #ddd0ac;background:var(--paper);
    color:var(--green);font-size:1.15rem;line-height:1;cursor:pointer;
    display:flex;align-items:center;justify-content:center}
  .mpick-nav:hover:not(:disabled){background:var(--gold);border-color:var(--gold-d)}
  .mpick-nav:disabled{opacity:.35;cursor:default}
  .mpick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
  .mpick-grid button{padding:10px 0;border-radius:8px;border:2px solid transparent;background:var(--paper);
    font-family:var(--cond);font-weight:600;text-transform:uppercase;font-size:.8rem;letter-spacing:.5px;
    color:var(--green);cursor:pointer}
  .mpick-grid button:hover{background:var(--gold);border-color:var(--gold-d)}
  .mpick-grid button[aria-pressed="true"]{background:var(--red);border-color:var(--red);color:#fff}
  .mpick-foot{display:flex;gap:8px;margin-top:10px}
  .mpick-foot button{flex:1;padding:10px 0;border-radius:8px;border:2px solid #ddd0ac;background:#fff;
    font-family:var(--cond);font-weight:600;text-transform:uppercase;font-size:.76rem;letter-spacing:.5px;
    color:var(--green);cursor:pointer}
  .mpick-foot button:hover{background:var(--paper)}

  /* ===== Legal / utility pages (privacy, terms, thank-you, 404) ===== */
  .legal{background:var(--paper);padding:64px 0 88px}
  .legal-in{max-width:760px}
  .legal-meta{font-family:var(--cond);text-transform:uppercase;letter-spacing:1px;
    font-size:.78rem;color:var(--muted);margin-bottom:28px}
  .legal h2{font-family:var(--cond);font-weight:600;text-transform:uppercase;
    letter-spacing:.6px;color:var(--green);font-size:1.18rem;margin:34px 0 10px}
  .legal h2:first-of-type{margin-top:0}
  .legal p{margin:0 0 14px;line-height:1.7;color:var(--ink)}
  .legal a{color:var(--red-d);text-decoration:underline}
  .legal a:hover{color:var(--red)}
  .legal-center{text-align:center}
  .legal-center h2{font-size:1.45rem}
  .legal-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:26px 0 18px}

  /* Footer policy links: explicit underline + light tone so they read as links
     on the dark green footer and clear WCAG AA. */
  .copyright a{color:var(--on-green);text-decoration:underline}
  .copyright a:hover{color:var(--gold)}

  /* Visible keyboard focus ring on every interactive element. */
  a:focus-visible,button:focus-visible,input:focus-visible,
  select:focus-visible,textarea:focus-visible,
  [role="button"]:focus-visible,
  [tabindex]:not([tabindex="-1"]):focus-visible{
    outline:3px solid var(--gold);outline-offset:2px;border-radius:2px}

  /* Footer NAP. Gives every page a consistent Name/Address/Phone and a tel: CTA,
     not just the locations page. The flagship E. 23rd Street store is the listed
     contact; the link points at all five. */
  .foot-nap{font-style:normal;display:flex;flex-direction:column;gap:4px;margin-top:14px;
    font-size:.9rem;line-height:1.5;color:var(--on-green-dim)}
  .foot-nap-name{font-family:var(--cond);text-transform:uppercase;letter-spacing:1px;
    font-weight:600;color:var(--on-green)}
  .foot-nap a{color:var(--on-green);text-decoration:none}
  .foot-nap a:hover{color:var(--gold);text-decoration:underline}
  .foot-nap-all{font-family:var(--cond);text-transform:uppercase;letter-spacing:1px;
    font-size:.78rem;color:var(--gold);margin-top:4px}
  @media(max-width:880px){ .foot-nap{align-items:center;text-align:center} }

  /* ---------- mobile tap targets ----------
     Scoped to the mobile breakpoint so the desktop footer keeps its tight rhythm.
     Footer links, the NAP block, social icons and the carousel arrows all sat
     between 17px and 42px tall, under the 44px minimum. */
  @media(max-width:880px){
    .foot-col ul a,
    .foot-nap a,
    .copyright a{display:inline-flex;align-items:center;min-height:44px}
    .socials a{width:48px;height:48px}
    .fav-arrow{width:48px;height:48px}
  }