/* ==========================================================================
   Oggi Ristorante Italiano — shared stylesheet
   Implemented from the "Oggi website animation enhancements" Claude Design
   project (Landing / Menu / Order / Contact / Careers comps).
   Ivory paper + deep brick red + gold, airy light typography, pill buttons,
   staggered reveals and gentle motion everywhere.
   Display: Cormorant Garamond (300/400) · Body: Jost (300/400/500)
   ========================================================================== */

/* ---- Design tokens (from the comps) ------------------------------------- */
:root {
  --ivory:      #FAF6EF;   /* page background */
  --ivory-card: #FFFDF9;   /* raised cards (cart, forms) */
  --tint:       #F1E9DC;   /* tinted panels (hours card, chips) */
  --espresso:   #1C1614;   /* ink */
  --dark:       #14100E;   /* dark showcase sections */
  --footer:     #0E0B0A;   /* footer black */
  --red:        #93200A;   /* brand brick red */
  --red-dark:   #7B1A08;   /* hover */
  --gold:       #E8B96A;   /* gold accents on dark */
  --star:       #C6A15B;   /* review stars */
  --green:      #2E7D53;   /* live "ready" dot */
  --muted:      #5B4F49;
  --faint:      #8A7C74;
  --line:       rgba(28, 22, 20, .16);
  --hairline:   rgba(28, 22, 20, .09);

  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Hanken Grotesk', system-ui, -apple-system, sans-serif;

  --ease: cubic-bezier(.2, .7, .2, 1);
  --maxw: 1280px;
  --nav-h: 73px;
}

/* ---- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--ivory);
  color: var(--espresso);
  font-family: var(--font-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  line-height: 1.6;
}

::selection { background: var(--red); color: var(--ivory); }

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
input, select, textarea, button { font-family: var(--font-body); }

/* ---- Motion vocabulary (from the comps) --------------------------------- */
@keyframes om-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes om-bob { 0%,100% { transform: translateY(0); opacity: .55; } 50% { transform: translateY(9px); opacity: 1; } }
@keyframes om-kenburns { from { transform: scale(1.04); } to { transform: scale(1.16); } }
@keyframes om-twinkle { 0% { opacity: 0; transform: translateY(6px) scale(.7); } 60% { transform: translateY(0) scale(1.15); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes om-fadeup { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes om-shimmer { from { transform: translateX(-160%) skewX(-18deg); } to { transform: translateX(420%) skewX(-18deg); } }
@keyframes om-pulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: .55; } }
@keyframes om-pop { 0% { opacity: 0; transform: scale(.86) translateY(10px); } 100% { opacity: 1; transform: none; } }
@keyframes om-linein { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: none; } }
@keyframes om-hero-in { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- Paper grain (kept, gentler) ---------------------------------------- */
.grain {
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: .035; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22140%22 height=%22140%22%3E%3Cfilter id=%22n%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.85%22 numOctaves=%223%22 stitchTiles=%22stitch%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23n)%22/%3E%3C/svg%3E");
}

/* ---- Shared layout helpers ---------------------------------------------- */
.container { max-width: var(--maxw); margin: 0 auto; padding-left: 44px; padding-right: 44px; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 12px; font-weight: 400; letter-spacing: .26em; text-transform: uppercase;
  color: var(--red);
}
.eyebrow::before,
.eyebrow.eyebrow--center::after { content: ""; height: 1px; width: 40px; background: var(--red); opacity: .5; }
.eyebrow:not(.eyebrow--center)::after { content: none; }
.eyebrow--gold { color: var(--gold); }
.eyebrow--gold::before, .eyebrow--gold.eyebrow--center::after { background: var(--gold); }

.kicker {
  font-size: 12px; font-weight: 400; letter-spacing: .26em; text-transform: uppercase;
  color: var(--red);
}
.kicker--gold { color: var(--gold); }

.section-num {
  font-family: var(--font-display); font-style: italic;
  font-size: 20px; color: var(--red); line-height: 1;
}

/* ---- Buttons — pills with lift + shimmer -------------------------------- */
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 13px; font-weight: 400; letter-spacing: .16em; text-transform: uppercase;
  padding: 18px 34px; border-radius: 999px; border: 1px solid transparent;
  cursor: pointer;
  transition: transform .4s var(--ease), background-color .4s ease, border-color .4s ease, color .4s ease;
}
.btn:hover { transform: translateY(-3px); }
.btn--red { background: var(--red); color: var(--ivory); }
.btn--red:hover { background: var(--red-dark); }
/* shimmer sweep on the primary CTA */
.btn--red::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40px;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.35), rgba(255,255,255,0));
  animation: om-shimmer 4.6s ease-in-out 2.2s infinite;
}
.btn--ivory  { background: var(--ivory); color: var(--espresso); }
.btn--ivory:hover { background: #fff; }
.btn--dark   { background: var(--espresso); color: var(--ivory); }
.btn--dark:hover { background: var(--red); }
.btn--outline-light { color: var(--ivory); border-color: rgba(250,246,239,.45); }
.btn--outline-light:hover { background: rgba(250,246,239,.12); border-color: rgba(250,246,239,.8); }
.btn--outline-dark  { color: var(--espresso); border-color: rgba(28,22,20,.28); }
.btn--outline-dark:hover  { background: rgba(28,22,20,.06); }
.btn--sm { font-size: 12px; padding: 15px 30px; }
.btn--nav { font-size: 12px; padding: 12px 24px; letter-spacing: .18em; }
.btn--block { width: 100%; padding: 18px; }

/* Text link with underline accent */
.link-underline {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 400; letter-spacing: .16em; text-transform: uppercase;
  color: var(--red);
  border-bottom: 1px solid rgba(147,32,10,.35);
  padding-bottom: 6px;
  transition: letter-spacing .4s ease, border-color .4s ease;
}
.link-underline:hover { letter-spacing: .22em; border-color: var(--red); }

/* ==========================================================================
   NAVIGATION — morphs on scroll: padding shrinks, glass solidifies
   ========================================================================== */
.nav {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
  padding: 22px 44px;
  background: rgba(250, 246, 239, .94);
  backdrop-filter: saturate(1.2) blur(14px);
  -webkit-backdrop-filter: saturate(1.2) blur(14px);
  transition: padding .45s var(--ease), background-color .45s ease, box-shadow .45s ease;
}
.nav.is-scrolled { padding-top: 13px; padding-bottom: 13px; box-shadow: 0 10px 30px rgba(20,16,14,.10); }

/* Home page: nav floats transparent over the hero, solidifies on scroll */
.nav--overlay {
  position: fixed; left: 0; right: 0; top: 0;
  padding: 26px 44px;
  background: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.nav--overlay.is-scrolled {
  padding-top: 14px; padding-bottom: 14px;
  background: rgba(250, 246, 239, .94);
  backdrop-filter: saturate(1.2) blur(14px);
  -webkit-backdrop-filter: saturate(1.2) blur(14px);
  box-shadow: 0 10px 30px rgba(20,16,14,.10);
}

.nav__logo { display: flex; align-items: center; line-height: 0; }
.nav__logo img { height: 50px; width: auto; transition: height .45s var(--ease), filter .45s ease; }
.nav.is-scrolled .nav__logo img { height: 42px; }
.nav--overlay:not(.is-scrolled) .nav__logo img { height: 54px; filter: drop-shadow(0 2px 10px rgba(0,0,0,.45)); }

.nav__links { display: flex; align-items: center; gap: 30px; }
.nav__link {
  font-size: 13px; font-weight: 400; letter-spacing: .18em; text-transform: uppercase;
  color: var(--espresso);
  transition: color .35s ease, opacity .35s ease;
}
.nav__link:hover { color: var(--red); }
.nav__link.is-active { color: var(--red); }

/* Overlay (home): links read cream over the hero until the user scrolls. */
.nav--overlay:not(.is-scrolled) .nav__link { color: var(--ivory); }
.nav--overlay:not(.is-scrolled) .nav__link:hover { color: var(--ivory); opacity: .78; }

/* Hamburger toggle (mobile) */
.nav__toggle {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 42px; height: 42px; background: none; border: none; cursor: pointer; padding: 9px;
}
.nav__toggle span {
  display: block; height: 2px; width: 100%;
  background: var(--espresso); border-radius: 2px;
  transition: transform .3s ease, opacity .3s ease, background .3s ease;
}
.nav--overlay:not(.is-scrolled) .nav__toggle span { background: var(--ivory); }
.nav.is-open .nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.is-open .nav__toggle span:nth-child(2) { opacity: 0; }
.nav.is-open .nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav__toggle { display: flex; }
  /* The bigger logo would crowd the hamburger once the links collapse. */
  .nav__logo img, .nav.is-scrolled .nav__logo img, .nav--overlay:not(.is-scrolled) .nav__logo img { height: 44px; }
  .nav__links {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--ivory);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 40px rgba(20, 16, 14, .12);
    padding: 8px 0 18px;
    transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
  }
  .nav.is-open .nav__links { opacity: 1; visibility: visible; transform: translateY(0); }
  .nav__link { color: var(--espresso) !important; padding: 14px 44px; }
  .nav__links .btn { margin: 12px 44px 0; }
}

/* ==========================================================================
   FOOTER — near-black, gold hovers
   ========================================================================== */
.footer { background: var(--footer); color: rgba(250,246,239,.72); }

/* Simple footer (sub-pages) */
.footer--simple { padding: 40px 44px 26px; }
.footer--simple .footer__row {
  max-width: 1180px; margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 32px;
  align-items: center; justify-content: space-between;
}
.footer__logo img { height: 40px; width: auto; filter: brightness(0) invert(1); opacity: .92; }
.footer__nav { display: flex; gap: 26px; flex-wrap: wrap; font-size: 13px; font-weight: 400; color: rgba(250,246,239,.8); }
.footer__nav a { transition: color .3s ease; }
.footer__nav a:hover { color: var(--gold); }
.footer__meta { font-size: 12px; color: rgba(250,246,239,.5); }
.footer__legal {
  max-width: 1180px; margin: 22px auto 0;
  padding-top: 16px; border-top: 1px solid rgba(250,246,239,.12);
  font-size: 12px; color: rgba(250,246,239,.5);
}

