/* ==========================================================================
   Sections — structure only.

   Anything the JSON controls (sizes, colours, positions, spacing) arrives as
   a custom property or a generated rule from js/lib/style.js. That keeps this
   file stable while the config stays fully editable.
   ========================================================================== */

.tb-section {
  position: relative;
}

.tb-section[data-bg="cream"] {
  background: var(--c-cream);
}
.tb-section[data-bg="green"] {
  background: var(--c-green);
  color: var(--c-cream);
}
.tb-section[data-bg="white"] {
  background: var(--c-white);
}

/* ======================================================= hero carousel === */

.tb-hero {
  position: relative;
  height: var(--hero-h, calc(100svh - var(--header-h)));
  min-height: var(--hero-min-h, 0);
  overflow: hidden;
  background: var(--c-ink);
  touch-action: pan-y;
}

.tb-hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--trans-ms, 1400ms) var(--motion-easing),
    visibility 0ms linear var(--trans-ms, 1400ms);
}

.tb-hero__slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 1;
  transition:
    opacity var(--trans-ms, 1400ms) var(--motion-easing),
    visibility 0ms linear 0ms;
}

.tb-hero__figure {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #161616;
}

.tb-hero__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focal, 50% 50%);
  transform: scale(1);
  transition: transform 800ms var(--motion-easing);
}

/* Slow drift on the visible slide only */
.tb-hero[data-ken-burns="true"] .tb-hero__slide.is-active .tb-hero__figure img {
  transform: scale(calc(1 + (var(--kb-scale, 1.09) - 1) * var(--motion-scale)));
  transition: transform calc(var(--trans-ms, 1400ms) + 9000ms) linear;
}

.tb-hero__scrim {
  position: absolute;
  inset: 0;
  background: var(--scrim, linear-gradient(90deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.6)));
}

.tb-hero__stage {
  position: absolute;
  inset: 0;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.tb-hero__box {
  position: absolute;
  z-index: 2;
  left: var(--box-x, 50%);
  top: var(--box-y, 50%);
  width: var(--box-w, 40%);
  max-width: calc(100% - var(--gutter) * 2);
  text-align: var(--box-align, left);
  transform: translate(var(--box-tx, 0), var(--box-ty, -50%));
}

.tb-hero__heading,
.tb-hero__body,
.tb-hero__link,
.tb-hero__link .tb-arrow-link__text,
.tb-statement__heading,
.tb-statement__link,
.tb-statement__link .tb-arrow-link__text,
.tb-dish-hit__name,
.tb-dish-hit__cta {
  text-shadow: var(--type-on-photo-shadow);
}

.tb-hero__heading {
  font-family: var(--f-display);
}

/* Slide copy animates per slide rather than on scroll */
.tb-hero__slide .tb-lines__inner,
.tb-hero__slide .tb-hero__body,
.tb-hero__slide .tb-hero__link {
  transition-duration: 1100ms;
}

.tb-hero__link {
  position: relative;
  z-index: 3;
  margin-top: calc(28 * var(--u));
  color: #ffffff;
  pointer-events: auto;
  opacity: 0;
  transform: translate3d(0, calc(22 * var(--u) * var(--motion-scale)), 0);
  transition:
    opacity 1000ms var(--motion-easing) 520ms,
    transform 1000ms var(--motion-easing) 520ms;
}

/* Any current or future link inside a stacked carousel must receive the
   click. Inactive slides stay inert; the active slide's anchors do not. */
.tb-hero a,
.tb-split a,
.tb-media-carousel a {
  pointer-events: auto;
}

.tb-hero__slide.is-active .tb-hero__link {
  opacity: 1;
  transform: none;
}

.tb-hero__heading a,
.tb-hero__body a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: from-font;
  transition: opacity 420ms var(--motion-easing);
}

@media (hover: hover) {
  .tb-hero__heading a:hover,
  .tb-hero__body a:hover {
    opacity: 0.72;
  }
}

.tb-hero__body {
  opacity: 0;
  transform: translate3d(0, calc(22 * var(--u) * var(--motion-scale)), 0);
  transition:
    opacity 1000ms var(--motion-easing) 420ms,
    transform 1000ms var(--motion-easing) 420ms;
}

.tb-hero__slide.is-active .tb-hero__body {
  opacity: 1;
  transform: none;
}

/* ------------------------------------------------------------------ dots */

.tb-hero__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--dots-bottom, calc(48 * var(--u)));
  z-index: 3;
  display: flex;
  justify-content: var(--dots-justify, center);
  gap: var(--dot-gap, calc(14 * var(--u)));
  padding-inline: var(--gutter);
}

.tb-hero__dot {
  position: relative;
  width: var(--dot-size, calc(12 * var(--u)));
  height: var(--dot-size, calc(12 * var(--u)));
  border-radius: 50%;
  background: var(--dot-color, rgba(255, 255, 255, 0.42));
  box-shadow: var(--type-on-photo-shadow);
  transition:
    background-color 520ms var(--motion-easing),
    transform 520ms var(--motion-easing);
}

.tb-hero__dot::after {
  /* Enlarges the tap target without changing the visual size */
  content: "";
  position: absolute;
  inset: -0.6rem;
}

