:root {
  --accent: #ffb000;
  --accent2: #f08c00;
  --bg: #fff7e8;
  --ink: #321d12;
  --muted: #7c6658;
  --line: rgba(50, 29, 18, 0.14);
  --white: #fffdf8;
  --danger: #8e1d2c;
  --radius: 24px;
  --shadow: 0 22px 70px rgba(50, 29, 18, 0.12);
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "DM Sans", sans-serif;
  overflow-x: hidden;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input,
select,
textarea {
  font: inherit;
}
img {
  max-width: 100%;
  display: block;
}
main {
  min-height: 60vh;
}
.site-header {
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5vw;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 247, 232, 0.9);
  backdrop-filter: blur(18px);
  position: sticky;
  top: 0;
  z-index: 50;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font: 800 14px "Manrope";
  letter-spacing: 0.12em;
}
.brand img {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 50%;
}
.site-nav {
  display: flex;
  gap: 28px;
  font-size: 14px;
}
.site-nav a {
  opacity: 0.62;
  position: relative;
}
.site-nav a:hover,
.site-nav a.active {
  opacity: 1;
}
.site-nav a.active:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -10px;
  height: 2px;
  background: var(--accent);
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cart-link {
  font-size: 14px;
  font-weight: 700;
}
.cart-link b {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border-radius: 99px;
  background: var(--ink);
  color: var(--bg);
  font-size: 11px;
}
.nav-cta,
.primary,
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--accent);
  color: #15100c;
  padding: 14px 22px;
  border-radius: 99px;
  font-weight: 800;
  border: 0;
  cursor: pointer;
  transition: 0.25s;
}
.nav-cta:hover,
.primary:hover,
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(240, 140, 0, 0.25);
}
.secondary,
.text-link {
  display: inline-block;
  border-bottom: 1px solid currentColor;
  padding-bottom: 4px;
  font-weight: 700;
}
.menu-toggle {
  display: none;
  background: none;
  border: 0;
  font-size: 24px;
  color: inherit;
}
.hero {
  min-height: calc(100vh - 88px);
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  padding: 6vw 5vw;
  gap: 4vw;
  position: relative;
  overflow: hidden;
}
.eyebrow {
  font: 700 11px "Manrope";
  letter-spacing: 0.18em;
}
.hero h1,
.page-hero h1 {
  font: 800 clamp(58px, 8vw, 126px) / 0.88 "Manrope";
  letter-spacing: -0.07em;
  margin: 22px 0 26px;
}
.hero-copy > p {
  font-size: 18px;
  line-height: 1.75;
  max-width: 590px;
  color: var(--muted);
}
.actions {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 36px;
}
.hero-visual {
  position: relative;
  height: min(680px, 70vh);
}
.hero-visual > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 260px 260px 24px 24px;
  position: relative;
  z-index: 1;
}
.orb {
  position: absolute;
  width: 80%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--accent);
  right: -10%;
  top: -8%;
}
.floating {
  position: absolute;
  z-index: 2;
  right: -2%;
  bottom: 10%;
  background: rgba(255, 247, 232, 0.8);
  backdrop-filter: blur(18px);
  border: 1px solid var(--line);
  padding: 20px 24px;
  border-radius: 20px;
  display: grid;
  gap: 4px;
  box-shadow: var(--shadow);
}
.floating span {
  font-size: 12px;
  color: var(--muted);
}
.scroll {
  position: absolute;
  bottom: 28px;
  left: 5vw;
  font-size: 10px;
  letter-spacing: 0.2em;
  display: flex;
  gap: 12px;
}
.ticker {
  overflow: hidden;
  display: flex;
  background: var(--accent);
  color: #111;
  font: 800 16px "Manrope";
  padding: 18px 0;
  white-space: nowrap;
}
.ticker div {
  animation: marquee 18s linear infinite;
}
@keyframes marquee {
  to {
    transform: translateX(-100%);
  }
}
h1,
h2,
h3,
p {
  margin-top: 0;
}
h2 {
  font: 800 clamp(42px, 5vw, 76px) / 1 "Manrope";
  letter-spacing: -0.055em;
  margin: 18px 0;
}
.split-section,
.featured,
.visit,
.about-intro,
.values,
.about-cta {
  padding: 110px 5vw;
}
.story {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  border-bottom: 1px solid var(--line);
}
.lead,
.prose p {
  font-size: 19px;
  line-height: 1.75;
  color: var(--muted);
}
.stats {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
}
.stats div {
  padding: 32px 0;
  display: grid;
  border-right: 1px solid var(--line);
}
.stats div:last-child {
  border-right: 0;
}
.stats b {
  font: 800 36px "Manrope";
}
.stats span {
  color: var(--muted);
}
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-bottom: 50px;
  gap: 30px;
}
.dish-grid,
.menu-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.dish-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 22px;
  align-items: start;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 24px;
  transition: 0.25s;
  background: rgba(255, 255, 255, 0.18);
}
.dish-card:hover {
  transform: translateY(-5px);
  background: rgba(255, 176, 0, 0.08);
  box-shadow: 0 16px 40px rgba(50, 29, 18, 0.08);
}
.dish-no {
  font: 700 11px "Manrope";
  opacity: 0.45;
}
.dish-card small {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 9px;
  color: var(--muted);
  margin-bottom: 7px;
}
.dish-card h3 {
  font: 800 20px "Manrope";
  margin-bottom: 7px;
}
.dish-card p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
}
.dish-card strong {
  font: 800 18px "Manrope";
  white-space: nowrap;
}
.experience {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 720px;
  background: var(--ink);
  color: var(--bg);
}
.experience-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.experience-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8vw;
}
.experience-copy p {
  color: rgba(255, 247, 232, 0.68);
  font-size: 18px;
  line-height: 1.7;
}
.visit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
}
.visit-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.visit-info p {
  line-height: 1.7;
  color: var(--muted);
}
.visit-info b {
  color: var(--ink);
}
.page-hero {
  text-align: center;
  padding: 110px 5vw 70px;
  border-bottom: 1px solid var(--line);
}
.page-hero.compact h1 {
  font-size: clamp(54px, 7vw, 100px);
}
.page-hero p {
  max-width: 680px;
  margin: 0 auto;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.7;
}
.about-hero em {
  font-family: "Playfair Display", serif;
  font-weight: 700;
}
.menu-section {
  padding: 45px 5vw 110px;
}
.filters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 38px;
}
.sticky-filters {
  position: sticky;
  top: 88px;
  z-index: 20;
  padding: 14px 0;
  background: rgba(255, 247, 232, 0.95);
  backdrop-filter: blur(16px);
}
.filter {
  padding: 11px 16px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink);
  cursor: pointer;
  font-weight: 700;
}
.filter.active,
.filter:hover {
  background: var(--ink);
  color: var(--bg);
}
.order-card .addBtn {
  margin-top: 18px;
}
.addBtn {
  background: var(--accent);
  color: #18100b;
  border: 0;
  border-radius: 999px;
  padding: 10px 15px;
  font-weight: 800;
  cursor: pointer;
}
.about-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
}
.manifesto {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 0 5vw 110px;
  gap: 16px;
}
.manifesto-card {
  padding: 34px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.manifesto-card span {
  font: 800 12px "Manrope";
  opacity: 0.45;
}
.manifesto-card h3 {
  font: 800 25px "Manrope";
  margin: 40px 0 12px;
}
.manifesto-card p,
.values-grid p {
  color: var(--muted);
  line-height: 1.65;
}
.about-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--ink);
  color: var(--bg);
}
.about-feature > div:first-child img {
  width: 100%;
  height: 100%;
  min-height: 680px;
  object-fit: cover;
}
.about-feature > div:last-child {
  padding: 8vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.about-feature p {
  color: rgba(255, 247, 232, 0.7);
  font-size: 18px;
  line-height: 1.7;
}
.values-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.values-grid article {
  border-top: 1px solid var(--line);
  padding: 28px 0;
}
.values-grid b {
  font: 800 24px "Manrope";
}
.about-cta {
  text-align: center;
  background: var(--accent);
}
.about-cta .actions {
  justify-content: center;
}
.about-cta .primary {
  background: var(--ink);
  color: var(--bg);
}
.form-layout {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 70px;
  padding: 80px 5vw 120px;
  max-width: 1400px;
  margin: auto;
}
.form-intro {
  padding-top: 20px;
}
.form-intro h2 {
  font-size: clamp(40px, 5vw, 66px);
}
.form-intro > p {
  color: var(--muted);
  line-height: 1.7;
}
.contact-details {
  margin: 35px 0;
}
.contact-details p {
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  line-height: 1.65;
}
.formBox,
.card {
  background: rgba(255, 255, 255, 0.48);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 34px;
  box-shadow: var(--shadow);
}
form {
  display: grid;
  gap: 16px;
}
label {
  display: block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 7px;
}
input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--white);
  border-radius: 14px;
  padding: 14px 15px;
  color: var(--ink);
  outline: none;
}
input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent2);
  box-shadow: 0 0 0 3px rgba(255, 176, 0, 0.12);
}
textarea {
  resize: vertical;
}
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.form-submit {
  margin-top: 8px;
}
.section {
  padding: 80px 5vw 110px;
  max-width: 1300px;
  margin: auto;
}
.title {
  font: 800 clamp(48px, 7vw, 96px) / 0.95 "Manrope";
  letter-spacing: -0.06em;
}
.two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.muted {
  color: var(--muted);
  line-height: 1.7;
}
.btn.alt {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink);
}
.cartTable {
  width: 100%;
  border-collapse: collapse;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 18px;
  overflow: hidden;
}
.cartTable th,
.cartTable td {
  padding: 16px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}