/* Rich footer (home) */
.footer--rich { padding: 84px 44px 40px; }
.footer--rich .footer__grid {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: 1.4fr .6fr .8fr; gap: 56px; align-items: start;
}
.footer--rich .footer__logo img { height: 44px; }
.footer__about { margin-top: 18px; font-size: 14px; line-height: 1.8; font-weight: 400; color: rgba(250,246,239,.72); max-width: 44ch; }
.footer__social { margin-top: 22px; display: flex; gap: 10px; }
.footer__social a {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(250,246,239,.24);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; color: var(--ivory);
  transition: background-color .4s ease, transform .4s var(--ease);
}
.footer__social a:hover { background: var(--red); transform: translateY(-3px); }
.footer__col-title {
  font-size: 11px; font-weight: 400; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(250,246,239,.45); margin-bottom: 16px;
}
.footer__col-links { display: flex; flex-direction: column; gap: 12px; font-size: 14px; font-weight: 400; color: rgba(250,246,239,.8); }
.footer__col-links a { transition: color .3s ease; line-height: 1.6; }
.footer__col-links a:hover { color: var(--gold); }
.footer--rich .footer__legal {
  max-width: var(--maxw); margin: 56px auto 0;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
}
.footer--rich .footer__legal a:hover { color: var(--gold); }

@media (max-width: 760px) {
  .footer--rich .footer__grid { grid-template-columns: 1fr; gap: 36px; }
}

/* ==========================================================================
   HOME — HERO (staggered entrance, ken-burns video)
   ========================================================================== */
.hero {
  position: relative; height: 100vh; min-height: 680px; width: 100%;
  display: flex; align-items: flex-end; overflow: hidden; background: var(--dark);
}
.hero__media {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0; opacity: .82;
  animation: om-kenburns 26s ease-in-out infinite alternate;
}
/* Poster still: what the hero falls back to when the video can't play. */
.hero--still { background-size: cover; background-position: center; background-repeat: no-repeat; }
.hero--still::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: rgba(20,16,14,.18);
}
.hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(20,16,14,.62) 0%, rgba(20,16,14,.18) 38%, rgba(20,16,14,.86) 100%);
}
.hero__inner {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--maxw);
  margin: 0 auto; padding: 150px 44px 92px;
  color: var(--ivory);
}
/* staggered entrance — pure CSS, no JS needed */
.hero__kicker, .hero__title, .hero__lead, .hero__cta { animation: om-hero-in .85s var(--ease) both; }
.hero__kicker { animation-delay: .12s; }
.hero__title  { animation-delay: .26s; }
.hero__lead   { animation-delay: .52s; }
.hero__cta    { animation-delay: .72s; }

.hero__kicker { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.hero__kicker span:first-child { height: 1px; width: 46px; background: rgba(250,246,239,.6); }
.hero__kicker-text {
  font-size: 12px; font-weight: 400; letter-spacing: .28em;
  text-transform: uppercase; color: rgba(250,246,239,.82);
}
.hero__title {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(54px, 7.5vw, 108px); line-height: .96; letter-spacing: -.015em;
  max-width: 15ch; text-wrap: balance;
}
.hero__title em { font-style: italic; font-weight: 400; color: var(--gold); }
.hero__lead { margin-top: 26px; max-width: 58ch; font-size: 17px; line-height: 1.7; font-weight: 400; color: rgba(250,246,239,.86); }
.hero__cta { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 14px; }

.scrollcue {
  position: absolute; right: 44px; left: auto; bottom: 92px; transform: none;
  z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 12px;
  pointer-events: none;
}
.scrollcue span:first-child {
  font-size: 11px; font-weight: 400; letter-spacing: .3em;
  text-transform: uppercase; color: rgba(250,246,239,.7);
}
.scrollcue span:last-child {
  display: block; width: 1px; height: 54px;
  background: linear-gradient(180deg, rgba(250,246,239,.8), rgba(250,246,239,0));
  animation: om-bob 2.4s ease-in-out infinite;
}
@media (max-width: 760px) { .scrollcue { display: none; } }

/* ---- Marquee — red band, italic serif ----------------------------------- */
.marquee {
  background: var(--red); color: var(--ivory);
  padding: 12px 0; overflow: hidden; white-space: nowrap;
}
.marquee__track {
  display: inline-flex; align-items: center;
  animation: om-marquee 42s linear infinite; will-change: transform;
}
.marquee__item { display: inline-flex; align-items: center; gap: 26px; padding: 0 13px; }
.marquee__item span:first-child { font-family: var(--font-display); font-style: italic; font-size: 22px; color: var(--ivory); }
.marquee__diamond { color: var(--ivory); opacity: .5; font-size: 9px; transform: none; }

/* ==========================================================================
   HOME — STORY (parallax figure, round Est. badge)
   ========================================================================== */
.story {
  max-width: var(--maxw); margin: 0 auto;
  padding: 130px 44px 110px;
  display: grid; grid-template-columns: .85fr 1fr; gap: 84px; align-items: center;
}
.story__figure { position: relative; }
.story__figure-img { overflow: hidden; border-radius: 4px; aspect-ratio: 4/5; }
.story__figure-img img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.story__badge {
  position: absolute; bottom: -34px; right: -34px;
  width: 168px; height: 168px; border-radius: 50%;
  background: var(--red); color: var(--ivory);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 4px; padding: 0;
  box-shadow: 0 22px 44px rgba(20,16,14,.22);
}
.story__badge-num { font-family: var(--font-display); font-size: 34px; font-style: italic; font-weight: 400; line-height: 1; }
.story__badge-sub { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; line-height: 1.5; padding: 0 22px; opacity: .85; margin-top: 2px; color: var(--ivory); }
.story__label { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.story__label .line { height: 1px; width: 34px; background: var(--red); opacity: .5; }

.section-title {
  font-family: var(--font-display); font-weight: 300;
  line-height: 1.06; letter-spacing: -.01em; text-wrap: pretty;
}
.section-title--lg { font-size: clamp(40px, 4.6vw, 62px); }
.section-title--md { font-size: clamp(38px, 4.4vw, 58px); }
.lead { font-size: 16px; line-height: 1.85; font-weight: 400; color: var(--muted); max-width: 60ch; }
.lead + .lead { margin-top: 16px; }
.story__body .lead { margin-top: 22px; }

/* ---- Feature blocks — image + text stacks, hover zoom ------------------- */
.features {
  max-width: var(--maxw); margin: 0 auto;
  padding: 0 44px 130px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 44px;
}
.feature {
  position: relative; border-radius: 0; overflow: visible;
  aspect-ratio: auto; display: flex; flex-direction: column; gap: 20px;
  transition: transform .5s var(--ease);
}
.feature:hover { transform: translateY(-8px); }
.feature img {
  position: relative; inset: auto; width: 100%; height: 420px;
  object-fit: cover; border-radius: 4px;
  transition: transform 1.1s var(--ease);
}
.feature::after { content: none; }
/* clip the zooming image */
.feature > img { clip-path: inset(0 round 4px); }
.feature:hover img { transform: scale(1.04); }
.feature__text { position: relative; z-index: 2; padding: 0; color: var(--espresso); }
.feature__text h3 { font-family: var(--font-display); font-weight: 400; font-size: 32px; line-height: 1.15; }
.feature__text p { margin-top: 12px; font-size: 15px; line-height: 1.8; font-weight: 400; color: var(--muted); max-width: 52ch; }

/* ---- Gallery — dark showcase section, 3-up grid ------------------------- */
.gallery-section {
  max-width: none; margin: 0; padding: 110px 44px 120px;
  background: var(--dark); color: var(--ivory);
}
.gallery-section .section-head { max-width: 720px; }
.section-head { text-align: center; max-width: 680px; margin: 0 auto 66px; }
.section-head .eyebrow { margin-bottom: 18px; }
.section-head .lead { margin: 18px auto 0; }
.gallery-section .eyebrow { color: var(--gold); }
.gallery-section .eyebrow::before, .gallery-section .eyebrow.eyebrow--center::after { background: var(--gold); }
.gallery-section .lead { color: rgba(250,246,239,.72); }
.gallery {
  max-width: var(--maxw); margin: 0 auto;
  columns: auto; column-gap: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
.gallery__item {
  break-inside: avoid; margin-bottom: 0;
  overflow: hidden; border-radius: 3px; position: relative;
}
.gallery__item img { width: 100%; height: 340px; object-fit: cover; transition: transform 1.1s var(--ease); }
.gallery__item:hover img { transform: scale(1.07); }
.gallery-section .btn--outline-dark { color: var(--ivory); border-color: rgba(250,246,239,.45); }
.gallery-section .btn--outline-dark:hover { background: var(--red); border-color: var(--red); }
.center { text-align: center; }
.mt-44 { margin-top: 54px; }

/* ---- Order band — parallax photo, centered ------------------------------ */
.band {
  position: relative; overflow: hidden; min-height: 560px;
  padding: 110px 44px; display: flex; align-items: center; justify-content: center; text-align: center;
}
.band img {
  position: absolute; inset: -14% 0; width: 100%; height: 128%;
  object-fit: cover; animation: none; will-change: transform;
}
.band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,16,14,.72), rgba(20,16,14,.58)); }
.band__inner { position: relative; z-index: 2; color: var(--ivory); max-width: 700px; }
.band__inner .kicker, .band__inner .eyebrow { color: var(--gold); }
.band__inner h2 { margin-top: 20px; font-family: var(--font-display); font-weight: 300; font-size: clamp(40px,5vw,64px); line-height: 1.06; text-wrap: pretty; }
.band__inner p { margin: 18px auto 0; font-size: 16px; line-height: 1.8; font-weight: 400; color: rgba(250,246,239,.8); max-width: 60ch; }
.band__inner .btn { margin-top: 32px; }
.band__actions { margin-top: 32px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.band__actions .btn { margin-top: 0; }

/* ---- Experiences — unboxed cards, lift on hover ------------------------- */
.experiences { max-width: var(--maxw); margin: 0 auto; padding: 130px 44px; }
.experiences__head { margin-bottom: 64px; max-width: 720px; }
.experiences__head .story__label { margin-bottom: 18px; }
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.card {
  background: transparent; border-radius: 0; overflow: visible;
  display: flex; flex-direction: column; gap: 16px;
  box-shadow: none; border: none;
  transition: transform .5s var(--ease);
}
.card:hover { transform: translateY(-8px); box-shadow: none; }
.card__media { overflow: hidden; aspect-ratio: 4/3; border-radius: 4px; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.card:hover .card__media img { transform: scale(1.07); }
.card__body { padding: 4px 0 0; display: flex; flex-direction: column; flex: 1; gap: 16px; }
.card__body h3 { font-family: var(--font-display); font-weight: 400; font-size: 30px; line-height: 1.15; }
.card__body p { margin-top: 0; font-size: 15px; line-height: 1.8; font-weight: 400; color: var(--muted); flex: 1; }
.card__cta {
  margin-top: 0; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 12px; font-weight: 400; letter-spacing: .16em; text-transform: uppercase;
  color: var(--red);
  border-bottom: 1px solid rgba(147,32,10,.35); padding-bottom: 5px;
  transition: letter-spacing .4s ease;
}
.card__cta:hover { letter-spacing: .22em; gap: 9px; }

/* ---- Reviews — warm tinted band, ivory cards, twinkling stars ----------- */
.reviews { background: var(--tint); color: var(--espresso); padding: 110px 44px; }
.reviews__inner { max-width: var(--maxw); margin: 0 auto; }
.reviews__head { text-align: center; margin-bottom: 56px; }
.reviews__stars { font-size: 18px; letter-spacing: .1em; color: var(--star); display: flex; justify-content: center; gap: 6px; }
.reviews__head.is-visible .reviews__stars span,
.no-js .reviews__stars span { animation: om-twinkle .5s ease both; }
.reviews__stars span:nth-child(1) { animation-delay: .05s; }
.reviews__stars span:nth-child(2) { animation-delay: .15s; }
.reviews__stars span:nth-child(3) { animation-delay: .25s; }
.reviews__stars span:nth-child(4) { animation-delay: .35s; }
.reviews__stars span:nth-child(5) { animation-delay: .45s; }
.reviews__head h2 { margin-top: 14px; font-family: var(--font-display); font-weight: 300; font-size: clamp(38px,4.4vw,58px); line-height: 1.08; }
.review {
  background: var(--ivory); border: 1px solid rgba(28,22,20,.08);
  border-radius: 4px; padding: 36px 32px; display: flex; flex-direction: column; gap: 18px;
  transition: transform .5s var(--ease), box-shadow .5s ease;
}
.review:hover { transform: translateY(-8px); box-shadow: 0 24px 48px rgba(20,16,14,.1); }
.review__stars { font-size: 15px; letter-spacing: .12em; color: var(--star); margin-bottom: 0; }
.review__text { font-family: var(--font-display); font-style: normal; font-size: 23px; line-height: 1.45; font-weight: 400; color: #241C19; flex: 1; }
.review__author { margin-top: auto; display: flex; align-items: center; gap: 12px; }
.review__author img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; background: var(--tint); }
.review__name { font-weight: 500; font-size: 14px; }
.review__role { font-size: 11px; color: var(--faint); letter-spacing: .14em; text-transform: uppercase; }

/* ---- FAQ — split layout: sticky title left, items right ----------------- */
.faq-section { max-width: 1180px; margin: 0 auto; padding: 120px 44px; }
.faq-section .section-head { margin-bottom: 0; text-align: left; max-width: none; }
.faq-section .section-head .eyebrow { margin-bottom: 14px; }
.faq__split { display: grid; grid-template-columns: .7fr 1fr; gap: 72px; align-items: start; }
.faq__split .section-head { position: sticky; top: 120px; }
.faq__list { display: flex; flex-direction: column; }
.faq__item { border-top: 1px solid rgba(28,22,20,.12); border-bottom: none; }
.faq__item:last-child { border-bottom: 1px solid rgba(28,22,20,.12); }
.faq__q {
  list-style: none;
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 26px 0; cursor: pointer;
  font-family: var(--font-body); font-size: 18px; font-weight: 400; color: var(--espresso); line-height: 1.4;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "+"; flex: none; font-family: var(--font-body); font-size: 22px; font-weight: 400; color: var(--red);
  transition: transform .4s var(--ease); line-height: 1;
}
.faq__item[open] .faq__q::after { transform: rotate(45deg); }
.faq__a {
  padding: 0 0 26px; font-size: 15px; line-height: 1.85; font-weight: 400; color: var(--muted); max-width: 62ch;
  animation: om-fadeup .38s var(--ease) both;
}

/* ---- Visit / location --------------------------------------------------- */
.visit {
  max-width: var(--maxw); margin: 0 auto;
  padding: 120px 44px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start;
}
.visit__col { display: flex; flex-direction: column; justify-content: flex-start; gap: 26px; }
.visit__title { font-family: var(--font-display); font-weight: 300; font-size: clamp(38px,4.4vw,58px); line-height: 1.06; letter-spacing: -.01em; max-width: 14ch; }
.visit__details { margin-top: 0; display: flex; flex-direction: column; gap: 18px; }
.field-label { font-size: 11px; font-weight: 400; letter-spacing: .22em; text-transform: uppercase; color: var(--faint); margin-bottom: 5px; }
.visit__address { font-size: 17px; line-height: 1.5; font-weight: 400; color: var(--espresso); border-bottom: none; transition: color .35s ease; }
.visit__address:hover { color: var(--red); }
.visit__contacts { display: flex; gap: 48px; flex-wrap: wrap; }
.visit__contacts a { font-size: 17px; font-weight: 400; color: var(--espresso); transition: color .35s ease; }
.visit__contacts a:hover { color: var(--red); }
.visit__map {
  display: block; border-radius: 4px; overflow: hidden;
  min-height: 380px; position: relative;
  border: 1px solid rgba(28,22,20,.12); box-shadow: none;
}
.visit__map img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.35) contrast(1.02); transition: filter .6s ease; }
.visit__map:hover img { filter: grayscale(0) contrast(1); }
.visit__map-pin {
  position: absolute; left: 24px; bottom: 24px;
  background: var(--ivory); padding: 14px 20px; border-radius: 999px;
  font-size: 12px; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--espresso);
  display: flex; align-items: center; gap: 8px;
}
.visit__cta { display: flex; gap: 12px; margin-top: 4px; flex-wrap: wrap; }

