/* Nabnuer demo, two styles: "gold" (black and gold) and "greys" (only the logo's own greys). Dotted rings come from the logo badge. */
:root {
  --bg: #0F0E0C; --bg-2: #181612; --bg-3: #221F1A; --rule: #3A342B;
  --accent: #CFAE6B; --accent-2: #E4C88D; --on-accent: #17130C;
  --ink: #F3ECDD; --muted: #B3A894; --text-2: #DCD3C2;
  --head-bg: #0F0E0Ceb; --media-bg: #050505; --tint: #CFAE6B22; --ring-soft: #CFAE6B66;
  --field: #4A4237; --placeholder: #8C8372; --error: #FFB4AB;
  /* cream cards: steak tags, kitchen tickets */
  --card: #EFE6D2; --card-ink: #1C1710; --card-accent: #6B1E1E; --card-muted: #4D4335; --card-rule: #B9A57F; --on-card-accent: #FFF3E0;
  --card-btn: #1C1710; --card-btn-ink: #F3ECDD; --tcard-bg: #111; --late-ink: #B71C1C;
  --shadow: #0008; --backdrop: #000b; --switch-off: #3A342B; --switch-knob: #F3ECDD;
  --req-bg: #5C3B0E; --req-ink: #FFE7C2; --req2-bg: #1E3A5C; --req2-ink: #D6E8FF;
  --st-cook-bg: #5C3B0E; --st-cook-ink: #FFDDA8; --st-ready-bg: #1E4D2B; --st-ready-ink: #C8F2D0;
  --social-ink: #fff; --fb: #1877F2; --ig: linear-gradient(45deg, #C2410C, #BE185D 50%, #7C3AED); --line-app: #06A33B;
  --red: #B5121B; --warn: #E8A23A;
  --head: 'Kanit', 'Sarabun', sans-serif; --body: 'Sarabun', 'Kanit', sans-serif;
  --r: 14px; --pad: clamp(16px, 4vw, 40px);
  color-scheme: dark;
}
/* Logo greys: off-white #F8F8F8, ring grey #B0B0B0, charcoal #505050 (7.6:1 on the page). #E8E8E8 is the logo's own edge grey. */
:root[data-style="greys"] {
  --bg: #F8F8F8; --bg-2: #FFFFFF; --bg-3: #E8E8E8; --rule: #B0B0B0;
  --accent: #505050; --accent-2: #505050; --on-accent: #F8F8F8;
  --ink: #505050; --muted: #505050; --text-2: #505050;
  --head-bg: #F8F8F8eb; --media-bg: #F8F8F8; --tint: #B0B0B040; --ring-soft: #B0B0B0;
  --field: #505050; --placeholder: #505050; --error: #B5121B;
  --card: #505050; --card-ink: #F8F8F8; --card-accent: #F8F8F8; --card-muted: #F8F8F8; --card-rule: #B0B0B0; --on-card-accent: #505050;
  --card-btn: #F8F8F8; --card-btn-ink: #505050; --tcard-bg: #FFFFFF; --late-ink: #F8F8F8;
  --shadow: #50505040; --backdrop: #505050b3; --switch-off: #B0B0B0; --switch-knob: #505050;
  --req-bg: #505050; --req-ink: #F8F8F8; --req2-bg: #FFFFFF; --req2-ink: #505050;
  --st-cook-bg: #505050; --st-cook-ink: #F8F8F8; --st-ready-bg: #FFFFFF; --st-ready-ink: #505050;
  --social-ink: #F8F8F8; --fb: #505050; --ig: #505050; --line-app: #505050;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 1rem/1.7 var(--body); }
img { max-width: 100%; height: auto; display: block; }
svg { width: 1.15em; height: 1.15em; flex: none; }
.sprite { position: absolute; }
h1, h2, h3 { font-family: var(--head); font-weight: 600; line-height: 1.3; margin: 0; }
p { margin: 0 0 .8em; }
a { color: var(--accent-2); }
:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 3px; border-radius: 4px; }

