/* ---------------------------------------------------------------------------
   Additions for content that had no home in style-bw.css.
   Kept separate so re-pulling the original stylesheet never wipes these.
   Everything below reuses the existing tokens, type scale and monochrome
   palette so the new blocks read as native.
   --------------------------------------------------------------------------- */

/* ---- nav dropdown (Locations) -------------------------------------------- */
/* .site-header has no overflow clip, so an absolute popover can escape it.
   Above 900px this is a hover/focus popover; at 900px and below the nav turns
   into a full-width panel, so the list simply sits inline and stays open. */
.nav-item{position:relative;display:flex;align-items:center}
/* The parent is an <a href="locations.html"> — a real link to the hub — that
   also reveals the dropdown on hover/focus. Reset the button-era styles so it
   still sits flush with the other nav links. */
.nav-toggle{display:inline-flex;align-items:center;gap:7px;background:none;border:0;padding:0;
  color:inherit;font-family:inherit;font-size:14px;cursor:pointer;text-decoration:none;transition:opacity .25s}
.nav-toggle:hover{opacity:.6}
.nav-toggle.is-current{opacity:1;border-bottom:1px solid currentColor;padding-bottom:2px}
.nav-toggle i{font-style:normal;font-size:10px;transition:transform .25s}
.nav-item.open .nav-toggle i{transform:rotate(180deg)}

.nav-dropdown{position:absolute;top:calc(100% + 18px);left:50%;transform:translateX(-50%) translateY(-6px);
  min-width:248px;padding:10px;display:grid;gap:2px;
  border:1px solid rgba(255,255,255,.28);border-radius:20px;background:rgba(17,17,17,.94);
  backdrop-filter:blur(18px);box-shadow:0 20px 50px rgba(0,0,0,.32);
  opacity:0;visibility:hidden;transition:opacity .24s,transform .24s,visibility .24s}
.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown,
.nav-item.open .nav-dropdown{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
/* Name and plaza label stack rather than sitting side by side: "Houston —
   Meyerland" plus "South Post Oak" cannot share a row without both wrapping. */
.nav-dropdown a{display:flex;flex-direction:column;align-items:flex-start;gap:3px;
  padding:11px 14px;border-radius:13px;font-size:14px;line-height:1.25;color:var(--cream);
  white-space:nowrap;transition:background .22s}
.nav-dropdown a:hover{background:rgba(255,255,255,.11);opacity:1}
.nav-dropdown a em{font-style:normal;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--peach);opacity:.85}
.nav-dropdown a.is-current{background:rgba(255,255,255,.14)}
.nav-dropdown hr{margin:7px 6px;border:0;border-top:1px solid rgba(255,255,255,.18)}

@media(max-width:900px){
  /* The nav becomes a full-width panel: keep the parent link visible (it goes
     to locations.html) and list the three locations inline beneath it. The
     caret is dropped since there is nothing left to toggle. */
  .nav-item{display:block}
  .nav-toggle{display:inline-flex;font-size:18px}
  .nav-toggle i{display:none}
  .nav-dropdown{position:static;transform:none;opacity:1;visibility:visible;min-width:0;
    padding:0 0 0 16px;margin-top:8px;border:0;background:none;backdrop-filter:none;box-shadow:none;gap:0}
  .nav-dropdown a{padding:9px 0;font-size:16px;border-radius:0}
  .nav-dropdown a:hover{background:none}
  .nav-dropdown hr{display:none}
}

/* ---- location-page hero -------------------------------------------------- */
/* The homepage h1 is three short words at up to 140px. A location headline is
   a full sentence, so it needs a smaller scale and less aggressive tracking
   while keeping the same face, stagger and rise animation. */
.hero-location h1{font:600 clamp(38px,5.2vw,80px)/.94 var(--serif);letter-spacing:-2.4px}
.hero-location h1 span:nth-child(2){margin-left:2.6vw}
.hero-location .hero-copy{width:58%}
@media(max-width:900px){
  .hero-location .hero-copy{width:100%}
  .hero-location h1{font-size:clamp(36px,8.4vw,58px);letter-spacing:-1.6px}
  .hero-location h1 span:nth-child(2){margin-left:0}
}

/* ---- dish-page hero: one photo instead of the three-card stack -----------
   Deliberately uses its own .dish-photo class rather than .hero-card/.card-one:
   those are absolutely positioned with percentage heights and rely on the cardIn
   animation for opacity, which is unwinnable to override cleanly. A fixed aspect
   ratio keeps the frame predictable across source photos of differing sizes. */