/* ---- Hours — tinted card, today's row filled red ------------------------ */
.hours {
  display: flex; flex-direction: column; max-width: 420px;
  border: 1px solid rgba(28,22,20,.12); background: var(--tint);
  border-radius: 4px; padding: 26px 28px;
}
.hours__row {
  display: flex; justify-content: space-between; gap: 18px;
  padding: 11px 10px; margin: 0 -10px; border-radius: 3px; border-bottom: none;
  color: var(--espresso); font-weight: 400; font-size: 15px;
  transition: background-color .4s ease, color .4s ease;
}
.hours__row:hover:not(.is-today) { background: rgba(28,22,20,.05); }
.hours__row span { font-size: 15px; }
.hours__row span:last-child, .hours__row .time { color: var(--muted); font-variant-numeric: tabular-nums; }
.hours__row.is-today { background: var(--red); color: var(--ivory); font-weight: 400; }
.hours__row.is-today span, .hours__row.is-today .time { color: var(--ivory); }

/* ==========================================================================
   MENU PAGE — serif heads with Nº numerals, dish list rows
   ========================================================================== */
.page-head { max-width: 1240px; margin: 0 auto; padding: 84px 44px 30px; text-align: center; }
.page-head .eyebrow { margin-bottom: 20px; }
.page-head h1 {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(52px,7vw,88px); line-height: 1; letter-spacing: -.015em;
}
.page-head h1 em { font-style: italic; font-weight: 400; }
.page-head p { margin: 22px auto 0; max-width: 60ch; font-size: 16px; line-height: 1.8; font-weight: 400; color: var(--muted); }

/* Lunch / dinner pill toggle */
.menu-toggle {
  margin: 26px auto 0;
  display: none; position: relative;
  background: var(--tint);
  border: 1px solid rgba(28,22,20,.14);
  border-radius: 999px; padding: 5px; gap: 4px;
}
.menu-toggle.is-visible { display: inline-flex; }
/* Sized to the label, not to a fixed 106px: a menu the owner names herself
   ("Beautiful Features") has to sit on one line inside the capsule instead of
   wrapping out of it, while Lunch and Dinner keep the width they had. */
.menu-toggle button {
  position: relative; z-index: 1;
  font-size: 12px; font-weight: 400; letter-spacing: .18em; text-transform: uppercase;
  border: none; cursor: pointer; min-width: 106px; padding: 13px 20px; border-radius: 999px;
  white-space: nowrap;
  background: transparent; color: var(--espresso);
  transition: background-color .45s var(--ease), color .4s ease;
}
.menu-toggle button.is-active { background: var(--red); color: var(--ivory); }

/* Hidden for a menu with a single section — an empty rail is just a stripe. */
.menu-quicknav[hidden] { display: none; }
.menu-quicknav {
  position: sticky; top: var(--nav-h); z-index: 40;
  background: rgba(250,246,239,.92);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  margin-top: 30px;
  border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
}
.menu-quicknav__inner {
  max-width: 1240px; margin: 0 auto; padding: 14px 44px;
  display: flex; gap: 8px; overflow-x: auto; justify-content: flex-start; flex-wrap: wrap;
}
.menu-quicknav a {
  flex: none; font-size: 11px; font-weight: 400; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); padding: 9px 16px;
  border: 1px solid transparent; border-radius: 999px;
  transition: color .35s ease, background-color .35s ease, border-color .35s ease;
}
.menu-quicknav a:hover { background: rgba(147,32,10,.07); color: var(--red); border-color: rgba(147,32,10,.28); }
/* Scroll-spy: the section you're reading fills in, like the Order Online pill. */
.menu-quicknav a.is-active,
.menu-quicknav a.is-active:hover { background: var(--red); color: var(--ivory); border-color: var(--red); }