.tb-hero__dot.is-active {
  background: var(--dot-active, #ffffff);
}

@media (hover: hover) {
  .tb-hero__dot:hover {
    transform: scale(1.22);
  }
}

/* Phone: the Our Food / Who We Are line was sitting on the dots. Cap how
   low the copy box can go so the link stays above the slider. */
@media (max-width: 860px) {
  .tb-hero__dots {
    bottom: 4.8vw;
  }

  .tb-hero__box {
    top: min(var(--box-y, 50%), 56%) !important;
  }

  .tb-hero__heading {
    word-spacing: normal;
  }

  .tb-hero__link,
  .tb-hero__link.tb-arrow-link {
    letter-spacing: 0.08em !important;
    word-spacing: 0.22em;
    margin-top: max(3.2vw, 12px);
  }
}

/* ======================================================= split feature === */

.tb-split {
  display: flex;
  align-items: var(--split-align, center);
  gap: var(--split-gap, calc(64 * var(--u)));
  padding-block: var(--pad-y, calc(64 * var(--u)));
}

.tb-split[data-layout="media-right"] {
  flex-direction: row-reverse;
}

.tb-split__media {
  flex: 0 0 var(--media-w, 54%);
  max-width: var(--media-w, 54%);
  display: flex;
  align-items: flex-start;
  gap: calc(36 * var(--u));
}

.tb-split__media[data-carousel="true"] {
  display: block;
  gap: 0;
}

.tb-split__media[data-gallery="true"] {
  display: grid;
  grid-template-columns: minmax(0, var(--gal-feat, 7fr)) minmax(0, var(--gal-cell, 3fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: calc(18 * var(--u));
  align-items: stretch;
}

.tb-split__media[data-gallery="true"][data-paged="true"] {
  grid-template-rows: repeat(3, minmax(0, 1fr)) auto;
}

.tb-split__media[data-gallery="true"] .tb-split__figure {
  width: 100%;
  height: 100%;
  margin: 0;
  min-height: 0;
  cursor: pointer;
}

.tb-split__media[data-gallery="true"] .tb-split__figure[hidden] {
  display: none;
}

.tb-split__media[data-gallery="true"] .tb-split__figure.is-featured {
  grid-column: 1;
  grid-row: 1 / span 3;
  cursor: pointer;
}

.tb-split__media[data-gallery="true"] .tb-split__figure:not(.is-featured) {
  grid-column: var(--thumb-col, 2);
  grid-row: var(--thumb-row, auto);
}

.tb-split__media[data-gallery="true"] .tb-split__figure img {
  aspect-ratio: auto;
  height: 100%;
  object-fit: cover; /* fallback if the file is not already 3:4 / 1:1 */
}

.tb-split__media[data-gallery="true"] .tb-split__figure.is-featured img {
  aspect-ratio: 3 / 4;
}

.tb-split__media[data-gallery="true"] .tb-split__figure:not(.is-featured) img {
  aspect-ratio: 1 / 1;
}

.tb-split__media[data-gallery="true"] .tb-split__figure.is-inview img {
  transition: transform 640ms var(--motion-easing);
}

@media (hover: hover) {
  .tb-split__media[data-gallery="true"] .tb-split__figure.is-inview:hover img {
    transform: scale(1.06);
  }
  .tb-split__media[data-gallery="true"] .tb-split__figure.is-featured.is-inview:hover img {
    transform: scale(1.035);
  }
}

.tb-split__media[data-gallery="true"] .tb-split__figure.is-paging {
  animation: tb-thumb-page 480ms var(--motion-easing);
}

@keyframes tb-thumb-page {
  from { opacity: 0.35; }
  to { opacity: 1; }
}

.tb-split__pager {
  grid-column: 2;
  grid-row: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(10 * var(--u));
  min-height: calc(28 * var(--u));
  padding-top: calc(4 * var(--u));
  color: var(--c-green);
}

.tb-split__pager[hidden] {
  display: none;
}

.tb-split__pager-track {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(8 * var(--u));
  min-width: 0;
  flex: 1 1 auto;
}

.tb-split__pager-btn {
  flex: 0 0 auto;
  width: calc(26 * var(--u));
  height: calc(26 * var(--u));
  position: relative;
  color: var(--c-green);
  opacity: 0.9;
}

.tb-split__pager-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0.38em;
  height: 0.38em;
  border-left: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateX(0.08em) rotate(45deg);
}

.tb-split__pager-btn.is-next::before {
  transform: translateX(-0.08em) rotate(-135deg);
}

.tb-split__pager-btn:disabled {
  opacity: 0.22;
  pointer-events: none;
}

@media (hover: hover) {
  .tb-split__pager-btn:hover:not(:disabled) {
    opacity: 1;
  }
}

.tb-split__pager-dot {
  width: calc(7 * var(--u));
  height: calc(7 * var(--u));
  border-radius: 50%;
  background: rgba(0, 84, 58, 0.28);
  transition:
    background-color 420ms var(--motion-easing),
    transform 420ms var(--motion-easing);
}

.tb-split__pager-dot.is-active {
  background: var(--c-green);
  transform: scale(1.15);
}

.tb-split__pager-index {
  font-family: var(--f-label);
  font-size: calc(11 * var(--u));
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-green);
}

.tb-split__carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
  border: calc(1.5 * var(--u)) solid var(--c-green);
  aspect-ratio: var(--fig-aspect, 3 / 2);
  touch-action: pan-y;
}