.hero-dish{display:flex;align-items:center;justify-content:center;padding:0 5%}
.dish-photo{position:relative;width:min(88%,520px);aspect-ratio:4/3;overflow:hidden;
  border:8px solid rgba(255,255,255,.92);box-shadow:0 22px 70px rgba(0,0,0,.34);
  transform:rotate(-2.5deg)}
.dish-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s}
.dish-photo:hover img{transform:scale(1.05)}
.hero-dish .round-stamp{left:auto;right:0;top:auto;bottom:4%}
@media(max-width:900px){
  .hero-dish{padding:0;height:100%}
  .dish-photo{width:min(82%,380px);aspect-ratio:auto;height:84%}
  .hero-dish .round-stamp{right:6%;bottom:6%}
}

/* ---- visit block (address / phone / hours) ------------------------------- */
.visit-section{max-width:1450px;margin:auto;padding:130px max(6vw,40px)}
.visit-grid{display:grid;grid-template-columns:1fr .92fr;gap:6vw;align-items:center}
.visit-section h2{margin:0 0 28px;font:600 clamp(34px,4.4vw,62px)/1.04 var(--serif);letter-spacing:-2.2px}
.visit-section h2 em{font-weight:500}
.visit-rows{border-top:1px solid rgba(17,17,17,.18);margin:0 0 30px}
.visit-rows>div{display:grid;grid-template-columns:110px 1fr;gap:20px;align-items:baseline;
  padding:18px 0;border-bottom:1px solid rgba(17,17,17,.18)}
.visit-rows dt{margin:0;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--muted)}
.visit-rows dd{margin:0;font-size:16.5px;line-height:1.6;color:var(--ink)}
.visit-rows dd a{border-bottom:1px solid rgba(17,17,17,.3)}
.visit-rows dd small{display:block;margin-top:5px;font-size:12.5px;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--muted)}
.visit-photo img{width:100%;height:100%;max-height:520px;object-fit:cover}
.visit-actions{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.visit-note{margin:26px 0 0;color:var(--muted);font-size:14.5px;line-height:1.8}
.visit-note a{color:var(--ink);font-weight:600;border-bottom:1px solid rgba(17,17,17,.35)}
@media(max-width:900px){
  .visit-section{padding:90px 22px}
  .visit-grid{grid-template-columns:1fr;gap:44px}
  .visit-photo{order:-1}
}

/* ---- extra menu items as linked chips ----------------------------------- */
.menu-more{margin-top:38px;padding-top:30px;border-top:1px solid rgba(17,17,17,.18)}
.menu-more>b{display:block;margin-bottom:16px;font-size:11px;letter-spacing:2.4px;
  text-transform:uppercase;color:var(--muted);font-weight:600}
.menu-more ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.menu-more a{display:inline-block;padding:10px 17px;border:1px solid rgba(17,17,17,.22);
  border-radius:999px;font-size:13.5px;color:var(--ink);transition:background .22s,color .22s,border-color .22s}
.menu-more a:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)}

/* ---- linked menu index (17 top items) ------------------------------------ */
/* The dish rail above only carries 20px of track padding, so this block needs
   its own top margin -- matched to the section's existing rhythm (the menu
   heading uses 65px below it, .menu-cta 70px above it) so the rail and the
   list are clearly separate blocks rather than one crowded run. */
.menu-index{max-width:1450px;margin:clamp(76px,8.5vw,128px) auto 0;padding:0 max(6vw,40px)}
.menu-index-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:42px}
.menu-index-head h3{margin:0;font:600 clamp(24px,2.6vw,34px)/1.1 var(--serif);letter-spacing:-1px}
.menu-index-list{border-top:1px solid rgba(17,17,17,.18)}
.menu-index-list>div{display:grid;grid-template-columns:52px minmax(180px,.42fr) 1fr;gap:18px;align-items:baseline;
  padding:18px 0;border-bottom:1px solid rgba(17,17,17,.18)}
.menu-index-list span{font-size:11px;color:var(--muted);letter-spacing:1px}
.menu-index-list a{font:italic 500 21px var(--serif);color:var(--ink);border-bottom:1px solid transparent;transition:border-color .25s,opacity .25s}
.menu-index-list a:hover{border-color:var(--ink)}
.menu-index-list p{margin:0;color:var(--muted);font-size:15px;line-height:1.7}
@media(max-width:860px){
  .menu-index-list>div{grid-template-columns:40px 1fr;gap:6px 14px}
  .menu-index-list p{grid-column:2}
}