.menu-sections { max-width: 1240px; margin: 0 auto; padding: 60px 44px 30px; counter-reset: menucat; }
.menu-columns { display: flex; flex-direction: column; gap: 76px; }
.menu-cat { scroll-margin-top: 170px; counter-increment: menucat; }
.menu-cat__head { display: flex; align-items: baseline; gap: 18px; margin-bottom: 18px; }
.menu-cat__head::before {
  content: "Nº " counter(menucat, upper-roman);
  font-size: 11px; font-weight: 400; letter-spacing: .26em; text-transform: uppercase; color: var(--red);
}
.menu-cat__head h2 { font-family: var(--font-display); font-weight: 300; font-size: 42px; line-height: 1.06; color: var(--espresso); white-space: nowrap; }
.menu-cat__head .rule { flex: 1; height: 1px; background: rgba(28,22,20,.16); }

/* Dish cards → airy list rows with hover tint */
.menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 52px; }
.dish-card {
  position: relative; display: flex; min-height: 0; gap: 18px; align-items: flex-start;
  background: transparent; border: none;
  border-radius: 3px; padding: 18px 12px; margin: 0 -12px;
  overflow: visible; transition: background-color .35s ease;
}
.dish-card:hover { transform: none; box-shadow: none; background: rgba(147,32,10,.05); }
.dish-card__body { flex: 1; min-width: 0; padding: 2px 0 0; display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; align-content: start; column-gap: 14px; }
/* No dotted leader: with a photo, a name, a price and a description on every
   row, a dotted rule per item was the fourth line competing for attention.
   The empty 1fr middle column still pushes the price to the right edge. */
.dish-card__name { grid-column: 1; grid-row: 1; font-size: 17px; font-weight: 400; color: var(--espresso); line-height: 1.25; }
.dish-card__price { grid-column: 3; grid-row: 1; text-align: right; white-space: nowrap; font-family: var(--font-body); font-size: 16px; font-weight: 400; color: var(--red); font-variant-numeric: tabular-nums; }
.dish-card__desc { grid-column: 1 / -1; margin-top: 6px; font-size: 13.5px; font-style: normal; font-weight: 400; line-height: 1.6; color: var(--muted); }
.dish-card__flag {
  grid-column: 1 / -1; margin-top: 7px; justify-self: start;
  font-size: 10.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--red); border: 1px solid rgba(147,32,10,.32); border-radius: 999px; padding: 3px 9px;
}
.dish-card__img { flex: none; width: 88px; align-self: flex-start; padding: 0; order: -1; }
.dish-card__img img { width: 88px; height: 88px; object-fit: cover; display: block; border-radius: 3px; box-shadow: none; transition: transform .9s var(--ease); }
.dish-card:hover .dish-card__img img { transform: scale(1.09); }
.dish-card__img { overflow: hidden; border-radius: 3px; }

/* ---- Photo-card sections -------------------------------------------------
   Opted into per menu by menu.js (CARD_MEALS) — lunch is cards, dinner is
   rows. Two-up cards: name and price on one line, description under them,
   photo bleeding off the right edge. Every rule is scoped under
   .menu-cat--cards so the list rows are untouched. Sized to stay close to
   those rows: full-width cards read well one at a time but pushed a six-item
   section over three screens. */
.menu-cat--cards .menu-grid { grid-template-columns: 1fr 1fr; gap: 16px 20px; }
.menu-cat--cards .dish-card {
  background: var(--ivory-card, #fff); border-radius: 10px; overflow: hidden;
  min-height: 104px; gap: 0; padding: 0; margin: 0;
  box-shadow: 0 1px 3px rgba(28,22,20,.07);
  transition: box-shadow .35s var(--ease), transform .35s var(--ease);
}
.menu-cat--cards .dish-card:hover {
  background: var(--ivory-card, #fff);          /* no red wash on a white card */
  box-shadow: 0 8px 22px rgba(28,22,20,.12); transform: translateY(-2px);
}
/* Price sits beside the name, not on the floor of the card — so the base
   `auto 1fr auto` columns are kept and only the padding changes. */
.menu-cat--cards .dish-card__body { padding: 15px 18px 14px; align-items: baseline; }
/* Same face as the dinner rows — the display serif here made lunch dishes
   read as a different typeface from the rest of the site. Cards differ from
   rows in their chrome, not their type. */
.menu-cat--cards .dish-card__name { font-size: 17px; font-weight: 400; line-height: 1.25; }
.menu-cat--cards .dish-card__desc { margin-top: 5px; font-size: 13.5px; font-weight: 400; line-height: 1.6; color: var(--muted); }
.menu-cat--cards .dish-card__price { font-size: 16px; }
/* photo bleeds to the card's right edge, full height */
.menu-cat--cards .dish-card__img { order: 1; width: 118px; align-self: stretch; border-radius: 0; }
.menu-cat--cards .dish-card__img img { width: 100%; height: 100%; border-radius: 0; }
.menu-cat--cards .dish-card:hover .dish-card__img img { transform: scale(1.04); }
.menu-cat--cards .dish-card__blank { width: 100%; height: 100%; border-radius: 0; font-size: 30px; }

@media (max-width: 900px) {
  .menu-cat--cards .menu-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  /* Three tabs on a phone: tighten the type so a long menu name still fits the
     capsule, and let it wrap onto a second row rather than run off the screen. */
  .menu-toggle { max-width: calc(100% - 40px); flex-wrap: wrap; justify-content: center; }
  .menu-toggle button { min-width: 88px; padding: 12px 14px; font-size: 11px; letter-spacing: .12em; }
  .menu-cat--cards .dish-card { min-height: 94px; }
  .menu-cat--cards .dish-card__body { padding: 14px 16px 12px; }
  .menu-cat--cards .dish-card__name { font-size: 16px; }
  .menu-cat--cards .dish-card__desc { font-size: 13px; }
  .menu-cat--cards .dish-card__img { width: 96px; }
}

/* Printed-menu footnote: the raw-item notice the asterisks point at. Kept to a
   reading measure so it wraps to two or three lines rather than stretching into
   one thin band of 12px type across the whole window, and separated from the
   last dish by a rule so it reads as a footnote and not as another menu item. */
.menu-note { max-width: 680px; margin: 0 auto; padding: 44px 44px 64px; text-align: center; }
.menu-note p {
  margin: 0 0 10px; font-size: 12.5px; line-height: 1.9; letter-spacing: .015em;
  color: var(--faint, var(--muted));
}
.menu-note p:last-child { margin-bottom: 0; }
.menu-note p:first-child::before {
  content: ""; display: block; width: 56px; height: 1px; margin: 0 auto 26px;
  background: rgba(28,22,20,.16);
}
@media (max-width: 720px) { .menu-note { max-width: none; padding: 34px 26px 48px; } }

/* Current Offers (homepage promo codes) */
.offers { max-width: 1000px; margin: 0 auto; padding: 56px 44px 8px; }
.offers__list { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 28px; }
.offer-card { display: flex; align-items: center; gap: 12px; background: var(--tint); border: 1px solid rgba(28,22,20,.14); border-radius: 999px; padding: 6px 16px 6px 6px; }
.offer-card__code { background: var(--red); color: var(--ivory); font-weight: 500; letter-spacing: .08em; padding: 7px 14px; border-radius: 999px; font-size: 13px; }
.offer-card__desc { color: var(--espresso); font-size: 14px; font-weight: 400; }

/* Events & Specials (homepage) */
.events { max-width: 1100px; margin: 0 auto; padding: 60px 44px 100px; }
.events__list { display: flex; flex-direction: column; gap: 16px; max-width: 760px; margin: 40px auto 0; }
.event-card {
  display: flex; gap: 22px; align-items: flex-start;
  background: var(--ivory-card); border: 1px solid rgba(28,22,20,.12);
  border-radius: 4px; padding: 24px 28px;
  transition: transform .5s var(--ease), box-shadow .5s ease;
}
.event-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(20,16,14,.1); }
.event-card__date {
  flex-shrink: 0; width: 74px; height: 74px; border-radius: 50%;
  background: var(--red); color: var(--ivory);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.event-card__month { font-size: 11px; font-weight: 400; text-transform: uppercase; letter-spacing: .12em; }
.event-card__day { font-family: var(--font-display); font-size: 30px; font-weight: 400; line-height: 1; }
.event-card__body { flex: 1; min-width: 0; }
.event-card__title { font-family: var(--font-display); font-size: 26px; font-weight: 400; color: var(--espresso); margin: 2px 0 0; line-height: 1.15; }
.event-card__desc { margin: 7px 0 0; color: var(--muted); font-size: 15px; font-weight: 400; line-height: 1.7; }
@media (max-width: 560px) {
  .events { padding: 40px 20px 70px; }
  .event-card { gap: 16px; padding: 18px; }
}


/* ==========================================================================
   CONTACT + CAREERS — minimal underline form fields
   ========================================================================== */
.contact-grid {
  flex: 1; max-width: 1180px; width: 100%; margin: 0 auto;
  padding: 84px 44px 110px;
  display: grid; grid-template-columns: .8fr 1fr; gap: 72px; align-items: start;
}
.contact-intro .eyebrow { margin-bottom: 20px; }
.contact-intro h1 { font-family: var(--font-display); font-weight: 300; font-size: clamp(46px,5.6vw,84px); line-height: 1.02; letter-spacing: -.015em; }
.contact-intro h1 em { font-style: italic; font-weight: 400; color: var(--red); }
.contact-intro > p { margin-top: 22px; max-width: 62ch; font-size: 17px; line-height: 1.8; font-weight: 400; color: var(--muted); }
.contact-details { margin-top: 40px; display: flex; flex-direction: column; gap: 26px; }
.contact-details a { font-size: 17px; font-weight: 400; line-height: 1.5; color: var(--espresso); transition: color .35s ease; }
.contact-details a:hover { color: var(--red); }
.contact-details .visit__address { font-size: 17px; }
.contact-details .visit__contacts a { font-size: 17px; }
.contact-details .hours { max-width: none; }
.contact-details .hours__row span { font-size: 15px; }
.contact-details .hours__row { padding: 11px 10px; }

/* Form card */
.form-card {
  background: var(--ivory-card); border: 1px solid rgba(28,22,20,.12);
  border-radius: 4px; padding: 40px 40px 44px;
  box-shadow: none; color: var(--espresso);
}
.form-card h2 { font-family: var(--font-display); font-weight: 300; font-size: 40px; line-height: 1.1; margin-bottom: 4px; }
.form-card__sub { font-size: 13px; font-weight: 400; color: var(--faint); margin-bottom: 20px; }
.req { color: var(--red); }

/* Honeypot — hidden from users, catches bots. */
.hp {
  position: absolute !important; left: -9999px !important;
  width: 1px; height: 1px; opacity: 0; pointer-events: none;
}

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 34px; }
.field { display: flex; flex-direction: column; gap: 8px; position: relative; padding: 14px 0 8px; border-bottom: 1px solid rgba(28,22,20,.16); }
.field + .field, .form-row + .field, .field + .form-row { margin-top: 6px; }
.form-row + .form-row { margin-top: 6px; }
.form-row > .field + .field { margin-top: 0; }
.field__label {
  font-size: 11px; font-weight: 400; letter-spacing: .18em; text-transform: uppercase; color: var(--faint);
}
.field__hint { font-weight: 400; color: var(--faint); text-transform: none; letter-spacing: 0; }
.field input, .field select, .field textarea {
  box-sizing: border-box; font-family: inherit; line-height: 1.4;
  border: 0; background: transparent; outline: none;
  border-radius: 0; padding: 2px 0; font-size: 17px; font-weight: 400; color: var(--espresso);
}
/* animated red underline on focus */
.field::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--red); transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease);
}
.field:focus-within::after { transform: scaleX(1); }
.field input:not([type="file"]), .field select { height: auto; }
.field select { cursor: pointer; }
.field textarea { resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--faint); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: transparent; background: transparent; }
/* Resume / file upload — dashed drop area look */
.field--file, .field:has(.field__file) { border-bottom: none; padding-bottom: 0; }
.field:has(.field__file)::after { content: none; }
.field__file {
  cursor: pointer; font-size: 14px !important; padding: 22px 16px !important;
  border: 1px dashed rgba(28,22,20,.24) !important; border-radius: 4px !important;
  text-align: center;
  transition: background-color .4s ease, border-color .4s ease, transform .4s var(--ease);
}
.field__file:hover { border-color: var(--red) !important; background: rgba(147,32,10,.06); transform: translateY(-2px); }
.field__file::file-selector-button {
  margin-right: 12px; padding: 8px 16px; border: 1px solid rgba(147,32,10,.4); border-radius: 999px;
  background: transparent; color: var(--red); font-size: 12px; font-weight: 400;
  letter-spacing: .1em; text-transform: uppercase;
  cursor: pointer; font-family: inherit;
}
.field__file-name { margin-top: 7px; font-size: 13px; color: var(--red); font-weight: 400; }
.field__file-name:not(:empty)::before { content: "✓ "; }
.form-note { margin-top: 18px; font-size: 13px; font-weight: 400; line-height: 1.75; color: var(--faint); text-align: left; }
.form-error {
  display: none; margin-top: 14px; font-size: 13.5px; line-height: 1.5;
  color: var(--red-dark); text-align: center; font-weight: 400;
}
.form-card.has-error .form-error { display: block; }

