:root {
  --navy: #092f44;
  --navy-deep: #052232;
  --sea: #3ebec7;
  --sand: #f4c44e;
  --sun: #ff7a31;
  --paper: #fffaf0;
  --ink: #17242a;
  --muted: #63747b;
  --line: rgba(9, 47, 68, .13);
  --max: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: auto; scroll-padding-top: 8.5rem; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: "Segoe UI", Arial, sans-serif; font-size: 16px; line-height: 1.5; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .035; z-index: 10; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 100; background: #fff; color: var(--navy); padding: .7rem 1rem; border-radius: .5rem; }
.skip-link:focus { top: 1rem; }

.topbar { position: fixed; inset: 0 0 auto; z-index: 20; display: flex; align-items: center; justify-content: space-between; padding: .8rem max(1rem, calc((100vw - var(--max)) / 2)); background: rgba(5, 34, 50, .91); color: #fff; border-bottom: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(16px); }
.brand { display: inline-flex; align-items: center; gap: .7rem; font-weight: 850; letter-spacing: .14em; }
.brand small { display: block; color: var(--sand); font-size: .58rem; letter-spacing: .3em; }
.brand-sun { width: 2.2rem; height: 2.2rem; border-radius: 50% 50% 42% 42%; background: linear-gradient(var(--sun) 0 48%, var(--sand) 49%); box-shadow: inset 0 -.45rem 0 var(--sea); }
.language-switch { display: flex; padding: .25rem; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.13); border-radius: 999px; }
.language-switch button { border: 0; border-radius: 999px; background: transparent; color: #c8d8dd; padding: .45rem .7rem; font-size: .78rem; font-weight: 700; cursor: pointer; }
.language-switch button.active { background: #fff; color: var(--navy); }

.hero { position: relative; min-height: 760px; display: grid; grid-template-columns: minmax(260px, .78fr) 1.35fr; align-items: center; gap: clamp(2rem, 7vw, 8rem); overflow: hidden; padding: 7rem max(1.25rem, calc((100vw - var(--max)) / 2)) 5rem; background: var(--navy); color: #fff; }
.hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 78% 28%, rgba(62,190,199,.33), transparent 29%), linear-gradient(130deg, transparent 58%, rgba(244,196,78,.08)); }
.hero-photo { position: relative; z-index: 2; justify-self: end; width: min(400px, 90%); transform: rotate(-2.4deg); padding: .65rem; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: .9rem; box-shadow: 0 30px 80px rgba(0,0,0,.32); }
.hero-photo img { display: block; width: 100%; height: auto; border-radius: .5rem; }
.hero-photo.logo-panel { transform: none; padding: clamp(.8rem, 2vw, 1.3rem); background: #fff; }
.hero-photo.logo-panel img { border-radius: .3rem; }
.hero-copy { position: relative; z-index: 3; max-width: 690px; }
.kicker { margin: 0 0 1rem; color: var(--sun); font-size: .72rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.hero .kicker { color: var(--sand); }
h1, h2, h3 { margin: 0; line-height: .95; }
h1 { font-family: Georgia, serif; font-size: clamp(4rem, 10vw, 8.4rem); font-weight: 500; letter-spacing: -.065em; }
h1 span { font-family: "Segoe UI", Arial, sans-serif; color: #a8dfe2; font-size: .22em; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.hero-lead { max-width: 520px; margin: 1.6rem 0 0; color: #cae0e3; font-size: clamp(1.05rem, 1.7vw, 1.3rem); }
.menu-button { display: inline-flex; align-items: center; gap: 2.5rem; margin-top: 2rem; padding: 1rem 1.2rem; background: var(--sand); color: var(--navy-deep); border-radius: 999px; font-weight: 750; transition: transform .2s, background .2s; }
.menu-button:hover { transform: translateY(-2px); background: #ffcf53; }
.wave { position: absolute; z-index: 1; right: -8%; bottom: -9rem; width: 68%; height: 19rem; border-radius: 50%; border: 1px solid rgba(255,255,255,.17); box-shadow: 0 -35px 0 rgba(62,190,199,.08), 0 -70px 0 rgba(62,190,199,.05); transform: rotate(-6deg); }

.menu-shell { max-width: var(--max); margin: auto; padding: clamp(5rem, 9vw, 8rem) 1.25rem; }
.menu-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 2.5rem; }
.menu-heading h2, .visit h2 { color: var(--navy); font-family: Georgia, serif; font-size: clamp(3rem, 7vw, 6rem); font-weight: 500; letter-spacing: -.045em; }
.price-note { max-width: 260px; margin: 0 0 .7rem; color: var(--muted); font-size: .85rem; text-align: right; }
.category-nav { position: sticky; top: 3.8rem; z-index: 12; display: flex; gap: .55rem; overflow-x: auto; padding: .85rem 0 1rem; background: linear-gradient(var(--paper) 80%, transparent); scrollbar-width: none; }
.category-nav::-webkit-scrollbar { display: none; }
.category-nav button { flex: 0 0 auto; padding: .7rem 1rem; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,250,240,.92); color: var(--navy); font-size: .78rem; font-weight: 750; cursor: pointer; }
.category-nav button:focus-visible { outline: 3px solid rgba(62,190,199,.55); outline-offset: 2px; }
.category-nav button:hover, .category-nav button.active { background: var(--navy); color: #fff; border-color: var(--navy); }
.menu-content { display: grid; gap: 4.5rem; margin-top: 2rem; }
.menu-category { scroll-margin-top: 8rem; }
.category-header { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 1.25rem; margin-bottom: 1.75rem; }
.category-number { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--sun); color: #fff; font-size: .75rem; font-weight: 800; }
.category-header h2 { color: var(--navy); font-family: Georgia, serif; font-size: clamp(2.4rem, 5vw, 4.3rem); font-weight: 500; letter-spacing: -.035em; }
.section-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.25rem; }
.menu-section { padding: clamp(1.25rem, 3vw, 2rem); background: #fff; border: 1px solid var(--line); border-radius: 1rem; box-shadow: 0 18px 50px rgba(9,47,68,.045); }
.menu-section h3 { display: flex; align-items: center; gap: .7rem; margin-bottom: 1rem; color: var(--navy); font-size: 1.3rem; font-weight: 780; letter-spacing: -.02em; }
.menu-section h3::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: var(--sea); }
.item-list { margin: 0; padding: 0; list-style: none; }
.menu-item { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .2rem 1rem; padding: .72rem 0; border-bottom: 1px dashed var(--line); }
.menu-item:last-child { border-bottom: 0; }
.item-name { font-weight: 650; }
.menu-item.bilingual { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .25rem .8rem; }
.item-name-en { align-self: start; color: var(--muted); font-size: .82rem; line-height: 1.35; text-align: right; }
.menu-item.bilingual .item-price { grid-column: 2; justify-self: end; }
.item-price { align-self: start; color: var(--navy); font-weight: 820; white-space: nowrap; }
.item-desc { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.4; }
.section-note { margin: .9rem 0 0; padding: .65rem .8rem; background: #fff5d6; border-radius: .5rem; color: #745b19; font-size: .78rem; }

.visit { display: grid; grid-template-columns: .85fr 1.15fr; min-height: 650px; background: #dff3ef; }
.visit-photo { max-height: 760px; overflow: hidden; }
.visit-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }
.visit-photo.logo-panel { display: grid; place-items: center; padding: clamp(2rem, 7vw, 6rem); background: #fff; }
.visit-photo.logo-panel img { width: min(520px, 100%); height: auto; object-fit: contain; }
.visit-copy { align-self: center; max-width: 610px; padding: clamp(3rem, 8vw, 7rem); }
.visit-copy > p:not(.kicker) { max-width: 500px; color: #51686d; font-size: 1.08rem; }
address { margin-top: 2rem; font-style: normal; color: var(--navy); font-weight: 700; }
.contact-links { display: flex; flex-direction: column; align-items: flex-start; gap: .45rem; margin-top: 1.5rem; }
.contact-links a { color: var(--navy); border-bottom: 1px solid rgba(9,47,68,.25); }
.qr-card { display: inline-flex; align-items: center; gap: 1rem; margin-top: 2rem; padding: .75rem 1rem .75rem .75rem; border: 1px solid rgba(9,47,68,.16); border-radius: 1rem; background: #fff; color: var(--navy); box-shadow: 0 15px 40px rgba(9,47,68,.08); }
.qr-card img { width: 7.5rem; height: 7.5rem; flex: 0 0 auto; }
.qr-card span { display: grid; gap: .3rem; }
.qr-card strong { font-size: 1rem; }
.qr-card small { max-width: 170px; color: var(--muted); line-height: 1.35; }
footer { display: flex; justify-content: space-between; gap: 2rem; padding: 2rem max(1.25rem, calc((100vw - var(--max)) / 2)); background: var(--navy-deep); color: #c8dade; font-size: .78rem; }
footer p { margin: 0; }
footer > span { color: var(--sand); font-weight: 850; letter-spacing: .15em; }

@media (max-width: 800px) {
  .hero { min-height: auto; grid-template-columns: 1fr; padding-top: 6.5rem; text-align: center; }
  .hero-photo { justify-self: center; width: min(310px, 82vw); }
  .hero-copy { justify-self: center; }
  .hero-lead { margin-inline: auto; }
  .wave { width: 130%; right: -30%; }
  .menu-heading { align-items: flex-start; flex-direction: column; }
  .price-note { text-align: left; }
  .section-grid { grid-template-columns: 1fr; }
  .visit { grid-template-columns: 1fr; }
  .visit-photo { max-height: 560px; }
}

@media (max-width: 520px) {
  html { scroll-padding-top: 7.5rem; }
  .topbar { padding-inline: .8rem; }
  .brand { font-size: .8rem; }
  .brand-sun { width: 1.9rem; height: 1.9rem; }
  .language-switch button { padding: .4rem .55rem; }
  .hero { gap: 2.5rem; }
  h1 { font-size: clamp(3.8rem, 21vw, 6rem); }
  .category-nav { top: 3.5rem; }
  .menu-section { padding: 1rem; border-radius: .75rem; }
  .menu-item { gap: .2rem .65rem; }
  .item-name { font-size: .93rem; }
  .item-price { font-size: .9rem; }
  .visit-copy { padding: 3rem 1.25rem; }
  .qr-card { width: 100%; }
  .qr-card img { width: 6.5rem; height: 6.5rem; }
  footer { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition-duration: .01ms !important; } }