/* ---- draggable dish rail ------------------------------------------------- */
/* The rail was overflow:hidden with a pure-CSS marquee. Switching to a real
   scroll container lets it be dragged (and trackpad/arrow-key scrolled) while
   JS keeps the same continuous drift. The scrollbar is hidden so the look is
   unchanged. */
.dish-rail{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
  scrollbar-width:none;-ms-overflow-style:none;cursor:grab}
.dish-rail::-webkit-scrollbar{display:none}
.dish-rail.is-dragging{cursor:grabbing}
.dish-rail.is-dragging .dish-card *{user-select:none}
.dish-rail img{-webkit-user-drag:none;user-select:none}
.dish-rail:focus-visible{outline:2px solid var(--ink);outline-offset:6px}
/* Only once JS has taken over the drift do we drop the CSS animation, so the
   marquee still works if the script never runs. */
.dish-rail.drag-ready .dish-track{animation:none}

/* ---- footer: room for a shared "Company" column -------------------------
   The base grid is 1.6fr + 3 equal columns. Every page now also carries a
   Company column (About / Careers / Locations / Order) so that secondary pages
   stay reachable site-wide without hand-wiring links page by page. */
.footer-grid{grid-template-columns:1.5fr repeat(4,1fr);gap:44px}
@media(max-width:1100px){.footer-grid{grid-template-columns:1fr 1fr 1fr;gap:38px}}
@media(max-width:700px){.footer-grid{grid-template-columns:1fr 1fr;gap:32px}}

/* ---- careers: open roles ------------------------------------------------- */
.role-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;max-width:1100px;margin:0 auto}
.role-card{border:1px solid rgba(17,17,17,.16);border-radius:22px;padding:34px 32px;background:var(--cream);
  transition:transform .3s,border-color .3s}
.role-card:hover{transform:translateY(-4px);border-color:var(--ink)}
.role-card span{display:block;font-size:11px;letter-spacing:2.2px;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.role-card h3{margin:0 0 10px;font:600 clamp(22px,2.2vw,28px)/1.1 var(--serif);letter-spacing:-.8px}
.role-card p{margin:0;color:var(--muted);font-size:15.5px;line-height:1.75}
@media(max-width:820px){.role-grid{grid-template-columns:1fr;gap:18px}}

/* ---- careers: how to apply ---------------------------------------------- */
.apply-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1100px;margin:44px auto 0;text-align:left}
.apply-card{border-top:1px solid rgba(255,255,255,.25);padding-top:22px}
.apply-card span{display:block;font-size:11px;letter-spacing:2px;color:var(--peach);margin-bottom:11px}
.apply-card b{display:block;font:italic 500 22px var(--serif);margin-bottom:8px}
.apply-card p{margin:0 0 12px;color:#D6D6D6;font-size:15px;line-height:1.7}
.apply-card a{color:var(--cream);border-bottom:1px solid rgba(255,255,255,.45);font-size:15px}
.apply-card a:hover{border-color:var(--cream)}
@media(max-width:820px){.apply-grid{grid-template-columns:1fr;gap:0}.apply-card{padding:22px 0}}

/* ---- AI overview callout -------------------------------------------------
   A deliberately self-contained summary block: every fact needed to answer
   "where are they and when are they open" sits inside this one element, so it
   can be lifted and cited without the surrounding page. */
.ai-overview{max-width:1000px;margin:0 auto;padding:0 max(6vw,22px)}
.ai-overview-card{border:1px solid rgba(17,17,17,.2);border-radius:26px;background:var(--sand);
  padding:clamp(28px,3.4vw,46px)}
.ai-overview-label{display:inline-flex;align-items:center;gap:9px;margin-bottom:18px;
  font-size:11px;font-weight:600;letter-spacing:2.4px;text-transform:uppercase;color:var(--muted)}
.ai-overview-label b{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--ink)}
.ai-overview-card p{margin:0;color:var(--ink);font-size:clamp(16px,1.5vw,18.5px);line-height:1.75}
.ai-overview-card p a{border-bottom:1px solid rgba(17,17,17,.35);font-weight:600}
.ai-overview-card p a:hover{border-color:var(--ink)}