/* Success state — pop + drawn check */
@keyframes om-check { from { stroke-dashoffset: 60; } to { stroke-dashoffset: 0; } }
.form-success {
  display: none;
  flex-direction: column; align-items: center; text-align: center; gap: 16px; padding: 40px 0;
}
.form-card.is-sent .form-success { display: flex; animation: om-pop .55s var(--ease) both; }
.form-card.is-sent form { display: none; }
.form-success__check {
  width: 62px; height: 62px; border-radius: 50%;
  background: transparent; color: var(--red);
  border: 2px solid rgba(147,32,10,.35);
  display: flex; align-items: center; justify-content: center; font-size: 30px;
}
.form-success h2 { margin-top: 8px; font-family: var(--font-display); font-weight: 300; font-size: 44px; line-height: 1.1; }
.form-success p { margin-top: 0; max-width: 46ch; font-size: 16px; font-weight: 400; line-height: 1.8; color: var(--muted); }
.form-success__again {
  margin-top: 8px; font-size: 12px; font-weight: 400; letter-spacing: .16em; text-transform: uppercase;
  color: var(--red); background: transparent; border: 1px solid rgba(147,32,10,.4); cursor: pointer;
  border-radius: 999px; padding: 15px 30px;
  transition: background-color .4s ease, transform .4s var(--ease);
}
.form-success__again:hover { background: rgba(147,32,10,.08); transform: translateY(-2px); }

/* ---- Careers hero ------------------------------------------------------- */
.careers-hero {
  position: relative; overflow: hidden; min-height: 640px;
  padding: 170px 44px 84px;
  display: flex; align-items: flex-end; justify-content: flex-start; text-align: left;
}
.careers-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .84; animation: om-kenburns 24s ease-in-out infinite alternate; }
.careers-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,16,14,.66) 0%, rgba(20,16,14,.24) 40%, rgba(20,16,14,.88) 100%); }
.careers-hero__inner { position: relative; z-index: 2; color: var(--ivory); max-width: var(--maxw); width: 100%; margin: 0 auto; }
.careers-hero__kicker { display: flex; align-items: center; justify-content: flex-start; gap: 14px; margin-bottom: 22px; }
.careers-hero__kicker span:first-child { height: 1px; width: 46px; background: rgba(250,246,239,.6); }
.careers-hero__kicker span:last-child { display: none; }
.careers-hero__kicker-text { font-size: 12px; font-weight: 400; letter-spacing: .28em; text-transform: uppercase; color: rgba(250,246,239,.82); }
.careers-hero h1 { font-family: var(--font-display); font-weight: 300; font-size: clamp(50px,6.6vw,96px); line-height: 1; letter-spacing: -.015em; }
.careers-hero h1 em { font-style: italic; font-weight: 400; color: var(--gold); }
.careers-hero p { margin: 22px 0 0; max-width: 62ch; font-size: 17px; line-height: 1.75; font-weight: 400; color: rgba(250,246,239,.86); }

.careers-body {
  flex: 1; max-width: 820px; width: 100%; margin: 0 auto;
  padding: 100px 44px 120px;
}

/* ==========================================================================
   ORDER ONLINE — airy list rows + sticky paper cart (from the Order comp)
   ========================================================================== */
.order-cart-pill {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 400; letter-spacing: .12em; text-transform: uppercase;
  color: var(--espresso); font-variant-numeric: tabular-nums;
}

.order-demo {
  background: rgba(147,32,10,.06);
  border-bottom: 1px solid rgba(147,32,10,.16);
  color: var(--muted);
  font-size: 13px; font-weight: 400; line-height: 1.5; text-align: center;
  padding: 11px 44px;
}
.order-demo strong { color: var(--red); font-weight: 500; }

/* ---- Store header — open, no card chrome -------------------------------- */
.ord-top { max-width: 1240px; margin: 0 auto; width: 100%; padding: 44px 44px 0; }
.ord-store {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  background: transparent; border: none; border-radius: 0;
  padding: 0; box-shadow: none;
}
.ord-store__main { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.ord-store__main .eyebrow { margin-bottom: 0; }
.ord-store__main h1 { font-family: var(--font-display); font-weight: 300; font-size: clamp(40px,5vw,74px); line-height: 1.02; letter-spacing: -.015em; }
.ord-store__main h1 em { font-style: italic; font-weight: 400; }
.ord-store__addr { margin-top: 0; font-size: 16px; font-weight: 400; color: var(--muted); }
.ord-store__facts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.ord-fact {
  display: inline-flex; align-items: center; gap: 9px;
  background: transparent; border: 1px solid rgba(28,22,20,.16); border-radius: 999px; padding: 10px 18px;
  font-size: 12px; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
/* live "ready in" fact gets a pulsing green dot via its clock emoji slot */
.ord-fact [data-pickup-label]::before {
  content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--green); margin-right: 9px; vertical-align: 1px;
  animation: om-pulse 2.2s ease-in-out infinite;
}
.ord-store__edit {
  flex: none; display: inline-flex; align-items: center; gap: 9px;
  font-size: 12px; font-weight: 400; letter-spacing: .16em; text-transform: uppercase;
  color: var(--red); background: none; border: 1px solid rgba(147,32,10,.4);
  border-radius: 999px; padding: 14px 26px; cursor: pointer;
  transition: background-color .35s ease, color .35s ease, border-color .35s ease, transform .35s var(--ease);
}
.ord-store__edit:hover { background: var(--red); color: var(--ivory); border-color: var(--red); transform: translateY(-2px); }
.ord-store__edit span { font-size: 16px; line-height: 1; }

.ord-status {
  max-width: 1240px; margin-left: auto; margin-right: auto;
  display: flex; align-items: center; gap: 10px;
  margin-top: 18px; padding: 13px 20px;
  border-radius: 4px; font-size: 13.5px; font-weight: 400; line-height: 1.45;
  background: rgba(147,32,10,.06); border: 1px solid rgba(147,32,10,.18); color: var(--red);
}
.ord-status--calm { background: var(--tint); border-color: rgba(28,22,20,.12); color: var(--muted); }

/* ---- Sticky category bar + search --------------------------------------- */
.ord-tabs {
  position: sticky; top: var(--nav-h); z-index: 40;
  background: rgba(250,246,239,.92);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  margin-top: 26px;
}
.ord-tabs__inner { max-width: 1240px; margin: 0 auto; padding: 0 44px; display: flex; align-items: stretch; gap: 18px; }
.ord-tabs__search {
  flex: none; align-self: center; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid rgba(28,22,20,.16); background: transparent; color: var(--espresso); cursor: pointer;
  transition: background-color .35s ease, color .35s ease, border-color .35s ease;
}
.ord-tabs__search:hover, .ord-tabs__search[aria-expanded="true"] { background: var(--red); color: var(--ivory); border-color: var(--red); }
.ord-tabs__list {
  display: flex; gap: 34px; overflow-x: auto; scrollbar-width: none;
  scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
}
.ord-tabs__list::-webkit-scrollbar { display: none; }
.ord-tab {
  flex: none; position: relative; background: none; border: none; cursor: pointer;
  padding: 14px 2px 12px; font-family: inherit;
  font-size: 15.5px; font-weight: 400; letter-spacing: 0; white-space: nowrap;
  color: #3D3430; transition: color .35s ease;
}
.ord-tab::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--red); border-radius: 0;
  transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease);
}
.ord-tab:hover { color: var(--red); }
.ord-tab.is-active { color: var(--red); font-weight: 400; }
.ord-tab.is-active::after { transform: scaleX(1); }

