:root { --header-height: 92px; }
.menu-controls { top: var(--header-height); padding: 14px 0; border-bottom: 1px solid #d8cfbf; }
.categories { padding-bottom: 0; }
.menu-grid { scroll-margin-top: calc(var(--header-height) + 90px); }

.submarine-way { display: block; min-height: 0; padding: 84px max(5vw, 24px) 60px; }
.way-intro { max-width: 1320px; margin: 0 auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.way-intro .eyebrow { color: var(--orange); margin-bottom: 24px; }
.way-intro h2 { font-size: clamp(60px, 6.5vw, 100px); }
.way-intro h2 em { color: var(--orange); font-size: .76em; line-height: 1.2; }
.way-intro > p { color: #c9beb6; font-size: 16px; line-height: 1.7; margin-bottom: 4px; }
.way-scroll { height: 300svh; margin: 46px auto 0; max-width: 1320px; position: relative; }
.way-stage { position: sticky; top: calc(var(--header-height) + 20px); height: min(710px, calc(100svh - var(--header-height) - 40px)); display: flex; flex-direction: column; }
.way-navigation { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 12px; }
.way-tabs { display: flex; gap: 8px; }
.way-tabs button { display: flex; align-items: center; gap: 9px; border: 1px solid #ffffff30; background: transparent; color: #c9beb6; border-radius:var(--radius-ui); padding: 10px 16px; font-size: 14px; transition: background .2s, color .2s; }
.way-tabs b { font-family: var(--display); font-size: 21px; line-height: 1; }
.way-tabs button[aria-current] { background: var(--orange); border-color: var(--orange); color: var(--ink); }
.way-counter { font-size: 14px; letter-spacing: .05em; color: #a99b92; white-space: nowrap; }
.way-counter b { color: var(--paper); font-size: 18px; }
.way-deck { position: relative; flex: 1; min-height: 0; overflow: hidden; isolation: isolate; }
.way-card { position: absolute; inset: 22px 0 8px; display: grid; grid-template-columns: 44% 56%; overflow: hidden; border-radius:var(--radius-ui); transform-origin: 50% 0; border: 1px solid #ffffff30; box-shadow: 0 20px 45px #0004; will-change: transform; }
.way-card-pick { background: var(--orange); color: var(--ink); z-index: 1; }
.way-card-customize { background: var(--paper); color: var(--ink); z-index: 2; transform: translateY(120%); }
.way-card-order { background: #30292a; color: var(--paper); z-index: 3; transform: translateY(120%); }
.way-card-media { position: relative; min-width: 0; min-height: 0; }
.way-card-media img { object-fit: cover; }
.way-card-media::after { content: ''; position: absolute; inset: 50% 0 0; background: linear-gradient(transparent, #0009); pointer-events: none; }
.way-photo-label { position: absolute; left: 24px; bottom: 22px; z-index: 1; color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .12em; }
.way-card-copy { padding: clamp(30px, 4vw, 64px); display: flex; flex-direction: column; justify-content: center; position: relative; min-width: 0; }
.way-card-number { position: absolute; right: 28px; top: 14px; font-family: var(--display); font-size: 130px; line-height: 1; opacity: .09; pointer-events: none; }
.way-card-copy .eyebrow { margin-bottom: 20px; font-size: 12px; }
.way-card h3 { font-family: var(--display); font-weight: 800; font-size: clamp(48px, 5.5vw, 80px); line-height: .96; letter-spacing: -.03em; position: relative; }
.way-card h3 em { font-family: var(--serif); font-weight: 400; font-size: .76em; line-height: 1.25; letter-spacing: -.035em; }
.way-card-copy > p { font-size: 16px; line-height: 1.65; margin-top: 25px; max-width: 390px; }
.way-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 26px; }
.way-chips span { padding: 7px 12px; border: 1px solid #231f2040; border-radius:var(--radius-ui); font-size: 14px; }
.way-kitchen-note { border-left: 2px solid var(--orange); background: #231f2006; padding: 12px 16px; margin-top: 25px; }
.way-kitchen-note > span { font-size: 12px; letter-spacing: .08em; color: var(--muted); }
.way-kitchen-note p { font-family: var(--serif); font-size: 24px; margin-top: 3px; }
.way-card-order .eyebrow { color: var(--orange); }
.way-card-order .way-card-copy > p { color: #d0c4bb; }
.way-card-copy .button { align-self: flex-start; margin-top: 26px; }
.way-progress { height: 2px; background: #ffffff20; margin-top: 14px; overflow: hidden; }
.way-progress span { display: block; height: 100%; width: 100%; background: var(--orange); transform: scaleX(0); transform-origin: left; }
@media (max-width: 900px) {
  .way-tabs span { display: none; }
  .way-tabs button { padding: 9px 18px; }
  .way-intro { display: block; }
  .way-intro > p { margin-top: 24px; }
  .way-card-copy { padding: 28px; }
}
@media (max-width: 760px) {
  :root { --header-height: 76px; }
  .menu-controls { top: var(--header-height); padding: 12px 22px; }
  .categories { margin: 0 -22px; padding: 0 22px; }
  .submarine-way { padding: 62px 22px 45px; }
  .way-intro h2 { font-size: 61px; }
  .way-intro .eyebrow { margin-bottom: 20px; }
  .way-intro > p { font-size: 15px; margin-top: 20px; }
  .way-scroll { margin-top: 30px; height: 285svh; }
  .way-stage { top: calc(var(--header-height) + 16px); height: calc(100svh - var(--header-height) - 32px); }
  .way-navigation { padding-bottom: 4px; }
  .way-card { inset: 20px 0 4px; grid-template-columns: 1fr; grid-template-rows: minmax(130px, .72fr) minmax(0, 1fr); border-radius:var(--radius-ui); }
  .way-card-copy { padding: 22px; }
  .way-card-copy .eyebrow { margin-bottom: 12px; }
  .way-card h3 { font-size: 53px; }
  .way-card-copy > p { font-size: 15px; line-height: 1.55; margin-top: 15px; }
  .way-card-number { font-size: 100px; top: 12px; right: 20px; }
  .way-photo-label { left: 20px; bottom: 18px; font-size: 12px; }
  .way-chips { margin-top: 18px; gap: 6px; }
  .way-chips span { font-size: 14px; padding: 5px 10px; }
  .way-kitchen-note { padding: 9px 12px; margin-top: 18px; }
  .way-kitchen-note p { font-size: 21px; }
  .way-card-copy .button { min-height: 48px; padding: 12px 20px; font-size: 14px; margin-top: 18px; }
  .way-progress { margin-top: 10px; }
}
@media (max-width: 360px) {
  .way-intro h2 { font-size: 51px; }
  .way-card-copy { padding: 18px; }
  .way-card h3 { font-size: 43px; }
  .way-card-copy > p { font-size: 14px; margin-top: 12px; }
  .way-card-copy .eyebrow { margin-bottom: 10px; }
  .way-chips, .way-kitchen-note, .way-card-copy .button { margin-top: 14px; }
  .way-chips span { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce), (max-height: 679px) {
  .way-scroll { height: auto; }
  .way-stage { position: relative; height: auto; top: auto; }
  .way-deck { display: grid; gap: 20px; overflow: visible; }
  .way-card { position: relative; inset: auto; transform: none !important; min-height: 460px; will-change: auto; }
  .way-card-media { min-height: 220px; }
  .way-card-copy { min-height: 280px; }
  .way-progress { display: none; }
}
.submarine-way:first-child { padding-top: calc(var(--header-height) + 54px); }
.header nav a[href="#menu"] { font-weight: 700; }
.skip, .food-label, .photo-category, .way-kitchen-note { border-radius: var(--radius-ui); }
.favorite-info,
.favorite-info p {
  color: #000;
  -webkit-text-fill-color: currentColor;
}
input:not([type="radio"]):not([type="checkbox"]),
textarea {
  font-size: 16px;
}
.cart-dialog[open] { overflow: hidden; }
.cart-heading { flex-shrink: 0; }
.cart-body { min-height: 0; }
.cart-body > .cart-bottom { margin: 24px -25px -25px; }
@media (max-width: 760px) {
  .cart-body > .cart-bottom { margin: 24px -22px -22px; }
}