*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg-primary: #0a0604;
  --bg-secondary: #120c08;
  --bg-card: rgba(18, 12, 8, 0.7);
  --bg-card-hover: rgba(25, 16, 10, 0.9);
  --border: rgba(139, 37, 0, 0.15);
  --border-hover: rgba(139, 37, 0, 0.4);
  --red: #C41E00;
  --red-text: #E83A10;
  --red-dark: #8B2500;
  --red-glow: rgba(196, 30, 0, 0.25);
  --brown: #5C3A21;
  --cream: #F5E6D3;
  --gold: #D4A847;
  --text-primary: #ffffff;
  --text-secondary: #b8a99a;
  --text-muted: #9a8b7d;
}

body {
  font-family: 'Inter', -apple-system, sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
}

/* Skip link */
.skip-link {
  position: absolute; top: -100px; left: 50%; transform: translateX(-50%);
  background: var(--red); color: #fff; padding: 14px 28px; z-index: 10000;
  text-decoration: none; font-weight: 700; font-size: 1rem;
  border-radius: 0 0 10px 10px; transition: top 0.3s;
}
.skip-link:focus { top: 0; outline: 3px solid var(--gold); outline-offset: 2px; }

/* Focus styles */
*:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}
*:focus:not(:focus-visible) { outline: none; }

/* Gradient background */
.gradient-bg {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
}
.gradient-bg::before {
  content: ''; position: absolute; top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: radial-gradient(ellipse at 30% 20%, rgba(196, 30, 0, 0.06) 0%, transparent 50%),
              radial-gradient(ellipse at 70% 60%, rgba(92, 58, 33, 0.05) 0%, transparent 50%),
              radial-gradient(ellipse at 50% 80%, rgba(212, 168, 71, 0.03) 0%, transparent 50%);
  animation: gradientShift 20s ease-in-out infinite;
}
@keyframes gradientShift {
  0%, 100% { transform: translate(0, 0); }
  33% { transform: translate(2%, -2%); }
  66% { transform: translate(-1%, 1%); }
}

/* The .particles / .particle / @keyframes rise block was removed on 2026-09-21.
   warm.css has shipped `.particles { display: none !important }` on every page since the
   cream theme was promoted to root, so the 25 rising dots were never rendered — but the
   markup and the infinite `rise` animation still read as an un-pausable moving decoration
   in a source review and produced a 2.2.2 finding against animation nobody could see. */

/* Cursor glow */
.cursor-glow {
  position: fixed; width: 400px; height: 400px; border-radius: 50%;
  background: radial-gradient(circle, rgba(196, 30, 0, 0.06) 0%, transparent 70%);
  pointer-events: none; z-index: 0; transform: translate(-50%, -50%);
  transition: left 0.15s ease, top 0.15s ease;
}

/* Scroll reveal */
.reveal {
  opacity: 0; transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
/* A keyboard user can land on a control inside an unrevealed block before the
   observer fires, leaving the focus ring invisible for the length of the
   transition. Reveal immediately on focus. */
.reveal:focus-within { opacity: 1; transform: translateY(0); transition: none; }
/* Without scripting nothing ever adds .visible, so every .reveal block would stay
   permanently invisible. */
@media (scripting: none) {
  .reveal { opacity: 1; transform: none; }
}

/* Navigation */
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 16px 48px;
  display: flex; justify-content: space-between; align-items: center;
  background: rgba(10, 6, 4, 0.8);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--border);
}
.nav-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.nav-brand img { height: 44px; }
.nav-brand-text {
  font-family: 'Bebas Neue', sans-serif; font-size: 1.5rem; color: var(--cream);
  letter-spacing: 2px;
}
.nav-links { display: flex; gap: 32px; list-style: none; }
.nav-links a {
  color: var(--text-secondary); text-decoration: none; font-size: 0.875rem;
  font-weight: 500; transition: color 0.3s;
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--cream); }
.nav-links a[aria-current="page"] { color: var(--gold); }
.nav-cta {
  background: var(--red); color: white; padding: 10px 28px; border-radius: 8px;
  text-decoration: none; font-size: 0.875rem; font-weight: 600; transition: all 0.3s;
  box-shadow: 0 0 24px var(--red-glow);
}
.nav-cta:hover { box-shadow: 0 0 40px var(--red-glow); transform: translateY(-1px); }