.tb-split__carousel .tb-split__figure {
  position: absolute;
  inset: 0;
  width: 100%;
  margin: 0;
  border: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--trans-ms, 900ms) var(--motion-easing),
    visibility 0ms linear var(--trans-ms, 900ms);
}

.tb-split__carousel .tb-split__figure.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 1;
  transition:
    opacity var(--trans-ms, 900ms) var(--motion-easing),
    visibility 0ms linear 0ms;
}

.tb-split__carousel .tb-split__figure img {
  aspect-ratio: auto;
  height: 100%;
}

.tb-split__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(18 * var(--u));
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: calc(10 * var(--u));
  pointer-events: none;
}

.tb-split__dot {
  pointer-events: auto;
  position: relative;
  width: calc(10 * var(--u));
  height: calc(10 * var(--u));
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.42);
  box-shadow: var(--type-on-photo-shadow);
  transition:
    background-color 420ms var(--motion-easing),
    transform 420ms var(--motion-easing);
}

.tb-split__dot::after {
  content: "";
  position: absolute;
  inset: calc(-8 * var(--u));
}

.tb-split__dot.is-active {
  background: #ffffff;
}

@media (hover: hover) {
  .tb-split__dot:hover {
    transform: scale(1.22);
  }
}

.tb-split__figure {
  position: relative;
  width: var(--fig-w, 100%);
  margin-top: var(--fig-offset, 0%);
  overflow: hidden;
  border: calc(1.5 * var(--u)) solid var(--c-green);
}

.tb-split__figure img {
  width: 100%;
  height: 100%;
  aspect-ratio: var(--fig-aspect, 3 / 4);
  object-fit: cover;
}

.tb-split__content {
  flex: 1 1 auto;
  min-width: 0;
}

.tb-split__heading {
  font-family: var(--f-display);
}

.tb-split__body {
  text-align: left;
}

.tb-split__link {
  display: inline-flex;
}

@media (max-width: 860px) {
  .tb-split__heading,
  .tb-split__body,
  .tb-split__heading.tb-lines {
    padding-inline: 0;
    margin-inline: 0;
    text-align: left;
    text-wrap: pretty;
  }
}

/* Stacked layout for narrow screens, driven by the mobile config */
.tb-split[data-layout="stack"] {
  flex-direction: column;
  align-items: stretch;
}

.tb-split[data-layout="stack"] .tb-split__media {
  flex-basis: auto;
  max-width: 100%;
  margin-bottom: calc(40 * var(--u));
}

@media (max-width: 860px) {
  /* Paged galleries must not keep the desktop 1fr rows: percentage heights
     collapse the thumb cells into empty bordered squares. */
  .tb-split__media[data-gallery="true"],
  .tb-split__media[data-gallery="true"][data-paged="true"] {
    grid-template-columns: repeat(var(--gal-m-cols, 3), minmax(0, 1fr));
    grid-template-rows: auto;
    grid-auto-rows: auto;
    aspect-ratio: auto;
  }

  .tb-split__media[data-gallery="true"] .tb-split__figure,
  .tb-split__media[data-gallery="true"] .tb-split__figure.is-featured,
  .tb-split__media[data-gallery="true"] .tb-split__figure:not(.is-featured) {
    height: auto;
    min-height: 0;
  }

  .tb-split__media[data-gallery="true"] .tb-split__figure.is-featured {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .tb-split__media[data-gallery="true"] .tb-split__figure:not(.is-featured) {
    grid-column: auto;
    grid-row: auto;
  }

  .tb-split__media[data-gallery="true"] .tb-split__figure img,
  .tb-split__media[data-gallery="true"] .tb-split__figure.is-featured img,
  .tb-split__media[data-gallery="true"] .tb-split__figure:not(.is-featured) img {
    height: auto;
  }

  .tb-split__media[data-gallery="true"] .tb-split__figure.is-featured img {
    aspect-ratio: 3 / 4;
  }

  .tb-split__media[data-gallery="true"] .tb-split__figure:not(.is-featured) img {
    aspect-ratio: 1 / 1;
  }

  .tb-split__pager {
    grid-column: 1 / -1;
    grid-row: auto;
    padding-top: 2.4vw;
  }

  .tb-split__pager-btn {
    width: 11vw;
    height: 11vw;
  }
}

/* ============================================================ statement === */

.tb-statement {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--stmt-h, calc(720 * var(--u)));
  overflow: hidden;
  background: var(--c-ink);
}

.tb-statement__figure {
  position: absolute;
  inset: 0;
}

.tb-statement__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focal, 50% 50%);
  filter: blur(var(--blur, 0px));
  /* Scale only when a CSS blur is on, so the soft edge stays off-screen */
  transform: scale(var(--stmt-scale, 1));
}

.tb-statement__scrim {
  position: absolute;
  inset: 0;
  background: var(--scrim, rgba(0, 0, 0, 0.35));
}