/* location cards on the hub get a description block + two actions */
.location-desc{margin:14px 0 0;color:var(--muted);font-size:14.5px;line-height:1.7}
.location-body h3 a{border-bottom:1px solid transparent;transition:border-color .22s}
.location-body h3 a:hover{border-color:currentColor}
.location-actions{margin-top:18px;display:flex;flex-direction:column;gap:10px;align-items:flex-start}

/* ---- application / contact form ----------------------------------------
   Lives inside the dark .order-section, so fields are inverted: translucent
   fill with a light hairline border rather than the usual light-on-white. */
.apply-form{max-width:920px;margin:54px auto 0;text-align:left}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.field{display:flex;flex-direction:column;gap:9px}
.field.full{grid-column:1/-1}
.field label{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--peach)}
.field label i{font-style:normal;color:#fff;opacity:.55}
.field input,.field select,.field textarea{
  width:100%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.28);border-radius:12px;
  padding:15px 16px;color:var(--cream);font-family:inherit;font-size:15px;transition:border-color .22s,background .22s}
.field textarea{min-height:150px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,.42)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--cream);background:rgba(255,255,255,.11)}
.field select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,rgba(255,255,255,.7) 50%),
                   linear-gradient(135deg,rgba(255,255,255,.7) 50%,transparent 50%);
  background-position:calc(100% - 20px) 22px,calc(100% - 14px) 22px;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.field select option{color:#111;background:#fff}   /* native menu is light */
.field input[type=file]{padding:12px 14px;cursor:pointer}
.field input[type=file]::file-selector-button{
  margin-right:14px;padding:9px 15px;border:1px solid rgba(255,255,255,.4);border-radius:999px;
  background:none;color:var(--cream);font-family:inherit;font-size:13px;cursor:pointer}
.field input[type=file]::file-selector-button:hover{background:rgba(255,255,255,.12)}
.field .hint{font-size:12px;color:rgba(255,255,255,.5)}
.form-foot{margin-top:28px;display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between}
.form-note{margin:0;max-width:52ch;font-size:12.5px;line-height:1.7;color:rgba(255,255,255,.55)}
.form-status{margin:18px 0 0;padding:15px 18px;border-radius:12px;font-size:14.5px;line-height:1.6;display:none}
.form-status.is-shown{display:block}
.form-status.is-warn{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.3);color:var(--cream)}
@media(max-width:760px){.form-grid{grid-template-columns:1fr}.form-foot{justify-content:flex-start}}

/* current page marker on a plain nav link */
.nav-links>a.is-current{opacity:1;border-bottom:1px solid currentColor;padding-bottom:2px}

/* menu-index rows whose item is deliberately NOT a link (link budget) —
   matches the linked spelling exactly so the list stays visually even */
.menu-index-list b{font:italic 500 21px var(--serif);color:var(--ink);font-weight:500}

/* some source bullets are a run of item names with no description of their own.
   Rather than inventing one, the name column takes the width the empty
   description column would have used, so the row still reads as a full row. */
.menu-index-list>div.menu-index-wide{grid-template-columns:52px 1fr}

/* plain (unlinked) run of extra menu items */
.menu-plain{margin-top:38px;padding-top:30px;border-top:1px solid rgba(17,17,17,.18)}
.menu-plain>b{display:block;margin-bottom:14px;font-size:11px;letter-spacing:2.4px;
  text-transform:uppercase;color:var(--muted);font-weight:600}
.menu-plain p{margin:0;max-width:70ch;color:var(--muted);font-size:15.5px;line-height:1.9}

/* per-location menu links under the rail */
.menu-locations{margin-top:34px;text-align:center;color:var(--muted);font-size:15px}
.menu-locations a{color:var(--ink);font-weight:600;border-bottom:1px solid rgba(17,17,17,.35)}
.menu-locations a:hover{border-color:var(--ink)}
.menu-locations i{font-style:normal;padding:0 10px;color:var(--pale)}