.mobile-toggle {
  display: none; background: none; border: 1px solid var(--border);
  color: white; font-size: 1.375rem; cursor: pointer; padding: 8px 12px; border-radius: 8px;
}
.mobile-menu {
  display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(10, 6, 4, 0.97); backdrop-filter: blur(20px);
  z-index: 99; flex-direction: column; align-items: center;
  gap: 32px;
  /* Reflow (WCAG 1.4.10): the drawer is capped to the viewport by top/bottom:0, so
     a link list taller than the viewport has to scroll inside it. `justify-content:
     center` cannot be used for that centring — centred overflow spills past BOTH
     edges, and the part above the start edge sits at a negative scroll offset no
     scrollbar can reach. Auto margins on the first and last link split the free
     space in half (same centred look) and collapse to 0 the moment space runs out,
     so overflow only ever goes downwards, where overflow-y can scroll to it. */
  justify-content: flex-start;
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  /* Symmetric, so the centred position is unchanged; clears the close button. */
  padding: 72px 20px;
}
.mobile-menu.open { display: flex; }
.mobile-menu > a { flex: 0 0 auto; }
.mobile-menu > a:first-of-type { margin-top: auto; }
.mobile-menu > a:last-of-type { margin-bottom: auto; }
.mobile-menu a { color: var(--cream); text-decoration: none; font-size: 1.5rem; font-weight: 600; transition: color 0.3s; }
.mobile-menu a:hover { color: var(--red); }
.mobile-close { position: absolute; top: 20px; right: 20px; background: none; border: none; color: white; font-size: 2rem; cursor: pointer; padding: 4px 12px; }

/* Hero (homepage) */
.hero {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 140px 24px 48px;
}
.hero-content { max-width: 900px; }
.hero-logo {
  max-width: 200px; height: auto; margin: 0 auto 32px; display: block;
  animation: fadeUp 0.8s ease both;
}
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 20px; border-radius: 50px;
  background: rgba(196, 30, 0, 0.08); border: 1px solid rgba(196, 30, 0, 0.25);
  color: var(--gold); font-size: 0.8125rem; font-weight: 600; letter-spacing: 2px;
  text-transform: uppercase; margin-bottom: 32px;
  animation: fadeUp 0.8s ease 0.1s both;
}
.hero h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(3rem, 8vw, 6rem); font-weight: 400; line-height: 1;
  letter-spacing: 4px; margin-bottom: 24px;
  animation: fadeUp 0.8s ease 0.2s both;
}
.hero h1 .red { color: var(--red); }
.hero h1 .gold { color: var(--gold); }
.hero p {
  font-size: clamp(1.0625rem, 2.2vw, 1.3125rem); color: var(--text-secondary);
  line-height: 1.7; max-width: 600px; margin: 0 auto 48px;
  animation: fadeUp 0.8s ease 0.3s both;
}
.hero-buttons {
  display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;
  animation: fadeUp 0.8s ease 0.4s both;
}
.btn-primary {
  background: var(--red); color: white; padding: 16px 40px; border-radius: 12px;
  text-decoration: none; font-size: 1rem; font-weight: 700; transition: all 0.3s;
  box-shadow: 0 0 30px var(--red-glow); border: none; cursor: pointer;
}
.btn-primary:hover { box-shadow: 0 0 50px var(--red-glow); transform: translateY(-2px); }
.btn-secondary {
  background: transparent; color: var(--cream); padding: 16px 40px; border-radius: 12px;
  text-decoration: none; font-size: 1rem; font-weight: 600; transition: all 0.3s;
  border: 1px solid var(--border);
}
.btn-secondary:hover { border-color: var(--border-hover); background: rgba(196, 30, 0, 0.04); }

/* Since '76 strip */
.hero-since {
  margin-top: 64px; animation: fadeUp 0.8s ease 0.5s both;
}
.since-items {
  display: flex; gap: 48px; justify-content: center; flex-wrap: wrap;
  list-style: none;
}
.since-item {
  text-align: center;
}
.since-number {
  font-family: 'Bebas Neue', sans-serif; font-size: 2.25rem; color: var(--red);
  letter-spacing: 1px;
}
.since-label {
  font-size: 0.75rem; color: var(--text-muted); letter-spacing: 2px;
  text-transform: uppercase; margin-top: 4px;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Page hero (compact, for non-home pages) */
.page-hero {
  position: relative; z-index: 1;
  padding: 140px 24px 32px;
  text-align: center;
}
.page-hero h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 400; line-height: 1;
  letter-spacing: 3px; margin-bottom: 20px;
}
.page-hero h1 .red { color: var(--red); }
.page-hero h1 .gold { color: var(--gold); }
.page-hero p {
  font-size: clamp(1rem, 1.8vw, 1.1875rem); color: var(--text-secondary);
  line-height: 1.6; max-width: 680px; margin: 0 auto;
}
.page-hero .divider {
  margin: 32px auto 0;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  .cursor-glow { display: none; }
}