/* Language: both languages are in the markup, show the active one. */
:root[data-ui="th"] .en, :root[data-ui="en"] .th { display: none !important; }
/* Demo versions: hide what a version does not include. */
:root[data-offer="1"] [data-min="2"], :root:not([data-offer="3"]) [data-min="3"], :root:not([data-offer="1"]) [data-only="1"] { display: none !important; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 50; background: var(--accent); color: var(--on-accent); padding: .5rem 1rem; border-radius: 8px; font-weight: 700; }
.skip:focus { top: 8px; }

/* ---------- Demo flag + version switcher ---------- */
.demo-flag { background: var(--red); color: #fff; padding: .55rem var(--pad); font-size: .9rem; line-height: 1.5; display: flex; gap: .7rem; align-items: baseline; justify-content: center; text-align: center; flex-wrap: wrap; }
.demo-flag strong { font-family: var(--head); letter-spacing: .14em; font-weight: 700; background: #fff; color: var(--red); padding: 0 .5rem; border-radius: 4px; }
.versions { background: var(--bg-2); border-bottom: 1px solid var(--rule); padding: .55rem var(--pad); display: flex; flex-wrap: wrap; gap: .5rem .9rem; align-items: center; font-size: .88rem; }
.versions__label { color: var(--muted); font-family: var(--head); text-transform: uppercase; letter-spacing: .1em; font-size: .75rem; }
.versions__seg { display: flex; flex-wrap: wrap; border: 1px solid var(--rule); border-radius: 999px; padding: 3px; gap: 2px; }
.versions__seg a { color: var(--ink); text-decoration: none; padding: .3rem .8rem; border-radius: 999px; min-height: 32px; display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
.versions__seg a b { font-family: var(--head); color: var(--accent); }
.versions__seg a:hover { background: var(--bg-3); }
.versions__seg a[aria-current] { background: var(--accent); color: var(--on-accent); }
.versions__seg a[aria-current] b { color: var(--on-accent); }
.versions__more { background: none; border: 0; color: var(--accent-2); font: inherit; text-decoration: underline; cursor: pointer; min-height: 32px; }
.included { flex-basis: 100%; border-top: 1px dashed var(--rule); padding-top: .6rem; }
.included ul { margin: .3rem 0 0; padding-left: 1.2rem; columns: 2 320px; column-gap: 2rem; }
.included li { break-inside: avoid; margin-bottom: .25rem; }
.included__price { font-family: var(--head); color: var(--accent); margin: 0; }
.included__try { font-weight: 700; white-space: nowrap; }

/* ---------- Header ---------- */
.head { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 1rem; padding: .6rem var(--pad); background: var(--head-bg); backdrop-filter: blur(8px); border-bottom: 1px solid var(--rule); }
.head__brand { display: flex; align-items: center; gap: .7rem; color: var(--ink); text-decoration: none; margin-right: auto; }
/* Logo switch: "white" is their original badge as supplied; "black" inverts it (invert + screen) into a light-on-black badge. */
.head__brand img, .foot img, .tcard img, .tbl-head img, .staff-head img { border-radius: 50%; }
:root[data-logo="black"] :is(.head__brand, .foot, .tcard, .tbl-head, .staff-head) img { filter: invert(1) sepia(.35) brightness(.95); mix-blend-mode: screen; }
/* On the light greys page, screen blending would wash the badge out: plain invert instead. */
:root[data-style="greys"][data-logo="black"] :is(.head__brand, .foot, .tcard, .tbl-head, .staff-head) img { filter: invert(1) grayscale(1); mix-blend-mode: normal; }
:root[data-style="greys"][data-logo="white"] :is(.head__brand, .foot, .tcard, .tbl-head, .staff-head) img { box-shadow: 0 0 0 1px #B0B0B0; }
/* Demo switches (logo, style): each button previews its option. */
.pref-seg { display: inline-flex; align-items: center; gap: .3rem; }
.pref-seg button { min-height: 32px; padding: .2rem .7rem; border-radius: 999px; border: 1px solid var(--rule); font: 600 .8rem var(--head); cursor: pointer; }
.pref-seg [data-value="white"], .pref-seg [data-value="greys"] { background: #F8F8F8; color: #505050; }
.pref-seg [data-value="black"] { background: #000; color: #F3ECDD; }
.pref-seg [data-value="gold"] { background: #0F0E0C; color: #CFAE6B; }
.pref-seg [aria-pressed="true"] { outline: 2px solid var(--accent); outline-offset: 2px; }
.head__name { display: flex; flex-direction: column; line-height: 1.1; }
.head__name b { font-family: var(--head); font-size: 1.35rem; font-weight: 700; letter-spacing: .02em; }
.head__name small { font-size: .62rem; letter-spacing: .2em; color: var(--muted); }
.head__nav { display: flex; gap: 1.3rem; }
.head__nav a { color: var(--ink); text-decoration: none; font-family: var(--head); font-weight: 400; }
.head__nav a:hover { color: var(--accent-2); }
.lang { background: none; border: 1px solid var(--rule); color: var(--ink); border-radius: 999px; min-width: 44px; min-height: 40px; font: 600 .85rem var(--head); cursor: pointer; }
.head__name b, .head__book { white-space: nowrap; }
@media (max-width: 860px) { .head__nav { display: none; } .head__name small { display: none; } }
@media (max-width: 420px) { .head { gap: .6rem; } .head__brand img { width: 44px; height: 44px; } .head__name b { font-size: 1.15rem; } .head__book { padding: .5rem .9rem; font-size: .92rem; } }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 46px; padding: .55rem 1.2rem; border-radius: 999px; font: 600 1rem var(--head); text-decoration: none; cursor: pointer; border: 1.5px solid transparent; transition: background .2s, color .2s, transform .15s; }
.btn:active { transform: scale(.97); }
.btn--solid { background: var(--accent); color: var(--on-accent); }
.btn--solid:hover { background: var(--accent-2); }
.btn--line { border-color: var(--accent); color: var(--accent-2); background: transparent; }
.btn--line:hover { background: var(--tint); }
.ibtn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--rule); background: var(--bg-2); color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.ibtn:hover { border-color: var(--accent); }
.is-placeholder { outline: 1px dashed var(--ring-soft); outline-offset: 3px; }

.kicker { font-family: var(--head); color: var(--accent); text-transform: uppercase; letter-spacing: .14em; font-size: .8rem; margin: 0 0 .4rem; }
.sec-h { font-size: clamp(1.8rem, 4vw, 2.6rem); display: flex; align-items: center; gap: .8rem; }
/* Dotted ring from the logo badge, used as the section marker. */
.sec-h::before { content: ''; width: .7em; height: .7em; border-radius: 50%; border: 2px dotted var(--accent); flex: none; }
.note { color: var(--muted); font-size: .9rem; }
section { padding: clamp(48px, 8vw, 96px) var(--pad); scroll-margin-top: 72px; }

/* ---------- Promo slider ---------- */
.promo { padding: 0; position: relative; background: var(--media-bg); border-bottom: 1px solid var(--rule); }
.promo__track { display: grid; }
.slide { grid-area: 1 / 1; display: grid; grid-template-columns: 1.35fr 1fr; min-height: clamp(380px, 62vh, 580px); opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility .6s; }
.slide.is-on { opacity: 1; visibility: visible; }
.slide__media { overflow: hidden; display: grid; place-items: center; background: var(--media-bg); }
.slide__media img { width: 100%; height: 100%; }
.slide__media--cover img { object-fit: cover; }
.slide__text { padding: clamp(24px, 5vw, 64px); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; background: linear-gradient(90deg, var(--media-bg), var(--bg) 60%); }
.slide__text h2 { font-size: clamp(1.7rem, 3.6vw, 2.8rem); margin-bottom: .6rem; color: var(--accent-2); }
.slide__text p:not(.kicker) { color: var(--muted); max-width: 34ch; }
.slide__text .btn { margin-top: .6rem; }
.promo__controls { position: absolute; right: var(--pad); bottom: 18px; display: flex; align-items: center; gap: .5rem; }
.promo__dots { display: flex; gap: .2rem; }
.dot { width: 32px; height: 32px; border: 0; background: none; cursor: pointer; display: grid; place-items: center; padding: 0; }
.dot::after { content: ''; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--accent); transition: background .2s, width .2s; }
.dot[aria-current]::after { background: var(--accent); width: 22px; border-radius: 6px; }
@media (max-width: 760px) {
  .slide { grid-template-columns: 1fr; grid-template-rows: auto 1fr; min-height: 0; }
  .slide__media { aspect-ratio: 16 / 10; }
  .slide__text { background: var(--bg); padding-bottom: 84px; }
  .promo__controls { left: var(--pad); right: auto; }
}

/* ---------- Story ---------- */
.story { display: grid; grid-template-columns: auto 1fr; gap: clamp(24px, 5vw, 72px); align-items: center; max-width: 1200px; margin: 0 auto; }
.story__mark { position: relative; width: clamp(160px, 22vw, 260px); aspect-ratio: 1; border-radius: 50%; border: 3px dotted var(--accent); display: grid; place-items: center; }
.story__mark::before { content: ''; position: absolute; inset: 10px; border-radius: 50%; border: 1px solid var(--ring-soft); }
.story__ten { font: 700 clamp(4.5rem, 10vw, 7.5rem)/1 var(--head); color: var(--accent); }
.story__yrs { position: absolute; bottom: 22%; font-family: var(--head); letter-spacing: .3em; text-transform: uppercase; font-size: .8rem; color: var(--muted); }
.story__text h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); margin-bottom: .8rem; }
.story__text > p:not(.kicker) { max-width: 60ch; color: var(--text-2); }
.facts { list-style: none; padding: 0; margin: 1.4rem 0 0; display: flex; gap: clamp(16px, 4vw, 48px); flex-wrap: wrap; }
.facts li { display: flex; flex-direction: column; border-left: 2px solid var(--accent); padding-left: .8rem; }
.facts b { font: 700 1.8rem/1.1 var(--head); color: var(--ink); }
.facts span { color: var(--muted); font-size: .9rem; }
.story__plates { grid-column: 1 / -1; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 12px; }
.story__plates img { border-radius: var(--r); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; height: 100%; }
@media (max-width: 760px) { .story { grid-template-columns: 1fr; justify-items: start; } .story__plates { grid-template-columns: 1fr 1fr; } .story__plates img:first-child { grid-column: 1 / -1; } }

/* ---------- Offer 1 gallery ---------- */
.plates { max-width: 1200px; margin: 0 auto; }
.plates__grid { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.plates__grid li { position: relative; border-radius: var(--r); overflow: hidden; }
.plates__grid img { aspect-ratio: 1; object-fit: cover; width: 100%; }
.plates__grid span { position: absolute; left: 0; right: 0; bottom: 0; padding: 2rem .9rem .7rem; background: linear-gradient(transparent, #000d); color: #fff; font-family: var(--head); }

/* ---------- Menu ---------- */
.menu { max-width: 1200px; margin: 0 auto; }
.menu__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: .5rem 2rem; }
.menu__head .note { max-width: 46ch; margin: 0; }
.tabs { display: flex; gap: .4rem; overflow-x: auto; margin: 1.5rem calc(-1 * var(--pad)) 1.5rem; padding: 0 var(--pad) .4rem; scrollbar-width: thin; }
.tabs [role="tab"] { flex: none; min-height: 42px; padding: .4rem 1rem; border-radius: 999px; border: 1px solid var(--rule); background: var(--bg-2); color: var(--ink); font: 400 .95rem var(--head); cursor: pointer; }
.tabs [role="tab"][aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
.tags { display: inline-flex; flex-wrap: wrap; gap: .3rem; }
.tag { font: 600 .7rem/1 var(--head); padding: .3rem .5rem; border-radius: 4px; text-transform: uppercase; letter-spacing: .06em; }
.tag--chef { background: var(--accent); color: var(--on-accent); }
.tag--best { border: 1px solid var(--accent); color: var(--accent-2); }
.tag--out { background: #5A1A1A; color: #FFD9D9; }
.price { font: 600 1.15rem var(--head); color: var(--accent-2); white-space: nowrap; }
.is-out { opacity: .55; }
.is-out .price { text-decoration: line-through; }

/* Butcher's tag cards for the steak cuts: weight as the headline. */
.cuts { list-style: none; padding: 0; margin: 0 0 24px; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.cut { position: relative; background: var(--card); color: var(--card-ink); padding: 2.4rem 1.2rem 1.1rem; border-radius: 6px 6px 18px 18px; clip-path: polygon(18% 0, 82% 0, 100% 14%, 100% 100%, 0 100%, 0 14%); display: flex; flex-direction: column; }
.cut__hole { position: absolute; top: 12px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--bg); box-shadow: 0 0 0 3px var(--card-rule); }
.cut__w { font: 700 2.6rem/1 var(--head); letter-spacing: -.01em; color: var(--card-accent); }
.cut h3 { font-size: 1.3rem; margin: .4rem 0 .2rem; }
.cut p { color: var(--card-muted); font-size: .92rem; margin: 0 0 1rem; }
.cut__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: .5rem; border-top: 1.5px dashed var(--card-rule); padding-top: .7rem; }
.cut .price { color: var(--card-ink); }
.cut .tag--best { border-color: var(--card-accent); color: var(--card-accent); }
.cut .tag--chef { background: var(--card-accent); color: var(--on-card-accent); }

.dishes { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.dish { background: var(--bg-2); border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; }
.dish img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.dish__body { padding: .9rem 1rem 1rem; display: flex; flex-direction: column; gap: .3rem; flex: 1; }
.dish__body h3 { font-size: 1.15rem; }
.dish__body h3 small { color: var(--muted); font-weight: 400; font-size: .8rem; }
.dish__body p { color: var(--muted); font-size: .92rem; margin: 0; }
.dish__body .price { margin-top: auto; padding-top: .3rem; }
.rows { list-style: none; padding: 0; margin: 0; max-width: 760px; }
.row { display: flex; justify-content: space-between; gap: 1rem; padding: .9rem 0; border-bottom: 1px dashed var(--rule); }
.row h3 { font-size: 1.1rem; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.row p { color: var(--muted); font-size: .92rem; margin: .1rem 0 0; }

/* ---------- Order at table (offer 3) ---------- */
.order { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(24px, 5vw, 64px); align-items: center; max-width: 1200px; margin: 0 auto; }
.order h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); margin-bottom: 1rem; }
.steps { padding: 0; margin: 0 0 1.4rem; list-style: none; counter-reset: s; }
.steps li { counter-increment: s; display: flex; gap: .9rem; align-items: baseline; padding: .55rem 0; border-bottom: 1px dashed var(--rule); }
.steps li::before { content: counter(s); font: 700 1rem var(--head); color: var(--on-accent); background: var(--accent); width: 1.8rem; height: 1.8rem; border-radius: 50%; display: grid; place-items: center; flex: none; }
.order__try { display: flex; flex-wrap: wrap; gap: .7rem; margin-bottom: .8rem; }
.order__card { margin: 0; justify-self: center; text-align: center; }
.order__card figcaption { color: var(--muted); font-size: .85rem; margin-top: .7rem; }
.tcard { width: 260px; background: var(--tcard-bg); border: 2px dotted var(--accent); border-radius: 20px; padding: 1.3rem; display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.tcard__no { font: 700 1.6rem var(--head); margin: 0; color: var(--accent-2); }
.tcard__qr { background: #fff; padding: 12px; border-radius: 10px; width: 180px; }
.tcard__qr svg { width: 100%; height: auto; display: block; }
.tcard__hint { margin: 0; font-family: var(--head); letter-spacing: .08em; }
@media (max-width: 760px) { .order { grid-template-columns: 1fr; } }

/* ---------- Booking ---------- */
.book { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.3fr; gap: clamp(24px, 5vw, 64px); align-items: start; }
:root[data-offer="1"] .book { grid-template-columns: 1fr; text-align: center; justify-items: center; }
:root[data-offer="1"] .book .sec-h { justify-content: center; }
.book__intro p { color: var(--muted); max-width: 46ch; margin-top: 1rem; }
.book__alt { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.2rem; }
:root[data-offer="1"] .book__alt { justify-content: center; }
.bform { background: var(--bg-2); border: 1px solid var(--rule); border-radius: 20px; padding: clamp(18px, 3vw, 32px); display: grid; gap: 1rem; }
.bform fieldset { border: 0; padding: 0; margin: 0; }
.bform legend, .lbl { font-family: var(--head); font-size: .9rem; color: var(--muted); margin-bottom: .35rem; display: block; }
.bform__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; }
.bform input:not([type="radio"]), .bform select { width: 100%; min-height: 48px; padding: .55rem .8rem; border-radius: 10px; border: 1px solid var(--field); background: var(--bg); color: var(--ink); font: inherit; }
.bform input::placeholder { color: var(--placeholder); }
.bform [aria-invalid="true"] { border-color: var(--error); box-shadow: 0 0 0 2px var(--error); }
.bform__error { color: var(--error); margin: 0; min-height: 0; }
.bform__error:empty { display: none; }
.bform__send { justify-self: start; }
.fineprint { font-size: .82rem; color: var(--muted); margin: 0; }
.bform__done { border: 2px dotted var(--accent); border-radius: 14px; padding: 1rem 1.2rem; }
.bform__done h3 { color: var(--accent-2); margin-bottom: .3rem; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .4rem 1rem; border-radius: 999px; border: 1px solid var(--field); cursor: pointer; }
.chip:has(input:checked) { border-color: var(--accent); background: var(--tint); }
.chip input { accent-color: var(--accent); width: 18px; height: 18px; margin: 0; }
@media (max-width: 860px) { .book { grid-template-columns: 1fr; } }

/* ---------- Branches + contact ---------- */
.contact { max-width: 1200px; margin: 0 auto; }
.branches { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-top: 1.6rem; }
.branch { background: var(--bg-2); border: 1px solid var(--rule); border-radius: 20px; padding: 1.4rem; position: relative; overflow: hidden; }
.branch::after { content: ''; position: absolute; right: -50px; top: -50px; width: 150px; height: 150px; border-radius: 50%; border: 2px dotted var(--ring-soft); }
.branch h3 { font-size: 1.4rem; margin-bottom: .7rem; color: var(--accent-2); }
.branch p { display: flex; gap: .6rem; align-items: center; color: var(--text-2); }
.branch p svg { color: var(--accent); }
.branch__btns { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.social { margin-top: 2rem; padding: 1.4rem; border-radius: 20px; border: 2px dotted var(--rule); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.social p { margin: 0; font-family: var(--head); font-size: 1.1rem; }
.social__row { display: flex; flex-wrap: wrap; gap: .6rem; }
.sbtn { display: inline-flex; align-items: center; gap: .5rem; min-height: 46px; padding: .5rem 1.1rem; border-radius: 999px; color: var(--social-ink); text-decoration: none; font: 600 1rem var(--head); }
.sbtn svg { width: 1.35em; height: 1.35em; }
.sbtn--fb { background: var(--fb); }
.sbtn--ig { background: var(--ig); }
.sbtn--line { background: var(--line-app); }
.sbtn:hover { filter: brightness(1.1); }

/* ---------- Footer ---------- */
.foot { text-align: center; padding: 48px var(--pad) 40px; border-top: 1px solid var(--rule); color: var(--muted); font-size: .9rem; }
.foot img { margin: 0 auto 1rem; }
.foot__demo { font-size: .8rem; }

.toast { position: fixed; left: 50%; bottom: 20px; transform: translate(-50%, 140%); background: var(--ink); color: var(--on-accent); padding: .7rem 1.1rem; border-radius: 12px; z-index: 60; font-weight: 600; max-width: calc(100% - 32px); transition: transform .3s ease; box-shadow: 0 10px 30px var(--shadow); }
.toast.is-on { transform: translate(-50%, 0); }

/* ---------- Privacy page ---------- */
.legal { max-width: 760px; margin: 0 auto; padding: 48px var(--pad); }
.legal h1 { font-size: 2rem; margin-bottom: .4rem; }
.legal h2 { font-size: 1.25rem; margin: 1.6rem 0 .5rem; color: var(--accent-2); }
.legal .draft { border: 2px dashed var(--warn); color: var(--warn); padding: .7rem 1rem; border-radius: 10px; }

/* ---------- Ticker under the slider ---------- */
.ticker { overflow: hidden; background: var(--accent); color: var(--on-accent); padding: .8rem 0; }
.ticker__track { display: flex; width: max-content; animation: tick 38s linear infinite; font: 700 clamp(1.5rem, 3.4vw, 2.4rem)/1.15 var(--head); text-transform: uppercase; letter-spacing: .02em; }
.ticker__track span { display: inline-flex; align-items: center; gap: 1.2rem; padding-right: 1.2rem; }
/* Every other word is outlined; a dotted ring (the badge's) separates them. */
.ticker__track span:nth-child(even) { color: transparent; -webkit-text-stroke: 1.5px var(--on-accent); }
.ticker__track span::after { content: ''; width: .42em; height: .42em; border-radius: 50%; border: 2px dotted var(--on-accent); }
.ticker:hover .ticker__track { animation-play-state: paused; }
@keyframes tick { to { transform: translateX(-50%); } }

/* ---------- Bands: every other section (set by site.js) runs edge to edge ---------- */
/* Full width in layout, content kept to 1200px by padding, so nothing pokes past the screen edge. */
.band { position: relative; background: var(--bg); color: var(--ink); max-width: none; margin: 0; padding-inline: max(var(--pad), calc((100% - 1200px) / 2)); }
:root:not([data-style="greys"]) .band { --bg: #181612; --bg-2: #221F1A; }
:root[data-style="greys"] .band {
  --bg: #505050; --bg-2: #505050; --bg-3: #505050; --rule: #B0B0B0;
  --accent: #F8F8F8; --accent-2: #F8F8F8; --on-accent: #505050;
  --ink: #F8F8F8; --muted: #F8F8F8; --text-2: #F8F8F8;
  --tint: #F8F8F833; --ring-soft: #B0B0B0; --field: #F8F8F8; --placeholder: #F8F8F8; --error: #FFB4AB;
  --card: #F8F8F8; --card-ink: #505050; --card-accent: #505050; --card-muted: #505050; --card-rule: #B0B0B0; --on-card-accent: #F8F8F8;
  --tcard-bg: #505050; --social-ink: #505050; --fb: #F8F8F8; --ig: #F8F8F8; --line-app: #F8F8F8;
  color-scheme: dark;
}
/* Scalloped top and bottom edge, like the badge's rim: off-white half-circles bite into the charcoal. */
:root[data-style="greys"] .band::before, :root[data-style="greys"] .band::after {
  content: ''; position: absolute; left: 0; right: 0; height: 12px; pointer-events: none;
  background: radial-gradient(circle at 12px 0, #F8F8F8 11.5px, transparent 12px) 0 0 / 24px 12px repeat-x;
}
:root[data-style="greys"] .band::before { top: 0; }
:root[data-style="greys"] .band::after { bottom: 0; transform: scaleY(-1); }

/* ---------- Motion (all off under prefers-reduced-motion, see the top of this file) ---------- */
.slide.is-on .slide__media img { animation: slow-zoom 9s ease-out both; }
@keyframes slow-zoom { from { transform: scale(1.08); } to { transform: scale(1); } }
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.reveal.is-in { opacity: 1; transform: none; }
.dish img, .plates__grid img { transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
@media (hover: hover) {
  .dish:hover img, .plates__grid li:hover img { transform: scale(1.06); }
  /* The steak tag swings from its hole. */
  .cut { transform-origin: 50% 12px; transition: transform .4s cubic-bezier(.3, 1.6, .5, 1), opacity .7s ease; }
  .cut:hover { transform: rotate(-2.5deg); }
  .btn:hover { transform: translateY(-1px); }
}