.qty {
  max-width: 80px;
}
.cartActions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}
.cartSummary {
  margin-top: 24px;
  text-align: right;
}
.site-footer {
  background: var(--ink);
  color: var(--bg);
  padding: 70px 5vw 25px;
}
.footer-top {
  display: grid;
  grid-template-columns: 1.1fr 0.8fr 1fr;
  gap: 55px;
  padding-bottom: 55px;
}
.footer-brand {
  font: 800 clamp(36px, 5vw, 70px) "Manrope";
  letter-spacing: -0.06em;
}
.site-footer p,
.site-footer span,
.site-footer a {
  color: rgba(255, 247, 232, 0.72);
}
.footer-links,
.footer-contact {
  display: grid;
  align-content: start;
  gap: 13px;
}
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-size: 15px;
}
.toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  background: var(--ink);
  color: var(--bg);
  padding: 15px 20px;
  border-radius: 14px;
  transform: translateY(120px);
  opacity: 0;
  transition: 0.3s;
  z-index: 100;
  box-shadow: var(--shadow);
}
.toast.show {
  transform: translateY(0);
  opacity: 1;
}
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s, transform 0.8s;
}
.reveal.visible {
  opacity: 1;
  transform: none;
}
@media (max-width: 980px) {
  .site-nav {
    position: fixed;
    inset: 88px 0 auto 0;
    background: var(--bg);
    padding: 28px 5vw;
    display: none;
    flex-direction: column;
    border-bottom: 1px solid var(--line);
  }
  .nav-open .site-nav {
    display: flex;
  }
  .menu-toggle {
    display: block;
  }
  .header-actions .nav-cta {
    display: none;
  }
  .hero {
    grid-template-columns: 1fr;
    padding-top: 70px;
  }
  .hero-visual {
    height: 560px;
  }
  .scroll {
    display: none;
  }
  .story,
  .about-intro,
  .visit,
  .form-layout {
    grid-template-columns: 1fr;
  }
  .dish-grid,
  .menu-list {
    grid-template-columns: 1fr;
  }
  .experience,
  .about-feature {
    grid-template-columns: 1fr;
  }
  .experience-image,
  .about-feature > div:first-child {
    height: 560px;
  }
  .manifesto {
    grid-template-columns: 1fr;
  }
  .footer-top {
    grid-template-columns: 1fr 1fr;
  }
  .footer-top > div:first-child {
    grid-column: 1/-1;
  }
  .grid {
    grid-template-columns: 1fr;
  }
  .two {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  .site-header {
    height: 76px;
    padding: 0 20px;
  }
  .brand span {
    font-size: 11px;
  }
  .brand img {
    width: 38px;
    height: 38px;
  }
  .site-nav {
    inset: 76px 0 auto;
  }
  .hero {
    min-height: auto;
    padding: 70px 20px 80px;
  }
  .hero h1,
  .page-hero h1 {
    font-size: 54px;
  }
  .hero-visual {
    height: 430px;
  }
  .hero-visual > img {
    border-radius: 180px 180px 20px 20px;
  }
  .floating {
    right: 0;
  }
  .split-section,
  .featured,
  .visit,
  .about-intro,
  .values,
  .about-cta {
    padding: 75px 20px;
  }
  .stats {
    grid-template-columns: 1fr;
  }
  .stats div {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .section-head {
    align-items: start;
    flex-direction: column;
  }
  .experience-image,
  .about-feature > div:first-child {
    height: 430px;
  }
  .experience-copy,
  .about-feature > div:last-child {
    padding: 75px 20px;
  }
  .page-hero {
    padding: 80px 20px 55px;
  }
  .menu-section {
    padding: 25px 20px 80px;
  }
  .sticky-filters {
    top: 76px;
  }
  .dish-card {
    grid-template-columns: auto 1fr;
    padding: 20px;
  }
  .dish-card strong {
    grid-column: 2;
  }
  .manifesto {
    padding: 0 20px 75px;
  }
  .form-layout {
    padding: 55px 20px 80px;
    gap: 30px;
  }
  .formBox {
    padding: 22px;
  }
  .field-row {
    grid-template-columns: 1fr;
  }
  .visit-info,
  .values-grid {
    grid-template-columns: 1fr;
  }
  .footer-top {
    grid-template-columns: 1fr;
  }
  .footer-top > div:first-child {
    grid-column: auto;
  }
  .footer-bottom {
    flex-direction: column;
  }
  .cartTable {
    display: block;
    overflow-x: auto;
  }
  .section {
    padding: 55px 20px 80px;
  }
  .header-actions {
    gap: 6px;
  }
  .cart-link {
    font-size: 12px;
  }
}
/* Royal Ember concept */
:root {
  --accent: #dca24d;
  --accent2: #b87726;
  --bg: #0b0908;
  --ink: #f5ecdd;
  --muted: #b6a897;
  --line: rgba(255, 255, 255, 0.14);
  --white: #17110d;
  --danger: #9b2837;
  --radius: 2px;
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
}
body {
  background: var(--bg);
  color: var(--ink);
}
.site-header {
  background: rgba(11, 9, 8, 0.88);
  border-color: var(--line);
  color: var(--ink);
}
.brand img {
  border: 1px solid rgba(220, 162, 77, 0.45);
}
.site-nav a.active:after {
  background: var(--accent);
}
.nav-cta,
.primary,
.btn,
.addBtn {
  background: var(--accent);
  color: #1a1108;
  border-radius: 999px;
}
.secondary,
.text-link {
  color: var(--ink);
}
.cart-link b {
  background: var(--accent);
  color: #1a1108;
}
.royal-hero {
  min-height: calc(100vh - 88px);
  display: flex;
  align-items: center;
  padding: 130px 7vw 90px;
  background: linear-gradient(
      90deg,
      rgba(8, 6, 5, 0.96),
      rgba(8, 6, 5, 0.7) 48%,
      rgba(8, 6, 5, 0.18)
    ),
    url("hero-food.webp") center/cover;
  position: relative;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 70% 35%,
    rgba(220, 162, 77, 0.08),
    transparent 30%
  );
}
.royal-hero .hero-copy {
  position: relative;
  z-index: 2;
  max-width: 780px;
}
.royal-hero h1 {
  font: 600 clamp(70px, 10vw, 150px) / 0.82 "Playfair Display", serif;
  letter-spacing: -0.055em;
  margin: 24px 0;
}
.royal-hero h1 em {
  color: var(--accent);
  font-weight: 600;
}
.royal-hero .hero-copy > p {
  color: #d8ccbd;
  max-width: 570px;
}
.hero-hours {
  position: absolute;
  z-index: 2;
  right: 5vw;
  bottom: 5vw;
  background: var(--ink);
  color: #18100a;
  padding: 24px 30px;
  min-width: 250px;
}
.hero-hours span,
.hero-hours small {
  display: block;
  color: #6a5b4b;
}
.hero-hours b {
  display: block;
  font: 600 24px "Playfair Display";
  margin: 7px 0;
}
.eyebrow {
  color: var(--accent);
}
h2,
.title {
  font-family: "Playfair Display", serif;
  font-weight: 600;
  letter-spacing: -0.035em;
}
.split-section,
.featured,
.visit,
.about-intro,
.values {
  background: var(--bg);
}
.lead,
.prose p,
.dish-card p,
.values-grid p,
.visit-info p {
  color: var(--muted);
}
.stats {
  border-color: var(--line);
}
.stats div {
  border-color: var(--line);
}
.stats b {
  font-family: "Playfair Display", serif;
  color: var(--accent);
}
.royal-features {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  grid-template-rows: 380px 300px;
  gap: 14px;
  padding: 0 5vw 120px;
}
.royal-feature {
  position: relative;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  padding: 34px;
  overflow: hidden;
}
.royal-feature:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));
}
.royal-feature > div {
  position: relative;
  z-index: 1;
}
.royal-feature span {
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 11px;
}
.royal-feature h3 {
  font: 600 38px "Playfair Display";
  margin: 8px 0;
}
.royal-feature p {
  color: #d0c1b1;
}
.royal-large {
  grid-row: span 2;
  background-image: url("hero-food2.webp");
}
.royal-second {
  background-image: url("hero-food.webp");
}
.royal-dark {
  background: #741d28;
}
.royal-dark a {
  color: var(--accent);
}
.dish-card {
  border-radius: 0;
  background: rgba(255, 255, 255, 0.025);
}
.dish-card:hover {
  background: rgba(220, 162, 77, 0.07);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
}
.dish-card small,
.dish-card strong {
  color: var(--accent);
}
.experience {
  background: #15100d;
}
.visit .primary {
  margin-top: 20px;
}
.page-hero {
  border-color: var(--line);
}
.page-hero h1 {
  font-family: "Playfair Display", serif;
  font-weight: 600;
  letter-spacing: -0.045em;
}
.page-hero p {
  color: var(--muted);
}
.royal-about-hero {
  padding: 150px 5vw 100px;
  background: linear-gradient(rgba(8, 6, 5, 0.7), rgba(8, 6, 5, 0.93)),
    url("hero-food.webp") center/cover;
}
.royal-about-hero h1 {
  font-size: clamp(68px, 9vw, 136px);
}
.royal-about-hero em {
  color: var(--accent);
}
.prose strong {
  color: var(--ink);
}
.timeline {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  margin: 0 5vw 120px;
  border: 1px solid var(--line);
}
.timeline article {
  background: var(--bg);
  padding: 42px;
}
.timeline article > span {
  font: 600 56px "Playfair Display";
  color: var(--accent);
}
.timeline small {
  display: block;
  color: var(--accent);
  letter-spacing: 0.18em;
  margin: 24px 0 12px;
}
.timeline h3 {
  font: 600 29px "Playfair Display";
  margin-bottom: 14px;
}
.timeline p {
  color: var(--muted);
  line-height: 1.7;
}
.manifesto-card,
.values-grid article,
.formBox,
.card,
.cartTable {
  background: rgba(255, 255, 255, 0.025);
  border-color: var(--line);
  box-shadow: none;
}
.about-feature {
  background: #15100d;
}
.about-cta {
  background: var(--accent);
  color: #18100a;
}
.about-cta .eyebrow {
  color: #6b3c0a;
}
.about-cta p {
  max-width: 650px;
  margin: 0 auto;
  color: #50310f;
}
.about-cta .primary {
  background: #18100a;
  color: var(--ink);
}
.about-cta .secondary {
  color: #18100a;
}
.chef-quote {
  padding: 120px 10vw;
  text-align: center;
  background: #741d28;
}
.chef-quote > span {
  font: 600 100px "Playfair Display";
  color: var(--accent);
  height: 65px;
  display: block;
}
.chef-quote blockquote {
  font: 600 clamp(32px, 4vw, 60px) / 1.25 "Playfair Display";
  max-width: 1100px;
  margin: 0 auto 32px;
}
.chef-quote small {
  letter-spacing: 0.18em;
  color: #ddc9bb;
}
.sticky-filters {
  background: rgba(11, 9, 8, 0.95);
}
.filter {
  color: var(--ink);
  border-color: var(--line);
}
.filter.active,
.filter:hover {
  background: var(--accent);
  color: #1a1108;
}
.formBox input,
.formBox select,
.formBox textarea,
input,
select,
textarea {
  background: #17110d;
  color: var(--ink);
  border-color: var(--line);
}
.site-footer {
  background: #050403;
}
.footer-brand {
  font-family: "Playfair Display", serif;
  letter-spacing: -0.03em;
}
.muted {
  color: var(--muted);
}
.btn.alt {
  color: var(--ink);
  border-color: var(--line);
}
@media (max-width: 980px) {
  .royal-features {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .royal-large {
    grid-row: auto;
  }
  .royal-feature {
    min-height: 390px;
  }
  .timeline {
    grid-template-columns: 1fr;
  }
  .royal-hero {
    padding-top: 120px;
  }
  .hero-hours {
    display: none;
  }
  .site-nav {
    background: rgba(11, 9, 8, 0.98);
  }
}
@media (max-width: 640px) {
  .royal-hero {
    padding: 90px 20px 80px;
  }
  .royal-hero h1 {
    font-size: 62px;
  }
  .royal-features {
    padding: 0 20px 75px;
  }
  .royal-feature {
    min-height: 320px;
    padding: 25px;
  }
  .timeline {
    margin: 0 20px 75px;
  }
  .timeline article {
    padding: 28px;
  }
  .royal-about-hero {
    padding: 100px 20px 70px;
  }
  .royal-about-hero h1 {
    font-size: 58px;
  }
  .chef-quote {
    padding: 85px 20px;
  }
  .royal-hero .scroll {
    display: none;
  }
}

/* ===== Experience Section Text Fix in Index page (From New Delhi
to Vancouver.)===== */

.experience-copy h2{
    font-family:'Playfair Display', serif;
    font-size: 64px;
    font-weight: 700;
    line-height: 0.95;
    letter-spacing: -1.5px;
    color: #f7f2eb;
    margin: 20px 0 25px;
}

.experience-copy h2 span{
    display:block;
    color:#dca24d;
}

@media (max-width: 768px){
    .experience-copy h2{
        font-size:48px;
    }
}

/* ===== About-feature Section Text Fix in about page ( Authentic at heart.
Modern in spirit)===== */

.about-feature h2{
    font-family: 'Playfair Display', serif;
    font-size: clamp(48px, 5vw, 72px);
    font-weight: 700;
    line-height: 0.95;
    letter-spacing: -1px;
    color: #f7f2eb;
    margin: 18px 0 24px;
}

.about-feature h2 span{
    display: block;
    color: #dca24d;
}
.form-status{max-width:900px;margin:28px auto 0;padding:16px 20px;border:1px solid rgba(220,162,77,.45);background:rgba(220,162,77,.10);color:#f5ecdd;text-align:center;font-weight:700}.form-status.invalid,.form-status.error{border-color:rgba(155,40,55,.65);background:rgba(155,40,55,.16)}

/* Reservation action feedback */
.reservation-toast{
  position:fixed;right:28px;bottom:28px;z-index:9999;display:flex;align-items:flex-start;gap:13px;
  width:min(390px,calc(100vw - 32px));padding:16px 18px;border:1px solid rgba(220,164,69,.28);
  border-radius:15px;background:rgba(22,18,14,.97);box-shadow:0 18px 55px rgba(0,0,0,.38);
  color:#f8efe3;opacity:0;visibility:hidden;transform:translateY(18px) scale(.98);
  transition:opacity .22s ease,transform .22s ease,visibility .22s ease;backdrop-filter:blur(14px)
}
.reservation-toast.show{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.reservation-toast-icon{display:grid;place-items:center;flex:0 0 34px;height:34px;border-radius:50%;background:#dca445;color:#17110a;font-weight:900;font-size:18px}
.reservation-toast strong{display:block;margin:1px 0 4px;font-size:14px;color:#fff8ef}
.reservation-toast small{display:block;font-size:12px;line-height:1.55;color:#c9bcad}
.reservation-toast.warning{border-color:rgba(229,170,70,.45)}
.reservation-toast.warning .reservation-toast-icon{background:#e5aa46}
.reservation-toast.error{border-color:rgba(203,83,76,.45)}
.reservation-toast.error .reservation-toast-icon{background:#cb534c;color:#fff}
.reservation-actions button:disabled{opacity:.58;cursor:wait}
@media(max-width:700px){.reservation-toast{right:16px;bottom:16px}}

/* Footer contrast fix */
.site-footer, .site-footer .footer-brand { color:#fff7e8 !important; }
.site-footer p, .site-footer span, .site-footer a { color:rgba(255,247,232,.82) !important; }
.site-footer .footer-brand { color:#f3eadc !important; }
.site-footer a:hover { color:#ffffff !important; }

/* Pending checkout alert */
.prepay-bell{position:fixed;right:142px;top:18px;z-index:1200;border:0;border-radius:999px;background:#b42318;color:#fff;width:52px;height:52px;font-size:22px;cursor:pointer;box-shadow:0 12px 30px rgba(0,0,0,.25)}
.prepay-panel{position:fixed;right:24px;top:82px;width:min(460px,calc(100vw - 32px));max-height:72vh;overflow:auto;background:#fff;color:#21170f;border:1px solid #e5d8ca;border-radius:18px;box-shadow:0 24px 70px rgba(0,0,0,.28);z-index:1199;padding:18px;display:none}
.prepay-panel.is-open{display:block}.prepay-head{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:12px}.prepay-head h3{margin:0}.prepay-card{border:1px solid #f0c6c0;background:#fff8f7;border-radius:14px;padding:14px;margin:10px 0;display:flex;justify-content:space-between;gap:14px}.prepay-card small{display:block;color:#b42318;font-weight:800}.prepay-card strong{display:block;font-size:18px;margin:3px 0}.prepay-card p{margin:0}.prepay-card>div:last-child{display:flex;flex-direction:column;gap:8px;align-items:flex-end}.prepay-card a,.prepay-card button,.prepay-tools button{border:0;border-radius:9px;padding:9px 11px;font-weight:700;cursor:pointer;text-decoration:none}.prepay-card a{background:#21170f;color:#fff}.prepay-card button,.prepay-tools button{background:#f3e7db;color:#21170f}.prepay-tools{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.menu-search-box{display:flex;gap:10px;align-items:center;margin:22px 0}.menu-search-box input{max-width:520px;background:#fff;color:#21170f}.availability-button{border:0;border-radius:999px;padding:9px 14px;font-weight:800;cursor:pointer}.availability-button.is-available{background:#fee4e2;color:#b42318}.availability-button.is-86{background:#dcfae6;color:#067647}.item-status.eighty-six{background:#fee4e2;color:#b42318}
@media(max-width:700px){.prepay-bell{right:92px}.prepay-card{flex-direction:column}.prepay-card>div:last-child{align-items:stretch}}


/* Security, accessibility and policy-page additions */
.skip-link{position:fixed;left:12px;top:-80px;z-index:9999;background:#fff;color:#111;padding:12px 16px;border-radius:8px}.skip-link:focus{top:12px}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.global-status{max-width:900px;margin:24px auto 0}.form-status.error,.form-status.invalid,.form-status.rate{border-color:#a13b3b;background:#fff1f1;color:#6c1e1e}.form-status.success,.form-status.\31{border-color:#2f7d50;background:#effaf3;color:#174d2f}
.footer-legal{display:flex;justify-content:center;gap:20px;flex-wrap:wrap;padding:0 24px 18px}.footer-legal a{color:inherit;opacity:.82}.developer-credit{font-weight:700}
.legal-page{width:min(900px,calc(100% - 36px));margin:0 auto 80px;line-height:1.75}.legal-page h2{margin-top:34px}.legal-page a{text-decoration:underline}
.admin-login-box{max-width:480px;margin:auto}.admin-login-box form{display:grid;gap:10px}.admin-login-box .btn{margin-top:12px}
.checkbox-row{display:flex!important;align-items:flex-start;gap:10px;margin:18px 0}.checkbox-row input{width:auto;margin-top:4px}.form-privacy,.allergy-note{font-size:.88rem;opacity:.78}.summary-line{display:flex;justify-content:space-between;gap:18px;margin-bottom:8px}.summary-total{font-size:1.2rem}.table-scroll{overflow-x:auto}.is-disabled{opacity:.45;pointer-events:none}.location-map-section{width:min(1200px,calc(100% - 32px));margin:40px auto 70px}.location-map-heading{margin-bottom:18px}.location-map-heading h2{margin:6px 0 8px}.location-map-wrap{overflow:hidden;border-radius:18px;box-shadow:0 14px 38px rgba(0,0,0,.14);background:#f3f3f3}.location-map-wrap iframe{display:block;width:100%;min-height:360px}.location-map-action{margin:20px 0 0}
@media(max-width:700px){.location-map-section{width:min(100% - 20px,1200px);margin-top:28px}.location-map-wrap iframe{height:360px}.footer-bottom{gap:12px}}


/* Online menu reliability and compact typography */
.menuItem.is-filtered-out,
.menuItem.is-unavailable {
  display: none !important;
}
.menu-empty {
  margin: 0 0 24px;
  padding: 18px 20px;
  border: 1px dashed var(--line);
  color: var(--muted);
  text-align: center;
}
.filter:disabled {
  opacity: .35;
  cursor: not-allowed;
  pointer-events: none;
}
.dish-card {
  padding: 22px 24px;
  gap: 18px;
}
.dish-card h2 {
  font-family: "Playfair Display", serif;
  font-size: clamp(22px, 1.65vw, 30px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.025em;
  margin: 4px 0 10px;
}
.dish-card p {
  font-size: 13px;
  line-height: 1.5;
}
.dish-card strong {
  font-size: 16px;
}
.order-card .addBtn {
  margin-top: 14px;
}
@media (max-width: 700px) {
  .filters.sticky-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
    padding-bottom: 12px;
  }
  .filters.sticky-filters .filter {
    flex: 0 0 auto;
  }
  .dish-card {
    padding: 18px;
    gap: 13px;
  }
  .dish-card h2 {
    font-size: 22px;
  }
}

/* Vancouver SEO landing pages */
.seo-breadcrumbs{width:min(1200px,calc(100% - 40px));margin:24px auto 0;display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.seo-breadcrumbs a{font-weight:700;color:var(--ink)}
.seo-hero{width:min(1320px,calc(100% - 40px));margin:18px auto 70px;display:grid;grid-template-columns:1.02fr .98fr;gap:42px;align-items:center;min-height:650px}
.seo-hero-copy{padding:50px 0}
.seo-hero-copy h1,.seo-hub-hero h1{font:800 clamp(52px,7vw,108px)/.92 "Manrope",sans-serif;letter-spacing:-.065em;margin:20px 0 28px;max-width:930px}
.seo-hero-copy>p,.seo-hub-hero>p{font-size:18px;line-height:1.75;color:var(--muted);max-width:720px}
.seo-hero-visual{position:relative;min-height:620px;border-radius:38px;overflow:hidden;box-shadow:var(--shadow);background:#1c130e}
.seo-hero-visual:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 46%,rgba(17,10,6,.72) 100%);pointer-events:none}
.seo-hero-visual img{width:100%;height:100%;min-height:620px;object-fit:cover}
.seo-location-card{position:absolute;z-index:2;left:26px;right:26px;bottom:26px;border:1px solid rgba(255,255,255,.24);background:rgba(26,16,11,.78);backdrop-filter:blur(16px);color:#fff7e8;border-radius:20px;padding:20px 22px;display:grid;gap:5px}
.seo-location-card small{font:700 10px "Manrope";letter-spacing:.17em;color:#f4b23b}.seo-location-card strong{font-size:20px}.seo-location-card span{font-size:13px;opacity:.82}
.seo-intro,.seo-content,.seo-menu,.seo-faq,.seo-related,.seo-visit{width:min(1200px,calc(100% - 40px));margin:0 auto 82px}
.seo-intro{display:grid;grid-template-columns:1.25fr .75fr;gap:48px;align-items:start}
.seo-intro-copy{font-family:"Playfair Display",serif;font-size:clamp(24px,2.1vw,34px);line-height:1.52}.seo-intro-copy p{margin:0 0 24px}
.seo-highlights{display:grid;gap:12px;padding:28px;border:1px solid var(--line);background:rgba(255,253,248,.72);border-radius:28px;box-shadow:0 18px 50px rgba(50,29,18,.06)}
.seo-highlights div{display:flex;gap:12px;align-items:flex-start;padding:13px 0;border-bottom:1px solid var(--line);font-weight:700}.seo-highlights div:last-child{border:0}.seo-highlights span{display:grid;place-items:center;flex:0 0 26px;height:26px;border-radius:50%;background:var(--accent);color:#15100c;font-weight:900}
.seo-content-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.seo-content-grid article{background:#20140e;color:#fff7e8;padding:34px;border-radius:28px;min-height:320px;display:flex;flex-direction:column;justify-content:flex-end}.seo-content-grid article:nth-child(2){background:#fffdf8;color:var(--ink);border:1px solid var(--line)}.seo-content-grid article:nth-child(3){background:#f0a20c;color:#1c120a}.seo-content-grid h3{font:700 clamp(28px,2.5vw,40px)/1 "Playfair Display",serif;margin:0 0 18px}.seo-content-grid p{line-height:1.75;margin:0;opacity:.88}
.seo-menu .dish-grid{grid-template-columns:repeat(3,1fr)}.seo-menu .dish-card{min-height:220px}.seo-availability-note{font-size:13px;color:var(--muted);margin-top:16px}
.seo-visit{background:#17100c;color:#fff7e8;border-radius:34px;padding:46px 50px;display:flex;justify-content:space-between;gap:40px;align-items:center}.seo-visit h2{font:700 clamp(38px,4vw,62px)/1 "Playfair Display",serif;margin:10px 0 15px}.seo-visit p{max-width:690px;line-height:1.7;color:rgba(255,247,232,.78)}.seo-visit-actions{display:flex;gap:18px;align-items:center;justify-content:flex-end;flex-wrap:wrap;min-width:280px}.seo-visit .secondary{color:#fff7e8}
.faq-list{display:grid;gap:12px}.faq-list details{border:1px solid var(--line);border-radius:20px;background:#fffdf8;padding:0 22px}.faq-list summary{cursor:pointer;list-style:none;padding:20px 34px 20px 0;font-weight:800;position:relative}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary:after{content:"+";position:absolute;right:0;top:16px;font-size:26px}.faq-list details[open] summary:after{content:"−"}.faq-list details p{margin:0 0 22px;line-height:1.7;color:var(--muted);max-width:900px}
.seo-related-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.seo-related-grid a{border:1px solid var(--line);background:#fffdf8;border-radius:22px;padding:24px;display:grid;gap:14px;min-height:210px;transition:.22s}.seo-related-grid a:hover{transform:translateY(-4px);box-shadow:var(--shadow)}.seo-related-grid small{font-size:10px;letter-spacing:.12em;color:var(--muted)}.seo-related-grid strong{font:700 26px/1.08 "Playfair Display",serif}.seo-related-grid span{margin-top:auto;font-weight:800;color:#9a5b00}
.seo-hub-hero{width:min(1200px,calc(100% - 40px));margin:70px auto 54px;padding:54px 0}.seo-hub-grid{width:min(1200px,calc(100% - 40px));margin:0 auto 82px;display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.seo-hub-card{border:1px solid var(--line);background:#fffdf8;border-radius:30px;padding:34px;min-height:300px;display:flex;flex-direction:column;transition:.22s}.seo-hub-card:nth-child(3n){background:#20140e;color:#fff7e8}.seo-hub-card:nth-child(4n){background:#f0a20c;color:#1c120a}.seo-hub-card h2{font:700 clamp(32px,3vw,48px)/1 "Playfair Display",serif;margin:16px 0}.seo-hub-card p{line-height:1.7;opacity:.8}.seo-hub-card strong{margin-top:auto;padding-top:20px}.seo-hub-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.footer-local-links{width:min(1200px,calc(100% - 40px));margin:0 auto;padding:26px 0 18px;border-top:1px solid rgba(255,247,232,.14);display:flex;gap:12px 20px;flex-wrap:wrap;justify-content:center}.footer-local-links strong{width:100%;text-align:center;color:#fff7e8;font-size:12px;letter-spacing:.12em;text-transform:uppercase}.footer-local-links a{font-size:13px}
@media(max-width:980px){.seo-hero{grid-template-columns:1fr;min-height:0}.seo-hero-visual{min-height:500px}.seo-hero-visual img{min-height:500px}.seo-intro{grid-template-columns:1fr}.seo-content-grid{grid-template-columns:1fr}.seo-content-grid article{min-height:260px}.seo-menu .dish-grid{grid-template-columns:repeat(2,1fr)}.seo-related-grid{grid-template-columns:repeat(2,1fr)}.seo-visit{align-items:flex-start;flex-direction:column}.seo-visit-actions{justify-content:flex-start}.site-nav{gap:18px}}
@media(max-width:700px){.seo-breadcrumbs,.seo-hero,.seo-intro,.seo-content,.seo-menu,.seo-faq,.seo-related,.seo-visit,.seo-hub-hero,.seo-hub-grid{width:min(100% - 24px,1200px)}.seo-hero{margin-top:4px;gap:18px;margin-bottom:54px}.seo-hero-copy{padding:34px 0 12px}.seo-hero-copy h1,.seo-hub-hero h1{font-size:clamp(46px,14vw,72px)}.seo-hero-visual,.seo-hero-visual img{min-height:420px}.seo-location-card{left:14px;right:14px;bottom:14px}.seo-intro-copy{font-size:25px}.seo-menu .dish-grid,.seo-related-grid,.seo-hub-grid{grid-template-columns:1fr}.seo-visit{padding:30px 24px;border-radius:24px}.seo-hub-hero{margin-top:28px;padding:36px 0 18px}.seo-hub-card{min-height:260px;padding:28px}.footer-local-links{width:calc(100% - 28px)}}

/* 2026-08-11 SEO accessibility contrast fix
   The main Royal Ember theme uses light --ink text on a dark site background.
   Vancouver SEO cards intentionally use light surfaces, so they require an
   explicit dark foreground instead of inheriting the global theme colour. */
:root {
  --seo-surface: #fffdf8;
  --seo-surface-soft: #fff9ef;
  --seo-text: #2b1b12;
  --seo-text-muted: #6b584b;
  --seo-border: rgba(43, 27, 18, 0.16);
  --seo-link: #8a5200;
}

/* Light information/highlight card */
.seo-highlights {
  background: var(--seo-surface);
  border-color: var(--seo-border);
  color: var(--seo-text);
}
.seo-highlights div { border-color: var(--seo-border); }

/* The light middle content card */
.seo-content-grid article:nth-child(2) {
  background: var(--seo-surface);
  border-color: var(--seo-border);
  color: var(--seo-text);
}
.seo-content-grid article:nth-child(2) h3,
.seo-content-grid article:nth-child(2) p { color: var(--seo-text); }
.seo-content-grid article:nth-child(2) p { opacity: .82; }

/* FAQ accordions */
.seo-faq .faq-list details {
  background: var(--seo-surface);
  border-color: var(--seo-border);
  color: var(--seo-text);
}
.seo-faq .faq-list summary,
.seo-faq .faq-list summary::after { color: var(--seo-text); }
.seo-faq .faq-list details p { color: var(--seo-text-muted); }

/* Related SEO cards */
.seo-related-grid a {
  background: var(--seo-surface);
  border-color: var(--seo-border);
  color: var(--seo-text);
}
.seo-related-grid small { color: var(--seo-text-muted); }
.seo-related-grid strong { color: var(--seo-text); }
.seo-related-grid span { color: var(--seo-link); }

/* Vancouver hub cards: default cards are light; special cards remain dark/gold. */
.seo-hub-card {
  background: var(--seo-surface);
  border-color: var(--seo-border);
  color: var(--seo-text);
}
.seo-hub-card .eyebrow { color: #8a5a22; }
.seo-hub-card h2,
.seo-hub-card p,
.seo-hub-card strong { color: var(--seo-text); }
.seo-hub-card p { opacity: .78; }

.seo-hub-card:nth-child(3n) {
  background: #20140e;
  color: #fff7e8;
  border-color: rgba(255,255,255,.12);
}
.seo-hub-card:nth-child(3n) .eyebrow { color: #dca24d; }
.seo-hub-card:nth-child(3n) h2,
.seo-hub-card:nth-child(3n) p,
.seo-hub-card:nth-child(3n) strong { color: #fff7e8; }

.seo-hub-card:nth-child(4n) {
  background: #f0a20c;
  color: #1c120a;
  border-color: rgba(28,18,10,.16);
}
.seo-hub-card:nth-child(4n) .eyebrow { color: #5d3900; }
.seo-hub-card:nth-child(4n) h2,
.seo-hub-card:nth-child(4n) p,
.seo-hub-card:nth-child(4n) strong { color: #1c120a; }

/* Keyboard focus is also clearly visible on the new interactive cards. */
.seo-faq summary:focus-visible,
.seo-related-grid a:focus-visible,
.seo-hub-card:focus-visible {
  outline: 3px solid #dca24d;
  outline-offset: 3px;
}