/* Section styling */
.section { position: relative; z-index: 1; padding: 32px 24px 80px; }
.section-label {
  display: inline-block; font-size: 0.75rem; font-weight: 700; letter-spacing: 3px;
  text-transform: uppercase; color: var(--red-text); margin-bottom: 12px;
}
/* 2.4.6 — on /menu and /accessibility the page identifier lived in a
   .section-label paragraph while the <h1> carried only a slogan. Same look, but
   the topic is now inside the heading. */
.h1-label {
  display: block; font-family: 'Inter', sans-serif;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 3px;
  text-transform: uppercase; color: var(--red-text); margin-bottom: 12px;
  line-height: 1.2;
}
.section-title {
  font-family: 'Bebas Neue', sans-serif; font-size: clamp(2.25rem, 5vw, 3.5rem);
  letter-spacing: 2px; line-height: 1.1; margin-bottom: 20px;
}
.section-subtitle {
  font-size: 1.0625rem; color: var(--text-secondary); line-height: 1.7;
  max-width: 560px; margin-bottom: 48px;
}
.divider {
  width: 60px; height: 3px; background: var(--red); border-radius: 2px;
  margin-bottom: 48px;
}

/* Menu section */
.menu-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}
.menu-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px;
  padding: 32px; transition: all 0.4s;
}
.menu-card:hover { background: var(--bg-card-hover); border-color: var(--border-hover); transform: translateY(-4px); }
.menu-icon { font-size: 2.25rem; margin-bottom: 16px; }
.menu-photo { width: 100%; height: 160px; object-fit: cover; border-radius: 12px; margin-bottom: 16px; display: block; }
.menu-card h2, .menu-card h3 {
  font-family: 'Bebas Neue', sans-serif; font-size: 1.5rem; letter-spacing: 1px;
  margin-bottom: 8px; color: var(--cream);
}
.menu-card p { font-size: 0.875rem; color: var(--text-muted); line-height: 1.6; }
.menu-items { list-style: none; margin-top: 16px; }
.menu-items li {
  display: flex; justify-content: space-between; padding: 10px 0;
  border-bottom: 1px solid var(--border); font-size: 0.875rem; color: var(--text-secondary);
}
.menu-items li:last-child { border-bottom: none; }
.menu-items .price { color: var(--gold); font-weight: 600; }
.menu-note {
  margin-top: 48px; padding: 24px; border: 1px solid var(--border);
  border-radius: 12px; background: var(--bg-card); font-size: 0.875rem;
  color: var(--text-secondary); line-height: 1.6; text-align: center;
}

/* About section */
.about-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center;
}
.about-text p { color: var(--text-secondary); font-size: 1rem; line-height: 1.8; margin-bottom: 20px; }
.about-text p:last-child { margin-bottom: 0; }
.about-highlights {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 32px;
}
.highlight-box {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
  padding: 24px; text-align: center;
}
.highlight-box .num {
  font-family: 'Bebas Neue', sans-serif; font-size: 2rem; color: var(--red);
}
.highlight-box .label {
  font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase;
  letter-spacing: 1px; margin-top: 4px;
}
.about-image {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px;
  height: 420px; display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.about-image img { width: 100%; height: 100%; object-fit: cover; border-radius: 20px; }
.about-image-placeholder {
  text-align: center; color: var(--text-muted);
}
.about-image-placeholder .icon { margin-bottom: 12px; color: var(--red); }
.about-image-placeholder p { font-size: 0.875rem; }

/* Locations section */
.locations-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px;
}
.location-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px;
  padding: 32px; transition: all 0.4s;
}
.location-card:hover { background: var(--bg-card-hover); border-color: var(--border-hover); }
.location-card h2, .location-card h3 {
  font-family: 'Bebas Neue', sans-serif; font-size: 1.375rem; color: var(--cream);
  letter-spacing: 1px; margin-bottom: 16px;
}
.location-detail {
  display: flex; gap: 10px; margin-bottom: 12px; font-size: 0.875rem;
  color: var(--text-secondary); line-height: 1.5;
}
.location-detail .icon { color: var(--red); flex-shrink: 0; }
.location-link {
  display: inline-block; margin-top: 16px; color: var(--gold); font-size: 0.875rem;
  font-weight: 600; text-decoration: none; transition: color 0.3s;
}
.location-link:hover { color: var(--cream); }