.tb-statement__box {
  position: relative;
  z-index: 2;
  width: var(--box-w, 76%);
  text-align: var(--box-align, center);
}

.tb-statement__heading {
  font-family: var(--f-display);
}

.tb-statement__link {
  display: inline-flex;
}

/* ===================================================== reservation hero === */

.tb-reserve {
  position: relative;
  min-height: 100svh;
  min-height: 100dvh;
  background-color: #111;
  background-image: url("../assets/img/photos/book/hero.webp");
  background-size: cover;
  background-position: var(--focal, 50% 58%);
  background-repeat: no-repeat;
  overflow: hidden;
}

@media (max-width: 860px) {
  .tb-reserve {
    background-image: url("../assets/img/photos/book/hero.m.webp");
  }
}

html[data-page="book"] .tb-reserve {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: 100%;
  min-height: 0;
  height: 100%;
  height: 100dvh;
}

html[data-page="book"] .tb-reserve__col,
html[data-page="book"] .tb-reserve__line,
html[data-page="book"] .tb-reserve__label,
html[data-page="book"] .tb-header__page {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  letter-spacing: 0 !important;
  word-spacing: 0.06em;
  text-shadow: none !important;
  -webkit-text-stroke: 0;
}

.tb-reserve__figure {
  display: none;
}

.tb-reserve__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: calc(40 * var(--u));
  padding-top: calc(36 * var(--u));
  padding-bottom: max(calc(40 * var(--u)), env(safe-area-inset-bottom, 0px));
  padding-left: max(24px, var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(24px, var(--gutter), env(safe-area-inset-right, 0px));
  background: #111;
  color: var(--c-cream);
}

.tb-reserve__col {
  display: flex;
  flex-direction: column;
  gap: calc(6 * var(--u));
  flex: 0 1 auto;
  min-width: 0;
  max-width: 48%;
  font-family: var(--f-body);
  font-size: calc(15 * var(--u));
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0.01em;
  overflow-wrap: break-word;
}

.tb-reserve__col--right {
  text-align: right;
  align-items: flex-end;
}

.tb-reserve__label {
  opacity: 0.72;
}

.tb-reserve__line {
  color: inherit;
}

a.tb-reserve__line {
  text-decoration: none;
}

@media (hover: hover) {
  a.tb-reserve__line:hover {
    opacity: 0.72;
  }
}

@media (max-width: 860px) {
  .tb-reserve__bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding-top: 20px;
    padding-bottom: max(20px, env(safe-area-inset-bottom, 0px));
  }

  .tb-reserve__col,
  .tb-reserve__line,
  .tb-reserve__label {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 15px;
    font-weight: 400;
    font-synthesis: none;
    font-kerning: none;
    font-feature-settings: "kern" 0, "liga" 0;
    font-variation-settings: normal;
    line-height: 1.55;
    letter-spacing: 0;
    word-spacing: 0.08em;
    text-shadow: none;
    -webkit-text-stroke: 0;
    gap: 8px;
    max-width: 100%;
  }

  .tb-reserve__col--right {
    text-align: left;
    align-items: flex-start;
  }
}

/* Landscape phones: thin two-column bar + short header so the photo stays. */
@media (orientation: landscape) and (max-height: 700px) {
  html[data-page="book"] {
    --header-h: 48px;
    --header-h-scrolled: 48px;
    --logo-h: 26px;
  }

  html[data-page="book"] .tb-header__logo img {
    max-width: 34vw;
  }

  html[data-page="book"] .tb-reserve__bar {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding-top: 8px;
    padding-bottom: max(8px, env(safe-area-inset-bottom, 0px));
    padding-left: max(20px, env(safe-area-inset-left, 0px));
    padding-right: max(20px, env(safe-area-inset-right, 0px));
  }

  html[data-page="book"] .tb-reserve__col,
  html[data-page="book"] .tb-reserve__line,
  html[data-page="book"] .tb-reserve__label {
    flex: 0 0 auto;
    max-width: none;
    font-size: 12px;
    line-height: 1.3;
    gap: 1px;
    overflow-wrap: normal;
    word-break: normal;
  }

  html[data-page="book"] .tb-reserve__col--right {
    text-align: right;
    align-items: flex-end;
  }
}

/* ========================================================== faq + contact = */

.tb-faqc {
  padding-top: var(--pad-top, calc(72 * var(--u)));
  padding-bottom: var(--pad-bottom, calc(72 * var(--u)));
}

.tb-faqc__cols {
  display: flex;
  gap: var(--col-gap, calc(80 * var(--u)));
  align-items: flex-start;
}

.tb-faqc__contact {
  flex: 0 0 var(--contact-w, 42%);
  max-width: var(--contact-w, 42%);
  display: flex;
  flex-direction: column;
}

.tb-faqc__faq {
  flex: 1 1 auto;
  min-width: 0;
}

.tb-faqc__heading {
  font-family: var(--f-display);
}

.tb-faq__item {
  border-bottom: 1px solid var(--c-rule);
}

.tb-faq__item:first-child {
  border-top: 1px solid var(--c-rule);
}