.ord-search { max-width: 1240px; margin: 0 auto; width: 100%; padding: 0 44px 15px; display: flex; gap: 10px; }
.ord-search[hidden], .ord-status[hidden], .ord-tabs[hidden], .ord-bar[hidden] { display: none; }
.ord-search__input {
  flex: 1; font-family: inherit; font-size: 16px; font-weight: 400; color: var(--espresso);
  background: transparent; border: 0; border-bottom: 1px solid rgba(28,22,20,.16); border-radius: 0; padding: 10px 2px;
  transition: border-color .35s ease;
}
.ord-search__input:focus { outline: none; border-bottom-color: var(--red); }
.ord-search__input::placeholder { color: var(--faint); }
.ord-search__clear {
  flex: none; background: none; border: none; cursor: pointer; font-family: inherit;
  font-size: 12px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; color: var(--faint);
  padding: 0 8px; transition: color .35s ease;
}
.ord-search__clear:hover { color: var(--red); }

/* ---- Layout: menu + cart ------------------------------------------------ */
.ord-layout { flex: 1; max-width: 1240px; width: 100%; margin: 0 auto; padding: 44px 44px 110px; display: grid; grid-template-columns: minmax(0,1fr) 372px; gap: 64px; align-items: start; }
.ord-main { min-width: 0; }

.ord-cat { margin-bottom: 64px; scroll-margin-top: 170px; counter-increment: ordcat; }
.ord-main { counter-reset: ordcat; }
.ord-cat:last-child { margin-bottom: 0; }
.ord-cat__head { margin-bottom: 12px; }
.ord-cat__title { display: flex; align-items: baseline; gap: 18px; }
.ord-cat__title::before {
  content: "Nº " counter(ordcat, upper-roman);
  font-size: 11px; font-weight: 400; letter-spacing: .26em; text-transform: uppercase; color: var(--red);
}
.ord-cat__title h2 { font-family: var(--font-display); font-weight: 300; font-size: clamp(32px,3.2vw,42px); line-height: 1.06; color: var(--espresso); white-space: nowrap; }
.ord-cat__title .rule { flex: 1; height: 1px; background: rgba(28,22,20,.16); }
.ord-cat__count { display: none; }
.ord-cat__desc { margin-top: 8px; font-size: 14.5px; font-weight: 400; line-height: 1.7; color: var(--muted); max-width: 68ch; }

/* Dish cards → list rows: thumb · text · price + Add pill ----------------- */
/* One card per row here, not two. The ordering page gives its menu column
   about 730px because the cart sits alongside; split in two that leaves
   ~350px a card, which wraps dish names onto two lines and clips the
   descriptions. Full width reads like the menu page cards and fits. */
.ord-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
/* Photo cards, matching the menu page: white card, photo bleeding off the right
   edge, two to a row. overflow:hidden is what clips the photo to the corner
   radius, so the photo needs no radius of its own. */
.dish {
  position: relative; display: flex; gap: 0; align-items: stretch;
  background: var(--ivory-card); border: none; border-radius: 10px; overflow: hidden;
  min-height: 118px;
  padding: 0; margin: 0; cursor: pointer; text-align: left; font: inherit; color: inherit;
  box-shadow: 0 1px 3px rgba(28,22,20,.07);
  transition: box-shadow .35s var(--ease), transform .35s var(--ease), background-color .35s ease;
}
/* A red wash would tint the whole card, so hover lifts instead. The in-cart
   state keeps a tint — that one carries meaning and has to stay visible. */
.dish:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(28,22,20,.12); }
.dish:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.dish.is-in-cart { background: rgba(147,32,10,.05); box-shadow: inset 0 0 0 1px rgba(147,32,10,.22); }

.dish__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; padding: 15px 0 14px 18px; order: 1; }
.dish__name { font-size: 17px; font-weight: 400; line-height: 1.25; color: var(--espresso); }
/* Right rail: price over the Add pill, both flush to the row's right edge.
   Laid out, not pinned — a two-line name can't run underneath it. */
.dish__side { order: 2; flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 9px; padding: 15px 16px 14px 12px; }
.dish__price { margin: 0; font-family: var(--font-body); font-size: 16px; font-weight: 400; color: var(--red); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dish__desc {
  margin-top: 0; font-size: 13.5px; font-weight: 400; line-height: 1.6; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.dish__tag { margin-top: 2px; align-self: flex-start; font-size: 10.5px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; color: var(--red); }

.dish__media { flex: none; position: static; width: 118px; order: 3; align-self: stretch; }
.dish__thumb { width: 100%; height: 100%; border-radius: 0; object-fit: cover; display: block; background: var(--tint); transition: transform .9s var(--ease); }
.dish__media { overflow: hidden; }
.dish__thumb--blank {
  width: 100%; height: 100%; border-radius: 0; display: grid; place-items: center;
  background: var(--tint);
  font-family: var(--font-display); font-style: italic; font-size: 38px; font-weight: 400; color: rgba(28,22,20,.28);
}
.dish:hover .dish__thumb { transform: scale(1.06); }

/* Add control — outlined pill that fills red on row hover */
.dish__add {
  width: auto; height: auto; border-radius: 999px; display: grid; place-items: center;
  background: transparent; color: var(--red); border: 1px solid rgba(147,32,10,.4); cursor: pointer;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; line-height: 1; padding: 9px 16px;
  box-shadow: none;
  transition: background-color .35s ease, color .35s ease, border-color .35s ease, transform .25s var(--ease);
}
.dish:hover .dish__add, .dish__add:hover { background: var(--red); color: var(--ivory); border-color: var(--red); }
.dish__add:active { transform: scale(.94); }
/* Quantity chip. It used to sit at the card's TOP-LEFT, which is exactly where
   the dish name starts — so an in-cart row read "lives" instead of "Olives".
   Pinned to the top-right instead, over the photo, where nothing is written.
   The ivory ring keeps it legible against a dark or busy dish photo. */
.dish__badge {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px;
  display: grid; place-items: center;
  background: var(--red); color: var(--ivory);
  font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px var(--ivory-card);
  transition: transform .25s var(--ease);
}

/* Empty / closed states inside the menu column */
.ord-empty { text-align: center; padding: 60px 24px; border: 1px dashed rgba(28,22,20,.24); border-radius: 4px; }
.ord-empty__icon { font-size: 34px; margin-bottom: 12px; opacity: .55; }
.ord-empty__title { font-family: var(--font-display); font-style: italic; font-size: 26px; font-weight: 400; color: var(--espresso); }
.ord-empty__sub { margin-top: 8px; font-size: 14px; font-weight: 400; color: var(--muted); }

/* Mobile order bar */
.ord-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: none; align-items: center; justify-content: space-between; gap: 16px;
  padding: 13px 22px calc(13px + env(safe-area-inset-bottom));
  background: rgba(250,246,239,.97); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line); box-shadow: 0 -10px 30px rgba(20,16,14,.12);
}
.ord-bar__meta { display: flex; flex-direction: column; gap: 1px; font-size: 12.5px; font-weight: 400; color: var(--muted); }
.ord-bar__meta strong { font-family: var(--font-display); font-size: 24px; font-weight: 400; color: var(--espresso); font-variant-numeric: tabular-nums; }
.ord-bar__btn { flex: none; padding: 14px 28px; }

/* Cart — sticky paper card */
.cart {
  position: sticky; top: 152px;
  background: var(--ivory-card); border-radius: 4px; border: 1px solid rgba(28,22,20,.12);
  box-shadow: none; overflow: hidden;
  transition: box-shadow .5s ease;
}
.cart.is-bumped { box-shadow: 0 0 0 2px rgba(147,32,10,.35); }
.cart__head { padding: 28px 28px 16px; border-bottom: none; display: flex; align-items: baseline; justify-content: space-between; }
.cart__close { display: none; }
.cart__head h2 { font-family: var(--font-display); font-weight: 300; font-size: 34px; line-height: 1; }
.cart__mode { font-size: 11px; font-weight: 400; letter-spacing: .18em; text-transform: uppercase; color: var(--red); }
.cart__empty { padding: 26px 28px 34px; text-align: left; border-top: 1px solid rgba(28,22,20,.1); margin: 0 0; }
.cart__empty-emoji { display: none; }
.cart__empty p { font-size: 14px; font-weight: 400; line-height: 1.7; color: var(--muted); max-width: none; margin: 0; }
.cart__empty p::before {
  content: "Nothing here yet."; display: block;
  font-family: var(--font-display); font-style: italic; font-size: 22px; color: var(--espresso);
  margin-bottom: 8px;
}
.cart__lines { max-height: 330px; overflow-y: auto; padding: 0 28px; border-top: 1px solid rgba(28,22,20,.1); }
.cart__line {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "mid total" "qty total";
  column-gap: 12px; row-gap: 9px; align-items: start;
  padding: 15px 0; border-bottom: 1px solid rgba(28,22,20,.08); animation: om-linein .45s var(--ease) both;
}
.cart__line .qty { grid-area: qty; justify-self: start; margin-top: 0; }
.cart__line-mid { grid-area: mid; min-width: 0; }
.cart__line-total { grid-area: total; }
.cart__line-name { font-size: 15px; font-weight: 400; color: var(--espresso); line-height: 1.35; }
.cart__line-note { font-size: 12px; font-weight: 400; font-style: italic; color: var(--faint); line-height: 1.4; margin-top: 2px; }
.cart__line-total { font-size: 15px; font-weight: 400; color: var(--red); font-variant-numeric: tabular-nums; padding-top: 1px; }
.cart__foot { padding: 16px 28px 30px; }
.cart__row { display: flex; justify-content: space-between; font-size: 14px; font-weight: 400; color: var(--muted); padding: 5px 0; }
.tnum { font-variant-numeric: tabular-nums; }
.cart__grand { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 0 4px; margin-top: 6px; border-top: 1px solid rgba(28,22,20,.12); }
.cart__grand-label { font-size: 17px; font-weight: 400; color: var(--espresso); letter-spacing: 0; text-transform: none; }
.cart__grand-value { font-family: var(--font-body); font-size: 17px; font-weight: 400; color: var(--red); font-variant-numeric: tabular-nums; }