/* ---- order online -------------------------------------------------------- */
.order-section{background:var(--brown);color:var(--cream);padding:130px max(6vw,40px);text-align:center}
.order-section h2{margin:0 auto 28px;max-width:900px;font:600 clamp(40px,5vw,72px)/1.03 var(--serif);letter-spacing:-2.4px}
.order-section h2 em{font-weight:500}
.order-section .eyebrow{color:var(--peach)}
.order-section>p{max-width:780px;margin:0 auto 22px;color:#E8E8E8;font-size:16px;line-height:1.8}
.order-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;max-width:1100px;margin:54px auto 0;text-align:left}
.order-steps>div{border-top:1px solid rgba(255,255,255,.25);padding-top:22px}
.order-steps span{display:block;font-size:11px;letter-spacing:2px;color:var(--peach);margin-bottom:12px}
.order-steps b{display:block;font:italic 500 22px var(--serif);margin-bottom:9px}
.order-steps p{margin:0;color:#D6D6D6;font-size:15px;line-height:1.7}
.order-actions{margin-top:50px;display:flex;gap:20px;justify-content:center;align-items:center;flex-wrap:wrap}
@media(max-width:860px){.order-section{padding:90px 22px}.order-steps{grid-template-columns:1fr;gap:0}
  .order-steps>div{padding:22px 0}}

/* ---- about / careers ---------------------------------------------------- */
.about-section{max-width:1120px;margin:auto;padding:130px max(6vw,40px);text-align:center}
.about-section h2{margin:0 auto 28px;max-width:960px;font:600 clamp(38px,4.6vw,66px)/1.05 var(--serif);letter-spacing:-2.2px}
.about-section h2 em{font-weight:500}
.about-section>p{max-width:820px;margin:0 auto 20px;color:var(--muted);font-size:16px;line-height:1.8}
.about-actions{margin-top:34px;display:flex;gap:26px;justify-content:center;flex-wrap:wrap}
@media(max-width:860px){.about-section{padding:90px 22px}}

/* ---- service areas inside location cards -------------------------------- */
.location-areas{margin:14px 0 0;color:var(--muted);font-size:13.5px;line-height:1.65}
.location-plaza{display:block;margin-bottom:6px;font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted)}

/* ---- service-area sweep under the "near me" section --------------------- */
.area-sweep{margin-top:26px;color:var(--muted);font-size:14.5px;line-height:1.9}
.area-sweep b{color:var(--ink);font-weight:600}

/* ---- reviews / social proof ------------------------------------------------
   The source site renders a LIVE Google reviews widget (GoDaddy), so the
   individual quotes there are truncated, change daily, and hotlink reviewer
   photos from Google. Hard-coding them would go stale immediately and
   misrepresent third-party content, so this section carries the durable part —
   the verified aggregate rating and per-location links — and leaves a slot for
   a live widget to drop into. */
.reviews{background:var(--sand)}
.reviews-head{text-align:center;max-width:620px;margin:0 auto 54px}
.reviews-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,4vw,64px);align-items:center}
.rating-card{background:#fff;border:1px solid rgba(17,17,17,.14);border-radius:24px;
  padding:clamp(30px,3.6vw,48px);text-align:center}
.rating-card .score{font:600 clamp(56px,7vw,96px)/1 var(--serif);color:var(--ink);letter-spacing:-3px}
.rating-card .stars{display:flex;gap:5px;justify-content:center;margin:14px 0 12px;color:var(--ink)}
.rating-card .stars svg{width:22px;height:22px}
.rating-card .count{font-size:14.5px;color:var(--muted)}
.rating-card .src{display:inline-flex;align-items:center;gap:8px;margin-top:20px;font-size:13.5px;
  font-weight:600;border-bottom:1px solid rgba(17,17,17,.35);padding-bottom:2px}
.rev-locs{display:grid;gap:14px}
.rev-loc{display:flex;justify-content:space-between;align-items:center;gap:20px;background:#fff;
  border:1px solid rgba(17,17,17,.14);border-radius:16px;padding:22px 24px;transition:.24s}