.tb-faq__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(24 * var(--u));
  width: 100%;
  padding-block: calc(18 * var(--u));
  text-align: left;
  transition: opacity 420ms var(--motion-easing);
}

@media (hover: hover) {
  .tb-faq__trigger:hover {
    opacity: 0.72;
  }
}

.tb-faq__chevron {
  flex: 0 0 auto;
  width: 1.4em;
  height: 1.4em;
  position: relative;
  transition: transform 560ms var(--motion-easing);
}

.tb-faq__chevron::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 42%;
  width: 0.62em;
  height: 0.62em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translate(-50%, -50%) rotate(45deg);
}

.tb-faq__item.is-open .tb-faq__chevron {
  transform: rotate(180deg);
}

/* 0fr -> 1fr gives a true auto-height transition without measuring in JS */
.tb-faq__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 620ms var(--motion-easing);
}

.tb-faq__item.is-open .tb-faq__panel {
  grid-template-rows: 1fr;
}

.tb-faq__panel > div {
  overflow: hidden;
}

.tb-faq__answer {
  padding-bottom: calc(22 * var(--u));
}

/* ---------------------------------------------------------------- gallery */

.tb-faqc__gallery-wrap {
  margin-top: var(--gal-mt, calc(56 * var(--u)));
}

.tb-faqc__gallery {
  display: flex;
  justify-content: flex-start;
  gap: var(--gal-gap, calc(28 * var(--u)));
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
}

.tb-faqc__gallery.is-centered {
  justify-content: center;
}

.tb-faqc__gallery.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
}

.tb-faqc__gallery::-webkit-scrollbar {
  display: none;
}

.tb-faqc__scroller {
  position: relative;
  display: block;
  width: 100%;
  height: calc(5 * var(--u));
  margin-top: calc(22 * var(--u));
  background: rgba(239, 236, 231, 0.2);
  border-radius: 99px;
  cursor: pointer;
}

.tb-faqc__scroller-thumb {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  min-width: 12%;
  background: rgba(239, 236, 231, 0.82);
  border-radius: 99px;
  pointer-events: none;
  transition: left 80ms linear, width 80ms linear;
}

.tb-faqc__gallery figure {
  flex: 0 0 calc((100% - (var(--gal-cols, 4) - 1) * var(--gal-gap)) / var(--gal-cols, 4));
  min-width: 0;
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  background: rgba(0, 0, 0, 0.22);
}

.tb-faqc__gallery img {
  width: 100%;
  aspect-ratio: var(--gal-aspect, 1 / 1);
  object-fit: cover;
  pointer-events: none;
  transition: transform 900ms var(--motion-easing);
}

@media (hover: hover) {
  .tb-faqc__gallery figure:hover img {
    transform: scale(var(--gal-zoom, 1.06));
  }
}

/* =============================================================== footer === */

.tb-footer {
  padding-top: var(--pad-top, calc(56 * var(--u)));
  padding-bottom: var(--pad-bottom, calc(36 * var(--u)));
}

.tb-footer__top {
  display: flex;
  align-items: flex-end;
  gap: calc(48 * var(--u));
}

.tb-footer__rail {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: calc(36 * var(--u));
  padding-bottom: calc(8 * var(--u));
}

.tb-footer__group a {
  display: block;
  position: relative;
  width: fit-content;
}

.tb-footer__group a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.05em;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 520ms var(--motion-easing);
}

.tb-footer__group a[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

@media (hover: hover) {
  .tb-footer__group a:hover::after {
    transform: scaleX(1);
    transform-origin: left;
  }
}

.tb-footer__lockup {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
}

.tb-section[data-lockup-align="left"] .tb-footer__lockup {
  align-items: flex-start;
}

.tb-footer__lockup img {
  width: var(--lockup-w, 62vw);
  max-width: 100%;
  height: auto;
}

.tb-footer__copyright {
  margin-top: calc(14 * var(--u));
}

/* ======================================================== media carousel === */

.tb-section--flush + .tb-section--flush {
  margin-top: 0;
}

.tb-media-carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: transparent;
  cursor: pointer;
  touch-action: pan-y;
}

/* Kitchen / family bands keep an explicit height. Catch uses the sizer image. */
.tb-media-carousel.is-fixed {
  height: var(--mc-h);
}

.tb-media-carousel__sizer {
  display: block;
  width: 100%;
  height: auto;
  visibility: hidden;
  pointer-events: none;
}

.tb-media-carousel.is-fixed .tb-media-carousel__sizer {
  display: none;
}

.tb-media-carousel__slide,
.tb-media-carousel__slide.tb-dish-hit {
  position: absolute;
  inset: 0;
  margin: 0;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  background: #161616;
  transition: opacity var(--trans-ms, 900ms) var(--motion-easing);
}

.tb-media-carousel__slide.is-active,
.tb-media-carousel:not(:has(.is-active)) .tb-media-carousel__slide:first-of-type {
  z-index: 1;
  opacity: 1;
  pointer-events: auto;
}

.tb-media-carousel__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.tb-media-carousel__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(22 * var(--u));
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: calc(10 * var(--u));
  pointer-events: none;
}

