:root {
  --color-brand: #ef4d48;
  --color-brand-dark: #d90700;
  --color-ink: #2b161b;
  --color-muted: #453e3e;
  --color-bg: #f7f3f5;
  --color-white: #ffffff;
  --color-orange: #ff5300;
  --container: 1240px;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Lato", sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--color-muted);
  background: var(--color-bg);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Abril Fatface", serif;
  font-weight: 400;
  color: var(--color-ink);
  margin: 0 0 0.7rem;
  line-height: 1.15;
}

h1 {
  font-size: clamp(2.5rem, 6vw, 5.9rem);
}

h2 {
  font-size: clamp(1.8rem, 3vw, 2.65rem);
}

h3 {
  font-size: clamp(1.4rem, 2.2vw, 1.76rem);
}

h4 {
  font-family: "Montserrat", sans-serif;
  font-size: 1.41rem;
}

h6 {
  font-family: "Montserrat", sans-serif;
  font-size: 1rem;
  font-weight: 600;
}

p {
  margin: 0 0 1rem;
}

.screen-reader-text,
.skip-link {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link:focus {
  top: 0.5rem;
  left: 0.5rem;
  z-index: 100;
  width: auto;
  height: auto;
  padding: 0.75rem 1rem;
  clip: auto;
  background: var(--color-white);
  color: var(--color-ink);
}

.container {
  width: min(var(--container), 92vw);
  margin: 0 auto;
}

.section {
  position: relative;
}

.divider {
  margin: 0 auto 1rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 17px 35px;
  border-radius: 50px;
  border: 0;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn-primary {
  background: var(--color-brand);
  color: var(--color-white);
}

.btn-primary:hover,
.btn-primary:focus {
  background: var(--color-brand-dark);
  color: var(--color-white);
}

.btn-outline {
  background: transparent;
  color: var(--color-white);
  border: 1px solid var(--color-white);
}

.btn-outline:hover,
.btn-outline:focus {
  background: var(--color-brand);
  border-color: var(--color-brand);
  color: var(--color-bg);
}

.btn-sm {
  padding: 12px 28px;
  font-size: 14px;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-white);
  min-height: 70px;
}

.header-inner {
  width: min(var(--container), 92vw);
  margin: 0 auto;
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.logo-link img {
  width: 134px;
  height: auto;
}

.menu-toggle {
  display: none;
  width: 42px;
  height: 38px;
  border: 0;
  border-radius: 2px;
  background: var(--color-brand);
  color: var(--color-bg);
  cursor: pointer;
}

.menu-toggle-icon,
.menu-toggle-icon::before,
.menu-toggle-icon::after {
  display: block;
  width: 20px;
  height: 2px;
  margin: 0 auto;
  background: currentColor;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.menu-toggle-icon {
  position: relative;
}

.menu-toggle-icon::before,
.menu-toggle-icon::after {
  content: "";
  position: absolute;
  left: 0;
}

.menu-toggle-icon::before {
  top: -6px;
}

.menu-toggle-icon::after {
  top: 6px;
}

.menu-toggle[aria-expanded="true"] .menu-toggle-icon {
  background: transparent;
}

.menu-toggle[aria-expanded="true"] .menu-toggle-icon::before {
  transform: translateY(6px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle-icon::after {
  transform: translateY(-6px) rotate(-45deg);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1.2rem;
}

.site-nav a {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  color: var(--color-muted);
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--color-brand-dark);
}

.header-order {
  margin-left: 0.4rem;
}

.hero {
  position: relative;
  min-height: 60vh;
  padding: 150px 0;
  display: grid;
  place-items: center;
  background:
    linear-gradient(rgba(43, 22, 27, 0.5), rgba(43, 22, 27, 0.5)),
    url("assets/images/Pho46.jpg") center / cover no-repeat;
  color: var(--color-white);
  text-align: center;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(43, 22, 27, 0.5);
}

.hero-content {
  position: relative;
  z-index: 1;
  width: min(760px, 92vw);
}

.hero-eyebrow {
  margin: 0 0 -0.2rem;
  font-family: "Montserrat", sans-serif;
  font-size: 1rem;
  color: var(--color-brand);
}

.hero-title {
  margin-bottom: 2.5rem;
  color: var(--color-orange);
  font-family: "Aclonica", sans-serif;
  text-shadow: 33px 17px 16px rgba(0, 0, 0, 1);
}

.hero-phone {
  margin: 0 0 2.5rem;
  font-family: "Acme", sans-serif;
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1;
}

.hero-phone a {
  color: var(--color-orange);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.shape {
  position: absolute;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  pointer-events: none;
}

.shape svg {
  display: block;
  width: calc(40% + 1.3px);
  height: 50px;
  margin: 0 auto;
}

.shape-bottom {
  bottom: -1px;
}

.shape-top {
  top: -1px;
  transform: rotate(180deg);
}

.shape-bottom svg path,
.shape-top svg path {
  fill: var(--color-white);
}

.story {
  margin-top: -2px;
  padding: 80px 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.77), rgba(255, 255, 255, 0.77)),
    url("assets/images/Grill-food-banner.jpg") center / cover no-repeat;
}

.story-grid {
  display: grid;
  gap: 2rem;
  align-items: center;
}

.story-copy {
  text-align: center;
}

.story-logo {
  width: 50px;
  margin: 0 auto 1rem;
}

.story-note {
  margin-top: 2rem;
  color: transparent;
  user-select: none;
}

.story-image img {
  margin: 0 auto;
  box-shadow: 0 50px 50px -50px rgba(84, 89, 95, 0.5);
}

.story-image-side img {
  width: 300px;
}

.press {
  padding: 0 0 80px;
  margin-top: -2px;
}

.press-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
  align-items: center;
}

.press-grid img {
  margin: 0 auto;
  filter: grayscale(1);
  transition: filter 0.3s ease;
}

.press-grid img:hover {
  filter: none;
}

.press-grid img:first-child {
  width: 63%;
}

.press-grid img:not(:first-child) {
  width: 75%;
}

.featured {
  padding: 80px 0 40px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85)),
    url("assets/images/blackboard-bg-free-img.png") center / cover no-repeat;
}