.rev-loc:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(17,17,17,.10)}
.rev-loc b{display:block;font:600 19px var(--serif);color:var(--ink)}
.rev-loc span{font-size:13.5px;color:var(--muted)}
.rev-loc em{font-style:normal;font-size:13.5px;font-weight:600;white-space:nowrap}
/* drop-in slot for a live Google reviews embed */
.reviews-embed{margin-top:34px;border:1px dashed rgba(17,17,17,.28);border-radius:16px;
  padding:26px;text-align:center;color:var(--muted);font-size:14px;background:#fff}
.reviews-embed b{display:block;color:var(--ink);font-size:15px;margin-bottom:4px}
@media(max-width:900px){.reviews-grid{grid-template-columns:1fr}}

/* ---- live Google review cards (rendered by assets/reviews.js) ------------- */
.reviews-embed.is-live{border:0;padding:0;background:none;text-align:left}
.gr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.gr-card{margin:0;background:#fff;border:1px solid rgba(17,17,17,.14);border-radius:18px;
  padding:26px 24px;display:flex;flex-direction:column;gap:14px}
.gr-stars{display:flex;gap:3px;color:var(--ink)}
.gr-stars svg{width:16px;height:16px}
.gr-card blockquote{margin:0;font-size:15px;line-height:1.7;color:var(--ink)}
.gr-card figcaption{display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:center;
  margin-top:auto;padding-top:14px;border-top:1px solid rgba(17,17,17,.12);font-size:13px}
.gr-card figcaption img{width:36px;height:36px;border-radius:50%;object-fit:cover}
.gr-card figcaption b{display:block;color:var(--ink);font-size:14px}
.gr-card figcaption span span{color:var(--muted)}
.gr-card figcaption a{grid-column:1/-1;font-weight:600;font-size:12.5px;
  border-bottom:1px solid rgba(17,17,17,.3);justify-self:start}
.gr-note{margin:22px 0 0;text-align:center;font-size:13.5px;color:var(--muted)}
.gr-note a{color:var(--ink);font-weight:600;border-bottom:1px solid rgba(17,17,17,.35)}
@media(max-width:1000px){.gr-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.gr-grid{grid-template-columns:1fr}}

/* =========================================================================
   BREADCRUMBS
   Internal-linking trail on every page except the homepage. Sits below the
   hero because the site header is a floating pill and would cover it.
   ========================================================================= */
.crumbs{padding:26px max(6vw,40px) 0;font-size:13px}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:0;margin:0;padding:0;list-style:none}
.crumbs li{display:inline-flex;align-items:center;color:rgba(17,17,17,.58)}
.crumbs li + li::before{content:"/";margin:0 10px;color:rgba(17,17,17,.3)}
.crumbs a{color:rgba(17,17,17,.58);text-decoration:none;border-bottom:1px solid transparent;
  transition:color .25s,border-color .25s}
.crumbs a:hover{color:var(--ink);border-bottom-color:var(--ink)}
.crumbs [aria-current="page"]{color:var(--ink);font-weight:600}
/* on pages whose next section is dark, keep the trail legible */
.crumbs.on-dark li,.crumbs.on-dark a{color:rgba(255,255,255,.66)}
.crumbs.on-dark li + li::before{color:rgba(255,255,255,.34)}
.crumbs.on-dark a:hover,.crumbs.on-dark [aria-current="page"]{color:#fff}
@media(max-width:640px){.crumbs{padding:20px max(6vw,20px) 0;font-size:12px}
  .crumbs li + li::before{margin:0 7px}}

/* second heading inside .menu-more (Browse by style / Browse by dish) */
.menu-more b.menu-more-next{display:block;margin-top:24px}

/* =========================================================================
   LEGAL PAGE (privacy statement)
   ========================================================================= */
.hero-legal{min-height:auto;padding-bottom:clamp(60px,8vw,110px)}
.hero-legal .hero-copy{max-width:760px}
.legal-body{max-width:74ch;margin-inline:auto}
.legal-body .legal-lead{font-size:clamp(17px,1.5vw,20px);line-height:1.7;margin-bottom:40px}
.legal-body h2{font:600 clamp(20px,2vw,26px)/1.25 var(--serif);margin:44px 0 14px}
.legal-body h2:first-of-type{margin-top:0}
.legal-body p{margin:0 0 16px;line-height:1.8}
.legal-body ul{margin:0 0 16px;padding:0;list-style:none}
.legal-body li{position:relative;padding-left:26px;margin-bottom:11px;line-height:1.75}
.legal-body li::before{content:"";position:absolute;left:6px;top:.72em;width:6px;height:6px;
  border-radius:50%;background:var(--ink);opacity:.55}
.legal-body a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px}
.legal-body a:hover{text-decoration-thickness:2px}
@media(max-width:640px){.legal-body h2{margin:34px 0 12px}}

/* Header CTA removed (the nav already carries Order Online), so give the pill
   even breathing room instead of the tight padding the button used to occupy. */
.site-header{padding-right:24px}
@media(max-width:900px){.site-header{padding-right:9px}}

/* =========================================================================
   IN-COPY INTERNAL LINKS (.ilink)
   Matches the live site, which links its dish and location terms inside body
   copy. Tagged with a class so existing content links keep their own styling.
   ========================================================================= */