/* Quantity stepper — round pill */
.qty { display: inline-flex; align-items: center; gap: 4px; border: 1px solid rgba(28,22,20,.16); border-radius: 999px; overflow: visible; flex: none; margin-top: 2px; padding: 3px; }
.qty__btn { width: 26px; height: 26px; border: none; border-radius: 50%; background: transparent; color: var(--red); font-size: 15px; cursor: pointer; line-height: 1; transition: background-color .3s ease; }
.qty__btn:hover { background: rgba(147,32,10,.08); }
.qty__n { min-width: 18px; text-align: center; font-size: 14px; font-weight: 400; font-variant-numeric: tabular-nums; }
.qty--lg { margin-top: 0; padding: 4px; }
.qty--lg .qty__btn { width: 38px; height: 38px; font-size: 19px; }
.qty--lg .qty__n { min-width: 28px; font-size: 16px; }

/* Shared red action button — pill */
.order-btn {
  position: relative; overflow: hidden;
  font-size: 13px; font-weight: 400; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ivory); background: var(--red); border: none; cursor: pointer;
  padding: 18px 30px; border-radius: 999px;
  transition: transform .4s var(--ease), background-color .4s ease;
}
.order-btn:hover { transform: translateY(-3px); background: var(--red-dark); }
.order-btn--block { width: 100%; margin-top: 12px; }

/* Checkout */
.checkout { flex: 1; max-width: 1080px; width: 100%; margin: 0 auto; padding: 44px 44px 110px; }
.checkout__back { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); background: none; border: none; cursor: pointer; padding: 6px 0; margin-bottom: 18px; transition: color .35s ease; }
.checkout__back:hover { color: var(--red); }
.checkout .eyebrow { margin-bottom: 14px; }
.checkout__title { font-family: var(--font-display); font-weight: 300; font-size: clamp(40px,4.8vw,64px); line-height: 1.02; letter-spacing: -.015em; }
.checkout__form { margin-top: 38px; display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 56px; align-items: start; }
.checkout__main { display: flex; flex-direction: column; gap: 38px; }
.co-block__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.co-block h2 { font-family: var(--font-display); font-weight: 300; font-size: 30px; line-height: 1; margin-bottom: 18px; }
.co-block__head h2 { margin-bottom: 0; }
.co-secure { font-size: 11px; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.co-pickup { background: var(--ivory-card); border: 1px solid rgba(28,22,20,.12); border-radius: 4px; padding: 18px 20px; display: flex; align-items: center; gap: 14px; font-size: 22px; }
.co-pickup__name { font-size: 15px; font-weight: 400; color: var(--espresso); }
.co-pickup__addr { font-size: 13.5px; font-weight: 400; color: var(--muted); margin-top: 2px; }
.co-field { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; position: relative; padding: 14px 0 8px; border-bottom: 1px solid rgba(28,22,20,.16); }
.co-field:first-child { margin-top: 0; }
.co-field__label { font-size: 11px; font-weight: 400; letter-spacing: .18em; text-transform: uppercase; color: var(--faint); }
.co-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 34px; }
/* SMS consent — a real control, so it reads as one: full-size tap target,
   legible copy, and no visual trickery to nudge the answer. */
.co-consent { display: flex; align-items: flex-start; gap: 11px; margin-top: 18px; padding: 14px 0 4px; cursor: pointer; }
.co-consent input { flex: 0 0 auto; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--red, #c3252d); cursor: pointer; }
.co-consent span { font-size: 13px; line-height: 1.55; color: var(--faint); }
.co-grid-2 .co-field { margin-top: 0; }
.co-field input, .co-field select {
  border: 0; background: transparent; border-radius: 0; padding: 2px 0;
  font-size: 17px; font-weight: 400; color: var(--espresso); outline: none;
}
.co-field::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--red); transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease);
}
.co-field:focus-within::after { transform: scaleX(1); }
.co-field select { cursor: pointer; }
.co-field input:focus, .co-field select:focus { outline: none; background: transparent; }
.co-demo-card { background: var(--tint); border: 1px dashed rgba(28,22,20,.24); border-radius: 4px; padding: 20px; }
.co-demo-card p { font-size: 14px; font-weight: 400; line-height: 1.7; color: var(--muted); }

/* Checkout summary */
.co-summary { position: sticky; top: 96px; background: var(--ivory-card); border: 1px solid rgba(28,22,20,.12); border-radius: 4px; box-shadow: none; overflow: hidden; }
.co-summary__head { padding: 24px 26px 14px; border-bottom: none; }
.co-summary__head h2 { font-family: var(--font-display); font-weight: 300; font-size: 30px; line-height: 1; }
.co-summary__lines { max-height: 300px; overflow-y: auto; padding: 0 26px; border-top: 1px solid rgba(28,22,20,.1); }
.co-summary__line { display: flex; align-items: flex-start; gap: 12px; padding: 13px 0; border-bottom: 1px solid rgba(28,22,20,.08); }
.co-summary__qty { flex: none; font-size: 13px; font-weight: 400; color: var(--red); font-variant-numeric: tabular-nums; min-width: 22px; }
.co-summary__mid { flex: 1; min-width: 0; }
.co-summary__name { font-size: 14px; font-weight: 400; color: var(--espresso); line-height: 1.3; }
.co-summary__note { font-size: 11.5px; font-weight: 400; font-style: italic; color: var(--faint); margin-top: 2px; }
.co-summary__total { font-size: 14px; font-weight: 400; color: var(--red); font-variant-numeric: tabular-nums; }
.co-summary__foot { padding: 14px 26px 24px; }
.co-summary__fineprint { font-size: 12px; font-weight: 400; line-height: 1.6; color: var(--faint); text-align: center; margin-top: 12px; }

/* Customize modal */
.modal { position: fixed; inset: 0; z-index: 9997; background: rgba(20,16,14,.6); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 24px; }
.modal__card { position: relative; background: var(--ivory); border: 2px solid var(--red); border-radius: 4px; max-width: 500px; width: 100%; max-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 40px 100px rgba(14,11,10,.4); overflow: hidden; animation: om-pop .45s var(--ease) both; }
.modal__hero {
  flex: none; width: 100%; aspect-ratio: 4/3; max-height: 340px;
  object-fit: cover; object-position: center; display: block; background: var(--tint);
}
/* On a phone a 4:3 photo is most of the sheet before a single option shows.
   Shorter crop here, and a tighter heading, so a choice is visible on open. */