.tb-media-carousel__dots .tb-split__dot {
  pointer-events: auto;
}

/* ============================================================ copy band === */

.tb-copy-band {
  padding-block: var(--pad-y, calc(96 * var(--u)));
  text-align: center;
}

.tb-copy-band__heading {
  font-family: var(--f-display);
  max-width: 36ch;
  margin-inline: auto;
}

/* ========================================================= story + brands === */

.tb-story {
  padding-block: var(--pad-y, calc(88 * var(--u)));
  text-align: center;
}

.tb-story__heading {
  font-family: var(--f-display);
  max-width: 28ch;
  margin-inline: auto;
}

.tb-story__cols {
  display: flex;
  gap: var(--col-gap, calc(64 * var(--u)));
  max-width: 72ch;
  margin: calc(48 * var(--u)) auto 0;
  text-align: left;
}

.tb-story__col {
  flex: 1 1 0;
  min-width: 0;
}

.tb-story__brands {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: calc(72 * var(--u));
  margin-top: calc(72 * var(--u));
  flex-wrap: wrap;
}

.tb-story__brand {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  width: calc(220 * var(--u));
  padding-bottom: calc(28 * var(--u));
  text-decoration: none;
  color: inherit;
}

.tb-story__mark {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: calc(180 * var(--u));
  height: calc(120 * var(--u));
  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.tb-story__brand img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}

.tb-story__badge {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 5px;
  font-family: var(--f-label);
  line-height: 1.2;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.35em);
  transition:
    opacity 280ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 280ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.tb-story__brand:hover .tb-story__mark,
.tb-story__brand:focus-visible .tb-story__mark {
  transform: translateY(calc(-16 * var(--u)));
}

.tb-story__brand.has-badge:hover .tb-story__badge,
.tb-story__brand.has-badge:focus-visible .tb-story__badge {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .tb-story__mark,
  .tb-story__badge {
    transition: none;
  }

  .tb-story__brand:hover .tb-story__mark,
  .tb-story__brand:focus-visible .tb-story__mark,
  .tb-story__brand.has-badge:hover .tb-story__badge,
  .tb-story__brand.has-badge:focus-visible .tb-story__badge {
    transform: none;
  }
}

@media (max-width: 860px) {
  .tb-copy-band,
  .tb-story {
    text-align: left;
  }

  .tb-copy-band__heading,
  .tb-story__heading {
    max-width: none;
    width: 100%;
    margin-inline: 0;
    text-align: left;
  }

  .tb-story__cols {
    flex-direction: column;
    max-width: 100%;
  }

  .tb-story__brands {
    gap: 8vw;
    margin-top: 12vw;
  }

  .tb-story__brand {
    width: 28vw;
    padding-bottom: 5vw;
  }

  .tb-story__mark {
    width: 26vw;
    height: 18vw;
  }
}

/* =========================================================== location map === */

.tb-locate {
  display: flex;
  align-items: center;
  gap: calc(64 * var(--u));
  padding-block: var(--pad-y, calc(88 * var(--u)));
}

.tb-locate__copy {
  flex: 1 1 auto;
  min-width: 0;
}

.tb-locate__heading {
  font-family: var(--f-display);
}

.tb-locate__links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(18 * var(--u));
  margin-top: calc(40 * var(--u));
}

.tb-locate__map {
  flex: 0 0 var(--map-w, 56%);
  max-width: var(--map-w, 56%);
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--c-green-deep);
}

.tb-locate__map iframe {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 860px) {
  .tb-locate {
    gap: 8vw;
  }

  .tb-locate__links {
    margin-top: 6vw;
    gap: 4vw;
  }

  .tb-locate__map {
    min-height: 0;
  }
}

/* =========================================================== flavor band === */

.tb-flavor {
  padding-block: var(--pad-y, calc(88 * var(--u)));
}

.tb-flavor__heading {
  font-family: var(--f-display);
  text-align: center;
  max-width: 22ch;
  margin-inline: auto;
}

.tb-flavor__gallery-wrap {
  margin-top: var(--gal-mt, calc(56 * var(--u)));
}

.tb-flavor__foot {
  display: flex;
  align-items: flex-start;
  gap: calc(64 * var(--u));
  margin-top: calc(56 * var(--u));
}

.tb-flavor__quote {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 22ch;
  font-family: var(--f-display);
}

.tb-flavor__link {
  flex: 0 0 auto;
  margin-top: calc(12 * var(--u));
}

.tb-section[data-bg="green"] .tb-split__figure,
.tb-section[data-bg="green"] .tb-split__carousel {
  border-color: transparent;
}

@media (max-width: 860px) {
  /* Same left edge as the photos and the body — no centered/balanced
     inset, no extra side padding on the heading only. */
  .tb-flavor .tb-flavor__heading,
  .tb-flavor .tb-flavor__quote,
  .tb-flavor .tb-lines {
    text-align: left;
    text-wrap: pretty;
    max-width: none;
    width: 100%;
    margin-inline: 0;
    padding-inline: 0;
  }

  .tb-flavor__foot {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 6vw;
    margin-top: 8vw;
  }

  .tb-flavor__quote {
    max-width: none;
  }
}

/* ========================================================= dish captions === */