.location-reviews {
  display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap;
}
.location-review-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 8px;
  font-size: 0.8125rem; font-weight: 600; text-decoration: none;
  transition: all 0.2s;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  background: var(--bg-card);
}
.location-review-btn:hover {
  border-color: var(--border-hover);
  color: var(--cream);
  background: var(--bg-card-hover);
}
.location-review-btn.google::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #4285F4; }
.location-review-btn.yelp::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #D32323; }

/* Order Now page — platform buttons */
.order-platforms {
  display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap;
}
.platform-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 0.875rem; font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.5px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-primary);
  transition: all 0.2s;
}
.platform-btn:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-hover);
  transform: translateY(-1px);
}
.platform-btn::before {
  content: ""; display: inline-block;
  width: 8px; height: 8px; border-radius: 50%;
}
.platform-btn.ubereats::before { background: #06C167; }
.platform-btn.doordash::before { background: #FF3008; }
.platform-btn.grubhub::before { background: #F63440; }
.platform-btn.direct::before { background: var(--gold); }
.platform-btn.direct {
  background: var(--red);
  color: white;
  border-color: var(--red);
  box-shadow: 0 0 16px var(--red-glow);
}
.platform-btn.direct:hover {
  background: var(--red-dark);
  border-color: var(--red-dark);
}

/* Footer social icons */
.footer-social {
  list-style: none;
  display: flex; justify-content: center; gap: 16px;
  margin: 16px 0 4px;
  padding: 0;
}
.footer-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text-muted);
  transition: all 0.2s;
}
.footer-social a:hover {
  color: var(--cream);
  border-color: var(--red);
  background: rgba(196, 30, 0, 0.08);
}
.footer-social svg { width: 18px; height: 18px; }

/* Contact section */
.contact-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start;
}
.contact-form { display: flex; flex-direction: column; gap: 20px; }
.form-group label {
  display: block; font-size: 0.8125rem; font-weight: 600; color: var(--text-secondary);
  letter-spacing: 1px; text-transform: uppercase; margin-bottom: 8px;
}
.form-group input, .form-group textarea, .form-group select {
  width: 100%; padding: 14px 18px; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 10px; color: var(--text-primary); font-size: 0.9375rem;
  font-family: 'Inter', sans-serif; transition: border-color 0.3s;
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
  border-color: var(--red); outline: 2px solid var(--red); outline-offset: 2px;
}
.form-group textarea { resize: vertical; min-height: 120px; }
.form-group select option { background: var(--bg-primary); }
.contact-info h2, .contact-info h3, .contact-form h2 {
  font-family: 'Bebas Neue', sans-serif; font-size: 1.75rem; color: var(--cream);
  letter-spacing: 1px; margin-bottom: 24px;
}
.contact-form h2 { margin-bottom: 0; }
.contact-info-item {
  display: flex; gap: 14px; margin-bottom: 24px; font-size: 0.9375rem;
  color: var(--text-secondary); line-height: 1.6;
}
.contact-info-item .icon {
  width: 44px; height: 44px; background: rgba(196, 30, 0, 0.08);
  border: 1px solid rgba(196, 30, 0, 0.2); border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.125rem; flex-shrink: 0;
}
.contact-info-item strong { color: var(--cream); display: block; margin-bottom: 2px; }

/* Home — teaser cards linking to subpages */
.teaser-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
}
.teaser-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px;
  padding: 40px 32px; transition: all 0.4s; text-decoration: none;
  display: block; color: inherit;
}
.teaser-card:hover {
  background: var(--bg-card-hover); border-color: var(--border-hover);
  transform: translateY(-4px);
}
.teaser-card .icon { height: 150px; margin-bottom: 20px; display: flex; align-items: center; justify-content: center; color: var(--red); }
.teaser-card .icon .ico { width: 80px; height: 80px; stroke-width: 1.4; }
/* Inline line-icons (replace raw emoji sitewide) */
.ico { display: inline-block; vertical-align: middle; }
.location-detail .icon .ico { width: 19px; height: 19px; }
.contact-info-item .icon .ico { width: 20px; height: 20px; }
.about-image-placeholder .icon .ico { width: 60px; height: 60px; stroke-width: 1.5; }
.teaser-card .teaser-photo { width: 100%; height: 180px; object-fit: cover; border-radius: 12px; margin-bottom: 20px; display: block; }
.teaser-card .teaser-logo { width: 100%; height: 180px; object-fit: contain; margin-bottom: 20px; display: block; }
.teaser-card h3 {
  font-family: 'Bebas Neue', sans-serif; font-size: 1.75rem; letter-spacing: 1.5px;
  color: var(--cream); margin-bottom: 12px;
}
.teaser-card p { color: var(--text-secondary); font-size: 0.9375rem; line-height: 1.6; margin-bottom: 16px; }
.teaser-card .arrow { color: var(--gold); font-size: 0.875rem; font-weight: 600; }