@media (max-width: 600px) {
  .modal { padding: 14px; }
  .modal__card { max-height: 92vh; }
  .modal__hero { aspect-ratio: 16/9; max-height: 190px; }
  .modal__head { padding: 18px 20px 14px; }
  .modal__head h2 { font-size: 27px; }
  .modal__body { padding: 16px 20px 14px; }
  .modal__foot { padding: 14px 20px 16px; }
}
.modal__head { padding: 26px 28px 18px; border-bottom: 1px solid rgba(28,22,20,.1); display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.modal__head h2 { font-family: var(--font-display); font-weight: 300; font-size: 34px; line-height: 1.05; }
.modal__price { font-family: var(--font-body); font-size: 18px; font-weight: 400; color: var(--red); margin-top: 4px; font-variant-numeric: tabular-nums; }
.modal__desc { margin-top: 10px; font-size: 14.5px; font-weight: 400; line-height: 1.7; color: var(--muted); }
.modal__close { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(28,22,20,.18); background: var(--ivory-card); font-size: 18px; color: var(--espresso); cursor: pointer; line-height: 1; transition: background-color .3s ease, color .3s ease; }
.modal__close:hover { background: var(--red); color: var(--ivory); border-color: var(--red); }
.modal__card--hasHero .modal__close { position: absolute; top: 14px; right: 14px; z-index: 2; border-color: transparent; box-shadow: 0 4px 14px rgba(0,0,0,.35); }
/* The dish modal scrolls its photo, heading and options as one block, so the
   photo can move out of the way instead of pinning the options into a strip.
   Scoped to .modal__scroll: the Order details sheet has no wrapper and keeps
   scrolling its body, which is right there — its header is two short lines. */
.modal__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.modal__scroll .modal__body { overflow: visible; flex: none; }
/* min-height:0 keeps the flex body scrollable instead of cropped. */
.modal__body { padding: 22px 28px 20px; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.modal__label { font-size: 11px; font-weight: 400; letter-spacing: .18em; text-transform: uppercase; color: var(--faint); margin-bottom: 10px; }
.modal__foot { padding: 18px 28px 22px; border-top: 1px solid rgba(28,22,20,.1); display: flex; align-items: center; gap: 14px; }
.modal__add { flex: 1; }
.modal__add:disabled { opacity: .55; cursor: not-allowed; }
.opt-group__hint--req { color: var(--red); }

/* Confirmation overlay */
.confirm { position: fixed; inset: 0; z-index: 9998; background: rgba(20,16,14,.66); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 24px; }
.confirm__card { background: var(--ivory); border-radius: 4px; border: 1px solid rgba(28,22,20,.12); max-width: 440px; width: 100%; padding: 48px 42px; text-align: center; box-shadow: 0 40px 100px rgba(14,11,10,.4); animation: om-pop .55s var(--ease) both; }
.confirm__check { width: 72px; height: 72px; margin: 0 auto; border-radius: 50%; background: transparent; border: 2px solid rgba(147,32,10,.35); color: var(--red); display: flex; align-items: center; justify-content: center; font-size: 34px; }
.confirm__card h2 { margin-top: 24px; font-family: var(--font-display); font-weight: 300; font-size: 42px; line-height: 1.05; }
.confirm__card p { margin-top: 12px; font-size: 16px; font-weight: 400; line-height: 1.7; color: var(--muted); }
.confirm__again { margin-top: 28px; font-size: 12px; font-weight: 400; letter-spacing: .16em; text-transform: uppercase; color: var(--red); background: transparent; border: 1px solid rgba(147,32,10,.4); cursor: pointer; padding: 15px 32px; border-radius: 999px; transition: background-color .4s ease, transform .4s var(--ease); }
.confirm__again:hover { background: rgba(147,32,10,.08); transform: translateY(-2px); }

@media (max-width: 1080px) {
  .ord-layout { grid-template-columns: 1fr; padding-bottom: 120px; }

  /* Cart becomes a bottom sheet, opened from the fixed order bar. */
  .cart {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 70;
    border-radius: 14px 14px 0 0; border-width: 1px 0 0;
    max-height: 86vh; display: flex; flex-direction: column;
    transform: translateY(101%); transition: transform .32s var(--ease);
    box-shadow: 0 -20px 60px rgba(20,16,14,.3);
  }
  .cart.is-open { transform: none; }
  .cart__head { padding-top: 20px; }
  .cart__close {
    display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
    border: 1px solid rgba(28,22,20,.18); background: var(--ivory); color: var(--espresso);
    font-size: 17px; line-height: 1; cursor: pointer;
  }
  .cart__mode { display: none; }
  .cart > [data-cart-body] { overflow-y: auto; padding-bottom: env(safe-area-inset-bottom); }
  .cart__lines { max-height: none; }
  .ord-bar { display: flex; }
  .cart-scrim { position: fixed; inset: 0; z-index: 65; background: rgba(20,16,14,.5); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }

  .checkout__form { grid-template-columns: 1fr; gap: 36px; }
  .co-summary { position: static; }
}
@media (max-width: 760px) {
  .order-demo { padding-left: 22px; padding-right: 22px; }
  .ord-top, .ord-tabs__inner, .ord-search, .ord-layout, .checkout { padding-left: 22px; padding-right: 22px; }
  .ord-store { padding: 0; }
  .ord-store__edit { width: 100%; justify-content: center; }
  .ord-grid { grid-template-columns: 1fr; }
  .co-grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .dish { min-height: 100px; }
  .dish__body { padding: 13px 0 12px 14px; }
  .dish__side { gap: 8px; padding: 13px 12px 12px 10px; }
  .dish__add { padding: 8px 13px; letter-spacing: .1em; }
  .dish__media { width: 96px; }
}

/* ==========================================================================
   SCROLL REVEAL (progressive enhancement; delays via data-reveal-delay)
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1000px) {
  .story { grid-template-columns: 1fr; gap: 56px; }
  .story__badge { right: 18px; }
  .visit { grid-template-columns: 1fr; gap: 44px; }
  .visit__map { min-height: 360px; }
  .contact-grid { grid-template-columns: 1fr; gap: 44px; }
  .faq__split { grid-template-columns: 1fr; gap: 36px; }
  .faq__split .section-head { position: static; }
  .gallery { grid-template-columns: 1fr 1fr; }
  .cards-3 { grid-template-columns: 1fr 1fr; }
  .reviews__inner > div:last-child { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .container,
  .nav, .nav--overlay,
  .hero__inner,
  .story, .features, .gallery-section, .band, .experiences,
  .reviews, .faq-section, .visit,
  .page-head, .menu-quicknav__inner, .menu-sections,
  .contact-grid, .careers-hero, .careers-body,
  .footer--simple, .footer--rich { padding-left: 22px; padding-right: 22px; }

  .features { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: 1fr; }
  .cards-3 { grid-template-columns: 1fr; }
  .reviews__inner > div:last-child { grid-template-columns: 1fr; }
  .menu-grid { grid-template-columns: 1fr; }
  .dish-card__img { width: 72px; }
  .dish-card__img img { width: 72px; height: 72px; }
  .form-row { grid-template-columns: 1fr; }
  .form-card { padding: 30px 24px 32px; }
  .story { padding-top: 96px; }
  .story__badge { position: static; margin-top: 28px; align-self: flex-start; }
  .footer--simple .footer__row { justify-content: flex-start; }
}

/* ---- Ordering: item option groups --------------------------------------- */
.opt-group { margin-bottom: 20px; }
.opt-group__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.opt-group__label { font-weight: 400; font-size: 15px; color: var(--espresso); }
.opt-group__hint { font-size: 11px; color: var(--faint); text-transform: uppercase; letter-spacing: .12em; }
.opt-row { display: flex; align-items: center; gap: 11px; padding: 10px 0; border-bottom: 1px solid rgba(28,22,20,.08); cursor: pointer; transition: background-color .3s ease; }
.opt-row:last-child { border-bottom: none; }
.opt-row:hover { background: rgba(147,32,10,.04); }
.opt-row__input { width: 18px; height: 18px; accent-color: var(--red); flex-shrink: 0; cursor: pointer; }
.opt-row__name { flex: 1; font-size: 14.5px; font-weight: 400; color: var(--espresso); }
.opt-row__price { font-size: 13.5px; font-weight: 400; color: var(--faint); font-variant-numeric: tabular-nums; }
.cart__line-opts, .co-summary__opts { font-size: 12.5px; font-weight: 400; color: var(--faint); margin-top: 2px; line-height: 1.4; }

/* ==========================================================================
   Pickup-time picker — meal first, every time visible at once
   ========================================================================== */
.pt-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.pt-head .modal__label { margin-bottom: 0; }
.pt-window { font-size: 13px; font-weight: 400; color: var(--faint); }

/* "As soon as possible" — the live quote */
.pt-asap { width: 100%; display: flex; align-items: center; gap: 10px; padding: 13px 15px; margin-bottom: 12px;
  background: var(--ivory-card); border: 1px solid rgba(28,22,20,.16); border-radius: 999px; cursor: pointer;
  font-family: var(--font-body); text-align: left; transition: border-color .3s ease, background-color .3s ease; }
.pt-asap:hover { border-color: rgba(147,32,10,.5); }
.pt-asap.is-on { background: var(--red); border-color: var(--red); }
.pt-asap__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex-shrink: 0; animation: om-pulse 2.2s ease-in-out infinite; }
.pt-asap.is-on .pt-asap__dot { background: #fff; }
.pt-asap__txt { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.pt-asap__name { font-size: 15.5px; font-weight: 400; color: var(--espresso); }
.pt-asap__sub { font-size: 12.5px; font-weight: 400; color: var(--faint); }
.pt-asap.is-on .pt-asap__name, .pt-asap.is-on .pt-asap__sub { color: #fff; }

/* Segmented control — meal, and the day when more than one is on offer. */
.pt-seg { display: flex; gap: 4px; padding: 5px; background: var(--tint); border: 1px solid rgba(28,22,20,.14); border-radius: 999px; margin-bottom: 12px; }
.pt-seg--scroll { overflow-x: auto; scrollbar-width: none; }
.pt-seg--scroll::-webkit-scrollbar { display: none; }
.pt-seg__btn { flex: 1 0 auto; padding: 11px 14px; border: 0; border-radius: 999px; cursor: pointer;
  font-family: var(--font-body); font-size: 13px; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  background: transparent; white-space: nowrap; transition: background-color .35s ease, color .35s ease; }
.pt-seg__btn.is-on { background: var(--red); color: var(--ivory); font-weight: 400; box-shadow: none; }

/* Every time for the chosen meal, visible at once. */
.pt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pt-chip { padding: 11px 4px; border-radius: 999px; cursor: pointer; font-family: var(--font-body); font-size: 14px;
  text-align: center; background: var(--ivory-card); color: var(--espresso); border: 1px solid rgba(28,22,20,.16);
  font-weight: 400; font-variant-numeric: tabular-nums; transition: background-color .3s ease, border-color .3s ease, color .3s ease; }
.pt-chip:hover { border-color: rgba(147,32,10,.5); }
.pt-chip.is-on { background: var(--red); color: #fff; border-color: var(--red); font-weight: 400; }
.pt-chip:disabled { opacity: .4; cursor: not-allowed; }

.pt-note { display: flex; align-items: flex-start; gap: 8px; margin-top: 14px;
  font-size: 14px; font-weight: 400; color: var(--muted); line-height: 1.5; }
.pt-note__b { color: var(--red); font-weight: 500; }
.pt-empty { padding: 16px; text-align: center; font-size: 14px; font-weight: 400; color: var(--muted);
  background: var(--ivory-card); border: 1px solid rgba(28,22,20,.16); border-radius: 4px; }

/* The promise restated immediately above the button that commits to it. */
.pt-ready { font-size: 14px; font-weight: 400; color: var(--muted); text-align: center; }
.pt-ready b { color: var(--espresso); font-weight: 500; }
.modal__foot--stack { flex-direction: column; align-items: stretch; gap: 10px; }

/* Menu page placeholder tile — quiet tinted square with a serif initial */
.dish-card__blank {
  width: 88px; height: 88px; border-radius: 3px; display: grid; place-items: center;
  background: var(--tint);
  font-family: var(--font-display); font-style: italic; font-size: 30px; font-weight: 400;
  color: rgba(28,22,20,.28);
}