.tb-dish-hit {
  position: relative;
  cursor: pointer;
}

.tb-dish-hit__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: calc(18 * var(--u)) calc(16 * var(--u)) calc(14 * var(--u));
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 100%);
  color: #fff;
  opacity: 0;
  transform: translateY(0.35em);
  transition:
    opacity 280ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: auto;
  text-align: left;
  cursor: pointer;
}

.tb-dish-hit:hover .tb-dish-hit__caption,
.tb-dish-hit:focus-visible .tb-dish-hit__caption,
.tb-dish-hit:focus-within .tb-dish-hit__caption,
.tb-dish-hit.is-featured:hover .tb-dish-hit__caption {
  opacity: 1;
  transform: translateY(0);
}

a.tb-dish-hit__link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.tb-faqc__gallery a.tb-dish-hit__link,
.tb-flavor__gallery a.tb-dish-hit__link {
  display: block;
  position: relative;
}

.tb-media-carousel__slide > a.tb-dish-hit__link,
.tb-split__figure > a.tb-dish-hit__link {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.tb-media-carousel__slide > a.tb-dish-hit__link img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tb-dish-hit__name {
  display: block;
  font-family: var(--f-display);
  font-size: calc(28 * var(--u));
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.tb-dish-hit__cta {
  display: block;
  margin-top: calc(10 * var(--u));
  font-family: var(--f-label);
  font-size: calc(16 * var(--u));
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tb-faqc__gallery .tb-dish-hit__name {
  font-size: calc(24 * var(--u));
}

.tb-faqc__gallery .tb-dish-hit__cta {
  font-size: calc(15 * var(--u));
}

.tb-faqc__gallery figure,
.tb-flavor__gallery figure {
  position: relative;
  cursor: pointer;
}

.tb-faqc__gallery img,
.tb-flavor__gallery img {
  pointer-events: none;
}

.tb-media-carousel__slide[data-catch],
.tb-media-carousel__slide[data-dish] {
  cursor: pointer;
}

.tb-media-carousel__slide.tb-dish-hit .tb-dish-hit__caption {
  z-index: 1;
  padding: calc(28 * var(--u)) calc(28 * var(--u)) calc(52 * var(--u));
}

.tb-media-carousel__slide.tb-dish-hit .tb-dish-hit__name {
  font-size: calc(36 * var(--u));
}

.tb-media-carousel__slide.tb-dish-hit .tb-dish-hit__cta {
  font-size: calc(14 * var(--u));
}

/* =========================================================== dish modal === */

.tb-dish-modal {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: block;
  pointer-events: none;
}

.tb-dish-modal[hidden] {
  display: none !important;
}

.tb-dish-modal.is-open,
.tb-dish-modal.is-closing {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(36 * var(--u));
  pointer-events: auto;
}

.tb-dish-modal__scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 84, 58, 0.72);
  border: 0;
  cursor: pointer;
  opacity: 0;
  transition: opacity 480ms var(--motion-easing);
}

.tb-dish-modal.is-open .tb-dish-modal__scrim {
  opacity: 1;
}

.tb-dish-modal__panel {
  position: relative;
  z-index: 1;
  width: min(960px, 100%);
  height: auto;
  max-height: calc(100vh - 72px);
  overflow: auto;
  background: var(--c-cream);
  color: var(--c-green);
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  grid-template-rows: auto;
  gap: calc(32 * var(--u));
  padding: calc(28 * var(--u));
  align-items: start;
  box-sizing: border-box;
  opacity: 0;
  transform: translate3d(0, calc(22 * var(--u) * var(--motion-scale)), 0)
    scale(calc(1 - 0.025 * var(--motion-scale)));
  transition:
    opacity 560ms var(--motion-easing),
    transform 680ms var(--motion-easing);
}

.tb-dish-modal.is-open .tb-dish-modal__panel {
  opacity: 1;
  transform: none;
}

.tb-dish-modal.is-open .tb-dish-modal__scrim,
.tb-dish-modal.is-closing .tb-dish-modal__scrim,
.tb-dish-modal.is-open .tb-dish-modal__panel,
.tb-dish-modal.is-closing .tb-dish-modal__panel {
  will-change: opacity, transform;
}

.tb-dish-modal__close {
  position: absolute;
  top: calc(18 * var(--u));
  right: calc(18 * var(--u));
  width: calc(40 * var(--u));
  height: calc(40 * var(--u));
  border: 0;
  background: transparent;
  color: var(--c-green);
  font-size: calc(28 * var(--u));
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}

.tb-dish-modal__hero-wrap {
  display: none;
  overflow: hidden;
  background: #d8d4cd;
}

.tb-dish-modal__hero {
  display: block;
  width: 100%;
  height: auto;
}

.tb-dish-modal__media {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto;
  gap: calc(12 * var(--u));
  align-items: start;
  align-self: start;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: auto;
}

.tb-dish-modal__figure {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  min-height: 0;
  overflow: hidden;
  background: #d8d4cd;
  cursor: pointer;
  border: 0;
  padding: 0;
  appearance: none;
}

.tb-dish-modal__figure.is-featured {
  grid-column: 1 / -1;
  grid-row: 1;
  cursor: default;
  aspect-ratio: 3 / 2;
  height: auto;
  min-height: 0;
}

.tb-dish-modal__figure:not(.is-featured) {
  grid-column: auto;
  grid-row: 2;
}

.tb-dish-modal__figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1);
  transition: transform 720ms var(--motion-easing);
}