/* Legal / Accessibility pages — long-form prose */
.prose {
  max-width: 760px; margin: 0 auto; color: var(--text-secondary);
  font-size: 1rem; line-height: 1.75;
}
.prose h2 {
  font-family: 'Bebas Neue', sans-serif; color: var(--cream);
  font-size: 1.75rem; letter-spacing: 1.5px; margin-top: 48px; margin-bottom: 16px;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
  font-family: 'Inter', sans-serif; color: var(--cream); font-weight: 600;
  font-size: 1.125rem; margin-top: 32px; margin-bottom: 12px;
}
.prose p { margin-bottom: 16px; }
.prose ul, .prose ol { margin: 0 0 16px 24px; }
.prose li { margin-bottom: 8px; }
.prose a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--cream); }
.prose strong { color: var(--cream); }
.prose .updated { font-size: 0.875rem; color: var(--text-muted); margin-bottom: 32px; }

/* Footer */
footer {
  position: relative; z-index: 1;
  border-top: 1px solid var(--border); padding: 48px 24px;
  text-align: center;
}
.footer-brand {
  display: flex; align-items: center; gap: 10px; justify-content: center; margin-bottom: 20px;
}
.footer-brand img { height: 36px; }
.footer-brand span {
  font-family: 'Bebas Neue', sans-serif; font-size: 1.25rem; color: var(--cream);
  letter-spacing: 2px;
}
.footer-links { display: flex; gap: 24px; justify-content: center; margin-bottom: 12px; list-style: none; flex-wrap: wrap; }
.footer-links a { color: var(--text-muted); text-decoration: none; font-size: 0.875rem; transition: color 0.3s; }
.footer-links a:hover { color: var(--cream); }
.footer-copy { font-size: 0.8125rem; color: var(--text-muted); }
.footer-credit { margin-top: 12px; font-size: 0.75rem; color: var(--text-muted); }
.footer-credit a { color: inherit; text-decoration: underline; }

/* Responsive */
@media (max-width: 768px) {
  header { padding: 16px 20px; }
  .nav-links { display: none; }
  .nav-cta.desktop-only { display: none; }
  .mobile-toggle { display: block; }
  .hero { padding: 100px 20px 60px; }
  .hero-logo { max-width: 150px; }
  .hero-buttons { flex-direction: column; align-items: center; }
  .btn-primary, .btn-secondary { width: 100%; max-width: 300px; text-align: center; }
  .since-items { gap: 32px; }
  .section { padding: 24px 20px 60px; }
  .page-hero { padding: 110px 20px 24px; }
  .about-grid { grid-template-columns: 1fr; gap: 40px; }
  .about-image { height: 280px; }
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .locations-grid { grid-template-columns: 1fr; }
  .teaser-grid { grid-template-columns: 1fr; }
  /* .menu-grid was left out of this collapse, so its 280px minmax track floor
     forced 324px of content into a 320px viewport. */
  .menu-grid { grid-template-columns: 1fr; }
}

/* WCAG 2.2 AA fixes — 2026-07-03 audit */
html { scroll-padding-top: 96px; }
.mobile-menu { z-index: 200; }
.nav-links a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; }

/* ---- ADA remediation (lawsuit findings, Aug 7 2026) ---- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
/* The status region stays rendered — and therefore stays in the accessibility tree —
   even while empty, so a message injected into it is announced. It was display:none
   when empty, which meant the live region did not exist until the moment it was
   written to, and nothing was ever spoken. Collapsing the box instead of removing it
   keeps the region live and looks identical. */
.form-status{display:block;border:2px solid currentColor;border-radius:8px;padding:12px 16px;
  margin-bottom:14px;font-size:.9rem;font-weight:600}
.form-status:empty{border:0;padding:0;margin:0;font-size:0}
.field-hint{display:block;font-size:.78rem;font-weight:400;margin-top:2px}
.field-error{display:block;width:100%;flex-basis:100%;font-size:.8rem;font-weight:600;margin-top:4px}
[aria-invalid="true"]{outline:2px solid currentColor;outline-offset:1px}