.ilink{border-bottom:1px solid rgba(17,17,17,.34);font-weight:600;
  transition:border-color .25s,color .25s}
.ilink:hover{border-color:var(--ink)}
/* light text on dark sections */
.hero .ilink,.footer-grid .ilink,.promise-strip .ilink,.light .ilink{
  border-bottom-color:rgba(255,255,255,.42)}
.hero .ilink:hover,.footer-grid .ilink:hover{border-bottom-color:#fff}

/* ---- blog, rebuilt at the original /blog and /blog/f/<slug> URLs ----------
   Recreated in place rather than redirected, so the indexed URLs keep working
   after the move off GoDaddy. Layout borrows the site's existing measures. */
.blog-index, .blog-post { max-width: 1100px; margin: 0 auto; padding: 48px 20px 72px; }
.blog-index-head { max-width: 720px; margin: 0 auto 40px; text-align: center; }
.blog-index-head h1 { margin: 0 0 12px; }
.blog-index-head p { margin: 0; opacity: .8; }

.blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 28px; }
.blog-card { display: flex; flex-direction: column; text-decoration: none; color: inherit;
  border: 1px solid rgba(0,0,0,.12); border-radius: 14px; overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease; }
.blog-card:hover, .blog-card:focus-visible { transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0,0,0,.10); }
.blog-card img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.blog-card > div { padding: 20px 20px 24px; display: flex; flex-direction: column; flex: 1 1 auto; }
.blog-card h2, .blog-card h3 { font-size: 1.15rem; line-height: 1.3; margin: 0 0 8px; }
.blog-card p { margin: 0 0 14px; font-size: .93rem; line-height: 1.6; opacity: .85; }
.blog-more { margin-top: auto; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; }
.blog-more-link { text-align: center; margin: 40px 0 0; }

/* article */
.blog-post { max-width: 760px; }
.blog-post-head { margin-bottom: 28px; }
.blog-kicker { margin: 0 0 10px; font-size: .82rem; letter-spacing: .1em;
  text-transform: uppercase; opacity: .7; }
.blog-post-head h1 { margin: 0 0 10px; }
.blog-date { margin: 0; font-size: .85rem; opacity: .65; }
.blog-hero { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: 14px; display: block; margin: 0 0 32px; }
.blog-body h2 { margin: 40px 0 12px; }
.blog-body h3 { margin: 26px 0 8px; font-size: 1.02rem; }
.blog-body p { margin: 0 0 16px; line-height: 1.75; }
.blog-body > *:first-child { margin-top: 0; }
.blog-back { margin: 44px 0 0; padding-top: 22px; border-top: 1px solid rgba(0,0,0,.12); }

@media (max-width: 700px) {
  .blog-index, .blog-post { padding: 32px 18px 56px; }
  .blog-grid { grid-template-columns: 1fr; }
}

/* ---- honeypot on the application form --------------------------------
   apply.php discards any submission where this field is filled, on the basis
   that only a bot would fill a field a human cannot see. That makes hiding it
   properly a correctness requirement, not a cosmetic one: left visible, a real
   applicant could type in it and have their application silently dropped.
   Moved off-screen rather than display:none, since some bots skip hidden inputs
   and would sail past the trap. The field is also aria-hidden and out of the tab
   order, so keyboard and screen-reader users never reach it. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}

/* The Soro article widget renders itself into #soro-blog. It ships its own
   styles, so this only gives it room and keeps it inside our column. The
   earlier GoDaddy-era posts sit below it under their own heading. */
.soro-blog-mount { margin: 0 0 8px; min-height: 200px; }
.soro-blog-mount:empty { min-height: 0; }
.blog-earlier-head { margin: 56px 0 20px; font-size: 1.1rem; letter-spacing: .1em;
  text-transform: uppercase; opacity: .7; text-align: center; }
.blog-noscript { text-align: center; margin: 0 0 8px; opacity: .85; }

/* Deep-linked articles are scrolled into view by the widget. The site header is
   position:fixed at top:18px with height:64px, so without this clearance it
   lands on top of the article title. */
#soro-blog,
#soro-blog h1, #soro-blog h2, #soro-blog h3,
#soro-blog [class*="article"] { scroll-margin-top: 104px; }

/* Mirror of .local-favorite so the two prose blocks alternate sides down the
   page rather than stacking their photos on the same edge. Order is reset at
   900px, where the grid collapses to one column and the copy must lead. */