.featured-head {
  text-align: center;
}

.menu {
  padding: 0 0 80px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85)),
    url("assets/images/blackboard-bg-free-img.png") center / cover no-repeat;
}

.menu-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem 3rem;
}

.menu-item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: center;
}

.menu-item-reverse {
  direction: rtl;
}

.menu-item-reverse > * {
  direction: ltr;
}

.menu-item-copy h4 {
  margin-bottom: 0;
  color: var(--color-brand);
}

.menu-item img {
  width: min(100%, 350px);
  margin: 0 auto;
}

.hours {
  padding: 80px 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)),
    url("assets/images/party-group-of-people.jpg") center / cover no-repeat;
}

.hours-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
  align-items: center;
}

.hours-divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.hours-divider .line {
  height: 1px;
  background: #0c0d0e;
}

.hours-divider img {
  width: 100px;
}

.hours-map iframe {
  width: 100%;
  height: 300px;
  border: 0;
}

.hours-copy {
  text-align: center;
}

.hours-label {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  color: var(--color-ink);
}

.testimonials {
  padding: 80px 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.92)),
    url("assets/images/food-pattern-free-img.png") repeat;
}

.testimonials-head {
  text-align: center;
  margin-bottom: 2rem;
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
}

.testimonial {
  margin: 0;
  text-align: center;
}

.testimonial p {
  font-size: 1.3em;
  margin-bottom: 1.25rem;
  color: var(--color-ink);
}

.testimonial footer {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
}

.testimonial img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
}

.testimonial cite {
  font-style: normal;
  font-weight: 700;
  color: var(--color-ink);
}

.site-footer {
  color: var(--color-white);
  background:
    linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)),
    url("assets/images/hotel-diner-dining.jpg") center / cover no-repeat;
}

.footer-cta {
  padding: 6% 4% 4%;
  text-align: center;
}

.footer-cta h2 {
  color: var(--color-white);
}

.footer-cta p {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  color: #f7eee1;
}

.footer-phone {
  margin-top: 1rem;
  font-size: 1.4rem;
}

.footer-phone a {
  color: var(--color-white);
}

.social-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

.social-link {
  width: 38px;
  height: 38px;
  border-radius: 4px;
  background: var(--color-bg);
  position: relative;
}

.social-link::after {
  content: "";
  position: absolute;
  inset: 10px;
  background: currentColor;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}

