/* Graceful fallbacks for iOS/Android browsers released from 2015 onward. */
html { width: 100%; min-width: 320px; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
body { width: 100%; min-width: 320px; overflow-x: hidden; background: #f8edd7; color: #10232c; }
main { display: block; width: 100%; }
img, video { max-width: 100%; }
button, input, select, textarea { font-family: Arial, Helvetica, sans-serif; }
a, button, summary { -webkit-tap-highlight-color: rgba(7, 56, 77, .12); touch-action: manipulation; }
[hidden] { display: none !important; }
dialog:not([open]) { display: none; }
dialog[open] { display: block; }

/* Static colour values remain active when CSS custom properties are unavailable. */
.announcement, .button, .promise, .location, .menu-modal-footer { background: #07384d; }
.site-header, .dish-card, .menu-product, .menu-extras-panel { background: #f8edd7; }
.popular, .about, .order-cta, .minimal-footer, .menu-dialog, .menu-modal-shell, .menu-modal-header { background: #fff7e8; }
.hero-visual, .dish-image { background: #d8c49a; }
.eyebrow, .dish-price strong, .menu-product-heading strong, .menu-extras-grid strong { color: #07384d; }
.fresh-stamp, .location-call:before { background: #d8c49a; color: #07384d; }
.opening-status { color: #07384d; background: rgba(238, 248, 240, .96); }
.opening-status.is-closed { background: rgba(255, 241, 238, .96); }
.opening-status i { background: #3c8f63; }
.opening-status.is-closed i { background: #c43b3b; }

/* Values preceding clamp(), min() and dynamic viewport units. */
.site-header { position: relative; position: -webkit-sticky; top: 0; padding: 8px 5vw; }
.desktop-nav { width: 50vw; }
.header-actions { transform: translateX(24px); }
.hero { height: calc(100vh - 154px); }
.hero-copy { padding: 46px 5vw; }
.hero h1 { font-size: 72px; }
.hero-lead { font-size: 18px; }
.section { padding: 100px 6vw; }
.section h2 { font-size: 82px; }
.promise { padding: 100px 6vw; }
.promise h2 { font-size: 82px; }
.about-copy { padding: 56px; }
.about-copy h2 { font-size: 54px; }
.location { padding: 80px 6vw; }
.location h2 { font-size: 76px; }
.order-cta { padding: 120px 22px; }
.order-cta h2 { font-size: 110px; }
.minimal-footer { padding: 14px 6vw; }
.menu-dialog { width: calc(100% - 28px); height: calc(100vh - 28px); }
.menu-modal-top { padding: 20px 4vw 16px; }
.menu-modal-brand h2 { font-size: 54px; }
.menu-filters { padding: 2px 4vw 17px; }
.menu-modal-content { padding: 56px 4vw 42px; }
.menu-extras-panel { padding: 38px; }
.about-image { min-height: 520px; }

/* Flexbox layout is used only when CSS Grid is unavailable. */
@supports not (display: grid) {
  .site-header { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; }
  .logo { margin-right: auto; }
  .desktop-nav { margin-right: auto; margin-left: auto; }
  .header-actions { margin-left: auto; }
  .language-options button { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; }
  .language-options button > span:nth-child(2) { -webkit-flex: 1; flex: 1; margin: 0 12px; }
  .hero, .popular-grid, .promise, .about, .location, .menu-catalog, .menu-modal-intro, .menu-extras-panel { display: -webkit-flex; display: flex; }
  .hero-copy { width: 42%; }
  .hero-visual { width: 58%; }
  .popular-grid, .menu-catalog { -webkit-flex-wrap: wrap; flex-wrap: wrap; }
  .popular-grid > *, .menu-catalog > .menu-product { width: 32%; margin: 0 .65% 20px; }
  .promise > :first-child { width: 42%; margin-right: 6%; }
  .promise-items { width: 52%; }
  .promise-items > div { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; }
  .promise-items > div span { width: 48px; -webkit-flex: 0 0 auto; flex: 0 0 auto; }
  .promise-items > div strong { width: 32%; margin: 0 26px; -webkit-flex: 0 0 auto; flex: 0 0 auto; }
  .promise-items > div p { -webkit-flex: 1; flex: 1; }
  .about-image, .about-copy { width: 50%; }
  .location-card { width: 54%; margin-right: 4%; }
  .location-visual { width: 42%; }
  .menu-modal-intro { -webkit-justify-content: space-between; justify-content: space-between; }
  .menu-extras-heading { width: 34%; margin-right: 5%; }
  .menu-extras-grid { width: 61%; }
  .menu-product-sizes { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; }
  .menu-product-sizes span { width: 48%; margin: 0 1% 7px; }
  .menu-product-sizes span:only-child { width: 100%; }
}

.menu-dialog.is-legacy-dialog {
  position: fixed; z-index: 9999; top: 14px; right: 14px; bottom: 14px; left: 14px;
  width: auto; height: auto; max-width: none; max-height: none; margin: 0;
}
html.legacy-dialog-mode body.menu-modal-open:before {
  position: fixed; z-index: 9998; top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(3, 24, 34, .76); content: "";
}

@media (max-width: 1120px) {
  @supports not (display: grid) {
    .menu-catalog > .menu-product { width: 48%; margin-right: 1%; margin-left: 1%; }
    .promise { -webkit-flex-direction: column; flex-direction: column; }
    .promise > :first-child, .promise-items { width: 100%; margin-right: 0; }
  }
}

@media (max-width: 900px) {
  .header-actions { transform: none; }
  .hero { height: auto; }
  .about-image { min-height: 440px; }
  @supports not (display: grid) {
    .hero, .about, .location, .menu-modal-intro, .menu-extras-panel { -webkit-flex-direction: column; flex-direction: column; }
    .hero-copy, .hero-visual, .about-image, .about-copy, .location-card, .location-visual,
    .menu-extras-heading, .menu-extras-grid { width: 100%; margin-right: 0; }
    .popular-grid > * { width: 100%; margin-right: 0; margin-left: 0; }
  }
}

@media (max-width: 600px) {
  .site-header { padding: 6px 18px; }
  .hero-copy { padding: 62px 20px 50px; }
  .hero h1 { font-size: 54px; }
  .section, .promise { padding: 76px 22px; }
  .section h2, .promise h2 { font-size: 58px; }
  .about-image { min-height: 320px; }
  .about-copy { padding: 52px 22px; }
  .about-copy h2 { font-size: 44px; }
  .location { padding: 58px 22px; }
  .location h2 { font-size: 58px; }
  .order-cta { padding: 86px 22px; }
  .order-cta h2 { font-size: 64px; }
  .menu-dialog, .menu-dialog.is-legacy-dialog { top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100vh; }
  .menu-modal-content { padding: 30px 16px 24px; }
  .menu-catalog > .menu-product { width: 100%; margin-right: 0; margin-left: 0; }
}

@media (max-width: 900px) and (orientation: landscape) {
  .hero-copy { min-height: auto; }
  .hero-visual, .hero-visual video { min-height: 420px; }
}