*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  background: #fff;
  color: #1a1a1a;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: #1C244B; }
a:hover { text-decoration: underline; }
img { display: block; max-width: 100%; }

/* ── Site header ─────────────────────────────────────────────────────────────
   All sizing values below come from HEADER_TOKENS (lib/site-nav/src/index.ts).
   Do not edit pixel values here directly — edit the token instead.
── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── */
.sc-header {
  background: #0d0d0d;
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.sc-header-inner {
  max-width: 1152px;
  margin: 0 auto;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.sc-logo { flex-shrink: 0; line-height: 0; }
.sc-logo img { height: 40px; width: auto; }
.sc-nav {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
/* Nav links — base and active state driven by aria-current (no inline style needed) */
.sc-nav a {
  color: #fff;
  text-decoration: none;
  font-family: Poppins, sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  white-space: nowrap;
}
.sc-nav a[aria-current="page"] { color: #F4C218; }
.sc-order-group {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
/* No-JS fallback order-links strip — always flex when visible */
.sc-order-fallback {
  display: flex;
  align-items: center;
  gap: 12px;
}
/* Location select */
.sc-loc-select {
  font-family: Poppins, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 3px;
  padding: 6px 8px;
  background: #070707;
  color: #fff;
  cursor: pointer;
}
/* Static label when only one location total */
.sc-loc-label {
  font-family: Poppins, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  white-space: nowrap;
}
/* Shared pill — <a> no-JS fallback AND <button> JS-enhanced trigger */
.sc-order-btn {
  display: inline-block;
  background: #F4C218;
  color: #050505;
  font-family: Poppins, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 9999px;
  white-space: nowrap;
  border: none;
  cursor: pointer;
}
.sc-order-btn:hover { filter: brightness(.95); text-decoration: none; }
/* No-JS fallback secondary delivery link */
.sc-order-link {
  font-family: Poppins, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
  text-decoration: none;
  white-space: nowrap;
}
.sc-order-link:hover { color: #fff; text-decoration: none; }
.sc-order-muted {
  font-family: Poppins, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  color: rgba(255,255,255,.3);
  white-space: nowrap;
  cursor: default;
  user-select: none;
}
/* JS-enhanced order picker */
.sc-picker-wrap { position: relative; }
.sc-picker-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 200px;
  background: #fff;
  border-radius: 3px;
  box-shadow: 0 20px 60px rgba(0,0,0,.3), 0 0 0 1px rgba(0,0,0,.08);
  overflow: hidden;
  z-index: 200;
}
.sc-picker-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  font-family: Poppins, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #050505;
  text-decoration: none;
}
.sc-picker-item:hover { background: #F4C218; text-decoration: none; color: #050505; }
.sc-picker-type {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #69727d;
  font-weight: 400;
  width: 64px;
  flex-shrink: 0;
}
.sc-picker-divider { border-top: 1px solid rgba(0,0,0,.06); }

/* ── Hidden helper — replaces inline style="display:none" in server HTML ── */
.sc-hidden { display: none !important; }

/* ── Site footer ────────────────────────────────────────────────── */
.sc-footer {
  background: #0d0d0d;
  color: rgba(255,255,255,.6);
  font-family: Inter, system-ui, sans-serif;
  font-size: 13px;
  padding: 48px 16px 32px;
  margin-top: 64px;
}
.sc-footer-inner {
  max-width: 1152px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 32px;
}
.sc-footer-brand {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 28px;
  color: #F4C218;
  margin-bottom: 8px;
}
.sc-footer a { color: rgba(255,255,255,.6); text-decoration: none; }
.sc-footer a:hover { color: #fff; text-decoration: underline; }
.sc-footer-links { display: flex; flex-direction: column; gap: 8px; }
/* Replaces inline style="margin-top:8px;" on the phone paragraph */
.sc-footer-phone { margin-top: 8px; }
/* Replaces long inline style on the "Quick Links" column heading */
.sc-footer-col-heading {
  font-family: Poppins, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
  margin-bottom: 12px;
}
.sc-footer-bottom {
  max-width: 1152px;
  margin: 32px auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.1);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  font-size: 12px;
  color: rgba(255,255,255,.4);
}
.sc-footer-bottom a { color: rgba(255,255,255,.4); text-decoration: none; }
.sc-footer-bottom a:hover { color: #fff; }
/* Replaces inline style="display:flex;gap:16px;" on the legal-links row */
.sc-footer-legal-links { display: flex; gap: 16px; }

/* ── Utility ────────────────────────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ── Legal pages (/privacy, /terms) ─────────────────────────────── */
/* Shared extra-head styles (formerly inline <style> in LEGAL_EXTRA_HEAD).
   :has() targets main only when it contains a .sc-legal-body child. */
main:has(.sc-legal-body) { background: #fafafa; }
.sc-legal-body h2 { color: #1a1a1a; }
.sc-legal-body p,
.sc-legal-body li { color: #333; font-size: .97rem; line-height: 1.75; }
.sc-legal-body ul { color: #333; }
.sc-legal-body a { color: #b8860b; }
.sc-legal-body a:hover { color: #1a1a1a; }
@media (max-width: 600px) {
  .sc-legal-body { padding: 32px 16px 64px; }
  .sc-legal-body h1 { font-size: 2rem; }
}
/* Replaces inline style="max-width:800px;margin:0 auto;padding:48px 24px 80px;" */
.sc-legal-body {
  max-width: 800px;
  margin: 0 auto;
  padding: 48px 24px 80px;
}
/* Replaces repeated inline style on every h1 */
.sc-legal-h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2.5rem;
  letter-spacing: .05em;
  margin-bottom: 8px;
}
/* Replaces inline style on metadata paragraphs */
.sc-legal-meta {
  color: #555;
  font-size: .9rem;
  margin-bottom: 8px;
}
.sc-legal-meta--lg {
  color: #555;
  font-size: .9rem;
  margin-bottom: 32px;
}
/* Replaces repeated inline style on every h2 */
.sc-legal-h2 {
  font-family: 'Poppins', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-top: 40px;
  margin-bottom: 12px;
  border-bottom: 2px solid #F4C218;
  padding-bottom: 6px;
}
/* Replaces repeated inline style on every <ul> */
.sc-legal-ul { margin: 12px 0 12px 24px; }
/* Replaces inline style="margin-top:12px;line-height:2;" on contact <p> */
.sc-legal-contact { margin-top: 12px; line-height: 2; }
/* Replaces inline style="margin-top:12px;" */
.sc-legal-mt { margin-top: 12px; }
/* Replaces inline style="margin-top:8px;" */
.sc-legal-mt-sm { margin-top: 8px; }

/* ── Catering page (/catering) ───────────────────────────────────── */
.sc-catering-page { }
.sc-page-header {
  background: #0d0d0d;
  padding: 64px 16px 48px;
}
.sc-page-header-inner {
  max-width: 720px;
  margin: 0 auto;
}
.sc-page-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(52px, 10vw, 88px);
  line-height: .95;
  color: #fff;
  text-transform: uppercase;
}
.sc-page-intro {
  margin-top: 20px;
  font-family: Poppins, sans-serif;
  font-size: clamp(16px, 2.5vw, 19px);
  color: rgba(255,255,255,.7);
  line-height: 1.6;
}
.sc-body-wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 16px 80px;
}

/* Key details */
.sc-key-details {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  padding: 32px 0;
  border-bottom: 1px solid #e5e7eb;
  margin-top: 40px;
}
.sc-kd-item { flex: 1; min-width: 100px; }
.sc-kd-num { font-family: 'Bebas Neue', sans-serif; font-size: 40px; color: #F4C218; line-height: 1; }
.sc-kd-lbl { font-size: 13px; color: #69727d; margin-top: 4px; text-transform: uppercase; letter-spacing: .06em; }

/* Sections */
.sc-section { margin-top: 56px; }
.sc-section-heading {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(26px, 4vw, 36px);
  color: #050505;
  text-transform: uppercase;
  margin-bottom: 8px;
}

/* Service levels */
.sc-service-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.sc-service-card { border: 1px solid #e5e7eb; border-radius: 3px; padding: 20px; }
.sc-service-name { font-family: Poppins, sans-serif; font-size: 15px; font-weight: 700; color: #050505; margin-bottom: 6px; }
.sc-service-desc { font-size: 14px; color: #69727d; }

/* Photo grid — base styles; per-photo background-image via sc-photo-N classes */
.sc-photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 40px; }
.sc-photo { aspect-ratio: 4/3; border-radius: 3px; overflow: hidden; background-color: #F4C218; background-size: cover; background-position: center; }
.sc-photo-1 { background-image: url('/images/catering/catering-01.jpg'); }
.sc-photo-2 { background-image: url('/images/catering/catering-02.jpg'); }
.sc-photo-3 { background-image: url('/images/catering/catering-03.jpg'); }

/* Lead-time block */
.sc-lead-time-block {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  flex-wrap: wrap;
  padding: 32px 0;
  border-bottom: 1px solid #e5e7eb;
  margin-top: 40px;
}
.sc-lead-time-note {
  flex: 1;
  min-width: 200px;
  font-family: Inter, sans-serif;
  font-size: 14px;
  color: #69727d;
  line-height: 1.6;
  margin: 0;
  padding-top: 6px;
}

/* How It Works steps */
.sc-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  counter-reset: none;
}
.sc-step {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 24px 0;
  border-bottom: 1px solid #e5e7eb;
}
.sc-step:first-child { border-top: 1px solid #e5e7eb; }
.sc-step-num {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  background: #F4C218;
  color: #050505;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  line-height: 40px;
  text-align: center;
  margin-top: 2px;
}
.sc-step-body { flex: 1; padding-top: 8px; }
.sc-step-text {
  font-family: Inter, sans-serif;
  font-size: 16px;
  color: #1a1a1a;
  line-height: 1.6;
  margin: 0;
}

/* Contact section */
.sc-contact-section {
  margin-top: 56px;
  padding: 0 16px 80px;
}
.sc-contact-inner {
  max-width: 960px;
  margin: 0 auto;
}
.sc-contact-intro {
  font-family: Inter, sans-serif;
  font-size: 16px;
  color: #69727d;
  line-height: 1.6;
  margin: 0;
}

/* Location grid */
.sc-loc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: stretch;
  margin-top: 24px;
}
.sc-loc-card {
  display: flex;
  flex-direction: column;
  border-radius: 6px;
  padding: 24px;
  text-decoration: none;
  box-sizing: border-box;
}
.sc-loc-card--open {
  background: #fff;
  border: 1px solid #e5e7eb;
}
.sc-loc-card--open .sc-loc-card-name { color: #050505; }
.sc-loc-card--soon {
  background: #f8f8f8;
  border: 1px solid #ebebeb;
  color: inherit;
  transition: border-color .15s;
}
.sc-loc-card--soon:hover { border-color: #d1d5db; }
.sc-loc-card--soon .sc-loc-card-name { color: #b0b7c3; }
.sc-loc-card-name {
  font-family: Poppins, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  margin-bottom: 8px;
  line-height: 1.3;
}
.sc-loc-soon-text {
  font-family: Inter, sans-serif;
  font-size: 14px;
  color: #b0b7c3;
  line-height: 1.55;
  margin: 0;
}
.sc-loc-card-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
  padding-top: 24px;
}
.sc-cta-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: Poppins, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 12px 28px;
  border-radius: 9999px;
  border: none;
  cursor: pointer;
  transition: filter .15s;
  white-space: nowrap;
}
.sc-cta-pill:hover { filter: brightness(.93); }
.sc-cta-call { background: #F4C218; color: #050505; }
.sc-cta-email { background: #050505; color: #F4C218; }
.sc-cta-email[aria-disabled="true"] {
  background: #e5e7eb;
  color: #9ca3af;
  cursor: not-allowed;
  filter: none;
}

/* ── Catering form ─────────────────────────────────────────────────────────── */
.sc-form-section { padding: 48px 0 0; }
.sc-form-intro-block { margin-bottom: 32px; }
.sc-form-framing {
  font-size: 1rem;
  line-height: 1.65;
  color: #111827;
  background: #fef9ec;
  border-left: 3px solid #F4C218;
  padding: 14px 20px;
  border-radius: 0 4px 4px 0;
  margin: 0;
}
.sc-catering-form { display: flex; flex-direction: column; gap: 20px; }
.sc-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.sc-form-group { display: flex; flex-direction: column; gap: 6px; }
.sc-form-group--error .sc-form-label { color: #b91c1c; }
.sc-form-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #374151;
  line-height: 1.4;
}
.sc-form-req { color: #b91c1c; margin-left: 2px; }
.sc-form-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 1rem;
  font-family: inherit;
  color: #050505;
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
  appearance: auto;
}
.sc-form-input:focus {
  outline: none;
  border-color: #F4C218;
  box-shadow: 0 0 0 3px rgba(244, 194, 24, 0.25);
}
.sc-form-input--error { border-color: #b91c1c; }
.sc-form-input--error:focus { box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.2); }
.sc-form-textarea { resize: vertical; min-height: 100px; }
.sc-form-error { font-size: 0.8125rem; color: #b91c1c; margin: 0; }
.sc-form-hint  { font-size: 0.8125rem; color: #6b7280; margin: 0; }
.sc-form-warning {
  font-size: 0.8125rem;
  color: #92400e;
  background: #fef3c7;
  border: 1px solid #fde68a;
  border-radius: 4px;
  padding: 8px 12px;
  margin: 4px 0 0;
}
/* General form-level error banner (rate limit, expired token) */
.sc-form-banner { padding: 12px 16px; border-radius: 6px; margin-bottom: 4px; font-size: 0.875rem; }
.sc-form-banner--error { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; }
/* Service type fieldset */
.sc-form-fieldset {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 16px 20px 20px;
  margin: 0;
}
.sc-form-fieldset .sc-form-label { display: inline; }
.sc-form-radios { display: flex; gap: 24px; margin: 10px 0 0; }
.sc-form-radio-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  font-weight: 400;
  color: #050505;
  cursor: pointer;
}
.sc-form-radio-label input[type="radio"] {
  accent-color: #F4C218;
  width: 18px;
  height: 18px;
  cursor: pointer;
  flex-shrink: 0;
}
/* Delivery address: visible by default — must be accessible without JavaScript.
   JS in catering.js is the primary toggle: hides on load when Pickup is checked,
   shows when Delivery is checked. Without JS, the field is always visible.
   No CSS :has() rule — a browser with the :has() re-evaluation bug would hide
   the field after the user switches to Delivery and never reveal it. */
.sc-form-delivery-group { margin-top: 20px; }
/* Submit footer */
.sc-form-footer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  padding-top: 4px;
}
.sc-form-submit {
  display: inline-block;
  padding: 13px 36px;
  background: #F4C218;
  color: #050505;
  border: none;
  border-radius: 40px;
  font-size: 0.9375rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: filter 0.15s;
  font-family: inherit;
}
.sc-form-submit:hover  { filter: brightness(0.93); }
.sc-form-submit:active { filter: brightness(0.86); }
.sc-form-fine-print { font-size: 0.8125rem; color: #6b7280; margin: 0; }
.sc-form-fine-print a { color: #6b7280; text-underline-offset: 2px; }
/* ── Form section blocks ─────────────────────────────────────────────────────── */
.sc-form-block { border-top: 1px solid #e5e7eb; padding-top: 28px; margin-top: 28px; }
.sc-form-block:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.sc-form-block-heading {
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #374151;
  margin: 0 0 20px;
}
.sc-form-framing-note {
  font-size: 0.875rem;
  color: #6b7280;
  line-height: 1.55;
  margin: 0 0 18px;
}
/* ── Order mode pan / plate quantity groups ──────────────────────────────────── */
/* Both groups are hidden by default. JS is the primary toggle; CSS :has() is a
   passive enhancement for browsers where dynamic :has() re-evaluation works. */
.sc-form-pan-group,
.sc-form-plate-group { display: none; margin-top: 20px; }
.sc-form-order-fieldset:has(input[value="pans"]:checked)   .sc-form-pan-group   { display: block; }
.sc-form-order-fieldset:has(input[value="plates"]:checked) .sc-form-plate-group { display: block; }
/* Quantity grid — 2-up on all sizes; narrower inputs than the main form grid */
.sc-form-qty-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.sc-form-qty-input { max-width: 100%; }
/* ── Sauce list ───────────────────────────────────────────────────────────────── */
.sc-sauce-list { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.sc-sauce-row  { display: flex; align-items: center; gap: 14px; }
.sc-sauce-label {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.9375rem;
  font-weight: 500;
  flex: 1;
  min-width: 0;
  cursor: pointer;
  line-height: 1.3;
}
.sc-sauce-label input[type="checkbox"] {
  accent-color: #F4C218;
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  cursor: pointer;
}
.sc-sauce-note {
  font-size: 0.75rem;
  font-weight: 600;
  color: #92400e;
  background: #fef3c7;
  border: 1px solid #fcd34d;
  border-radius: 4px;
  padding: 2px 7px;
  white-space: nowrap;
}
.sc-sauce-qty {
  width: 72px;
  padding: 7px 10px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 0.9375rem;
  font-family: inherit;
  text-align: center;
  flex-shrink: 0;
  color: #111;
  background: #fff;
}
.sc-sauce-qty:focus {
  outline: none;
  border-color: #F4C218;
  box-shadow: 0 0 0 3px rgba(244,194,24,0.25);
}
/* Honeypot — off-screen so bots can reach and fill it; humans never see it.
   Do not use display:none — some bots skip display-none fields.
   Do not use visibility:hidden — it reserves space and can shift layout.
   position:absolute + left:-9999px is the standard approach. */
.sc-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
/* Thank-you page */
.sc-thankyou-body { padding: 48px 0 64px; }
.sc-thankyou-body p {
  font-size: 1rem;
  color: #374151;
  line-height: 1.65;
  max-width: 520px;
  margin: 0 0 28px;
}
.sc-thankyou-back {
  display: inline-block;
  padding: 11px 28px;
  border: 2px solid #F4C218;
  border-radius: 40px;
  color: #050505;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s;
}
.sc-thankyou-back:hover { background: #F4C218; }

@media (max-width: 680px) {
  .sc-photo-grid { grid-template-columns: repeat(2, 1fr); }
  .sc-photo-grid .sc-photo:last-child { display: none; }
  .sc-loc-grid { grid-template-columns: 1fr; }
  .sc-form-grid { grid-template-columns: 1fr; }
}