.social-facebook {
  color: #557dbc;
}

.social-facebook::after {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M400 32H48A48 48 0 0 0 0 80v352a48 48 0 0 0 48 48h137.25V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.27c-30.81 0-40.42 19.12-40.42 38.73V256h68.78l-11 71.69h-57.78V480H400a48 48 0 0 0 48-48V80a48 48 0 0 0-48-48z'/%3E%3C/svg%3E");
}

.social-twitter {
  color: #7acdee;
}

.social-twitter::after {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z'/%3E%3C/svg%3E");
}

.social-instagram {
  color: #8a3ab9;
}

.social-instagram::after {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M224,202.66A53.34,53.34,0,1,0,277.36,256,53.38,53.38,0,0,0,224,202.66Zm124.71-41a54,54,0,0,0-30.41-30.41c-21-8.29-71-6.43-94.3-6.43s-73.25-1.93-94.31,6.43a54,54,0,0,0-30.41,30.41c-8.28,21-6.43,71.05-6.43,94.33S91,329.26,99.32,350.33a54,54,0,0,0,30.41,30.41c21,8.29,71,6.43,94.31,6.43s73.24,1.93,94.3-6.43a54,54,0,0,0,30.41-30.41c8.35-21,6.43-71.05,6.43-94.33S357.1,182.74,348.75,161.67ZM224,338a82,82,0,1,1,82-82A81.9,81.9,0,0,1,224,338Zm85.38-148.3a19.14,19.14,0,1,1,19.13-19.14A19.1,19.1,0,0,1,309.42,189.74ZM400,32H48A48,48,0,0,0,0,80V432a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V80A48,48,0,0,0,400,32Z'/%3E%3C/svg%3E");
}

.social-google {
  color: #dc4e41;
}

.social-google::after {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28'%3E%3Cpath d='M12 12.281h11.328c.109.609.187 1.203.187 2C23.515 21.125 18.921 26 11.999 26c-6.641 0-12-5.359-12-12s5.359-12 12-12c3.234 0 5.953 1.188 8.047 3.141L16.78 8.282c-.891-.859-2.453-1.859-4.781-1.859-4.094 0-7.438 3.391-7.438 7.578s3.344 7.578 7.438 7.578c4.75 0 6.531-3.406 6.813-5.172h-6.813v-4.125z'/%3E%3C/svg%3E");
}

.social-yelp {
  color: #af0606;
}

.social-yelp::after {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M42.9 240.32l99.62 48.61c19.2 9.4 16.2 37.51-4.5 42.71L30.5 358.45a22.79 22.79 0 0 1-28.21-19.6 197.16 197.16 0 0 1 9-85.32 22.8 22.8 0 0 1 31.61-13.21z'/%3E%3C/svg%3E");
}

.footer-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  padding: 20px 4% 2%;
  color: #aaaaaa;
  font-size: 0.95rem;
}

.footer-bottom p:last-child {
  text-align: right;
}

@media (min-width: 921px) {
  .story-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media (max-width: 920px) {
  .site-header {
    overflow: hidden;
  }

  .menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .site-nav {
    position: fixed;
    top: 70px;
    left: 0;
    right: 0;
    z-index: 40;
    background: var(--color-white);
    border-bottom: 1px solid #dddddd;
    padding: 1rem;
    flex-direction: column;
    align-items: stretch;
    transform: translateY(calc(-100% - 70px));
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.22s ease, visibility 0.22s ease;
  }

  .site-nav.open {
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
  }

  .site-nav ul {
    flex-direction: column;
  }

  .header-order {
    margin-left: 0;
    align-self: flex-start;
  }

  .hero {
    padding: 100px 0 120px;
  }

  .press-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .menu-grid,
  .hours-grid {
    grid-template-columns: 1fr;
  }

  .menu-item,
  .menu-item-reverse {
    direction: ltr;
  }

  .testimonials-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-bottom {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .footer-bottom p:last-child {
    text-align: center;
  }
}

@media (max-width: 544px) {
  .logo-link img {
    width: 86px;
  }

  .hero-title {
    text-shadow: 12px 8px 10px rgba(0, 0, 0, 1);
  }

  .press-grid,
  .testimonials-grid {
    grid-template-columns: 1fr;
  }

  .hero-actions {
    flex-direction: column;
    align-items: center;
  }
}