.tb-dish-modal__hero {
  transform: scale(1);
  transition: transform 720ms var(--motion-easing);
}

@media (hover: hover) {
  .tb-dish-modal__figure:not(.is-featured):hover img,
  .tb-dish-modal__figure:not(.is-featured):focus-visible img {
    transform: scale(calc(1 + 0.06 * var(--motion-scale)));
  }

  .tb-dish-modal__figure.is-featured:hover img {
    transform: scale(calc(1 + 0.035 * var(--motion-scale)));
  }

  .tb-dish-modal__hero-wrap:hover .tb-dish-modal__hero {
    transform: scale(calc(1 + 0.04 * var(--motion-scale)));
  }
}

.tb-dish-modal__figure.is-featured img {
  aspect-ratio: 3 / 2;
  height: auto;
}

.tb-dish-modal__figure:not(.is-featured) img {
  aspect-ratio: 1 / 1;
}

.tb-dish-modal__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  height: auto;
  max-height: none;
  overflow: visible;
  padding-right: calc(8 * var(--u));
  align-self: stretch;
}

.tb-dish-modal__body {
  flex: 0 0 auto;
  min-height: 0;
  overflow: visible;
  padding-right: 0;
}

.tb-dish-modal__body::-webkit-scrollbar {
  width: 10px;
}

.tb-dish-modal__body::-webkit-scrollbar-track {
  background: rgba(0, 84, 58, 0.08);
}

.tb-dish-modal__body::-webkit-scrollbar-thumb {
  background: rgba(0, 84, 58, 0.45);
}

.tb-dish-modal__title {
  flex: 0 0 auto;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: calc(40 * var(--u));
  line-height: 1.12;
  letter-spacing: -0.012em;
  margin: 0 0 calc(18 * var(--u));
  max-width: 18ch;
}

.tb-dish-modal__body p {
  font-size: calc(21 * var(--u));
  line-height: 1.5;
  margin: 0 0 1.1em;
  max-width: none;
}

.tb-dish-modal__body p:last-child {
  margin-bottom: 0;
}

@media (max-width: 1100px) {
  .tb-dish-modal.is-open,
  .tb-dish-modal.is-closing {
    align-items: center;
    justify-content: center;
    padding: 4vw;
  }

  .tb-dish-modal__panel {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    width: min(560px, 100%);
    max-height: calc(100dvh - 8vw);
    gap: 4.2vw;
    padding: 0 5.6vw 6vw;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translate3d(0, calc(6vh * var(--motion-scale)), 0);
  }

  .tb-dish-modal__close {
    position: sticky;
    top: 0;
    flex: 0 0 14vw;
    width: 100%;
    height: 14vw;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    background: var(--c-cream);
    font-size: 8vw;
    z-index: 5;
  }

  .tb-dish-modal__hero-wrap {
    display: block;
    flex: 0 0 auto;
    width: 100%;
    overflow: hidden;
    background: #d8d4cd;
  }

  .tb-dish-modal__hero {
    display: block;
    width: 100%;
    height: auto;
    max-height: none;
    aspect-ratio: 3 / 2;
    object-fit: contain;
    object-position: center;
  }

  .tb-dish-modal__media {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto;
    grid-auto-rows: auto;
    align-items: stretch;
    align-content: start;
    flex: 0 0 auto;
    gap: 3.2vw;
    width: 100%;
    height: auto;
    min-height: auto;
    overflow: visible;
  }

  .tb-dish-modal__figure,
  .tb-dish-modal__figure.is-featured,
  .tb-dish-modal__figure:not(.is-featured) {
    position: relative;
    grid-column: auto;
    grid-row: auto;
    width: 100%;
    height: auto;
    max-height: none;
    min-height: auto;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    z-index: auto;
  }

  .tb-dish-modal__figure.is-featured {
    display: none;
  }

  .tb-dish-modal__figure:not(.is-featured) img,
  .tb-dish-modal__figure img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: center;
  }

  .tb-dish-modal__title {
    font-size: clamp(28px, 8vw, 52px);
    margin-bottom: 4vw;
  }

  .tb-dish-modal__body p {
    font-size: 21px;
  }

  .tb-dish-modal__copy {
    position: relative;
    z-index: auto;
    flex: 0 0 auto;
    height: auto;
    max-height: none;
    min-height: auto;
    overflow: visible;
    background: var(--c-cream);
  }

  .tb-dish-modal__body {
    flex: 0 0 auto;
    overflow: visible;
    padding-right: 0;
  }

  .tb-dish-hit__name {
    font-size: 5.2vw;
  }

  .tb-dish-hit__cta {
    font-size: 3.6vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tb-dish-modal__scrim,
  .tb-dish-modal__panel,
  .tb-dish-modal__figure img,
  .tb-dish-modal__hero {
    transition: none;
    transform: none;
  }
}