.local-favorite.is-flipped { grid-template-columns: .82fr 1fr; }
.local-favorite.is-flipped .local-favorite-copy { order: 2; }
.local-favorite.is-flipped .local-favorite-image { order: 1; }
@media (max-width: 900px) {
  .local-favorite.is-flipped { grid-template-columns: 1fr; }
  .local-favorite.is-flipped .local-favorite-copy,
  .local-favorite.is-flipped .local-favorite-image { order: 0; }
}

/* The article listing is a section on the page now, not the page itself, so its
   heading is an h2 and needs the display face the h1 rule used to supply. */
.blog-index-head h2 { margin: 0 0 14px; font: 600 clamp(34px, 4.4vw, 58px)/1.04 var(--serif);
  letter-spacing: -1.8px; }
.blog-index-head .eyebrow { margin: 0 0 14px; }

/* Pages whose content starts straight after the header — the thank-you page, the
   404 and the article pages — need to clear it. The header is position:fixed at
   top:18px with height:64px, so it occupies the first 82px and the 48px of
   padding these sections carry is not enough: the h1 ends up behind it. Pages
   that open with a hero are unaffected, since the hero sits between the two.
   Adjacent-sibling, not :first-child — the header is itself inside <main>, so the
   content section is never the first child. */
.site-header + .blog-index,
.site-header + .blog-post { padding-top: 132px; }
@media (max-width: 900px) {
  .site-header + .blog-index,
  .site-header + .blog-post { padding-top: 112px; }
}

/* ==========================================================================
   REWARD MODAL — the inKind offer popup, matching the one on the live site
   ==========================================================================
   Built as a native <dialog> rather than a div overlay. showModal() gives the
   focus trap, the Esc-to-close and the inert background for free; hand-rolling
   those is where promo popups usually end up trapping keyboard users.

   Styling stays in the site's own language: Playfair for the heading, Work Sans
   for the copy, the outlined pill with rules either side of the label that the
   live popup uses, and the same 999px radius as .button. --------------------- */
.reward-dialog{
  width: min(560px, calc(100vw - 32px));
  padding: 0;
  border: 0;
  border-radius: 20px;
  overflow: hidden;
  background: var(--cream);
  color: var(--ink);
  box-shadow: 0 40px 100px rgba(0,0,0,.34);
}
.reward-dialog::backdrop{
  background: rgba(17,17,17,.62);
  backdrop-filter: blur(3px);
}
/* the open animation is on the element, not the backdrop, so a reduced-motion
   user still gets the dialog instantly rather than a half-faded one */
.reward-dialog[open]{ animation: rewardIn .42s cubic-bezier(.16,1,.3,1) both; }
@keyframes rewardIn{
  from{ opacity: 0; transform: translateY(18px) scale(.97); }
  to  { opacity: 1; transform: none; }
}

.reward-dialog img{
  width: 100%;
  height: clamp(180px, 30vw, 234px);
  object-fit: cover;
  display: block;
}
.reward-body{ padding: 34px clamp(24px, 5vw, 46px) 40px; text-align: center; }
.reward-body h2{
  margin: 0 0 16px;
  font: 600 clamp(28px, 4.4vw, 38px)/1.12 var(--serif);
  letter-spacing: -1.2px;
}
.reward-body p{
  margin: 0 0 28px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
}

/* The live popup's button is a ghost pill with a short rule either side of the
   label. Rules are pseudo-elements so the label stays the only real text. */
.reward-claim{
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 17px 30px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  transition: background .25s, color .25s, transform .25s;
}
.reward-claim::before,
.reward-claim::after{
  content: "";
  width: 18px;
  height: 1px;
  background: currentColor;
  flex: none;
}
.reward-claim:hover{
  background: var(--ink);
  color: var(--cream);
  transform: translateY(-2px);
}

.reward-close{
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  color: var(--ink);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  transition: background .2s, transform .2s;
}
.reward-close:hover{ background: var(--cream); transform: rotate(90deg); }

@media (max-width: 560px){
  .reward-dialog{ border-radius: 16px; }
  .reward-body{ padding: 28px 22px 34px; }
}
@media (prefers-reduced-motion: reduce){
  .reward-dialog[open]{ animation: none; }
  .reward-close:hover{ transform: none; }
  .reward-claim:hover{ transform: none; }
}