:root {
        --tb-straw: #d9c97d;
        --tb-straw-soft: #efe6b8;
        --tb-cream: #f8f3e7;
        --tb-cream-deep: #efe5cf;
        --tb-line: rgba(89, 90, 56, 0.16);
        --tb-white: rgba(255, 252, 245, 0.82);
        --tb-olive: #5a6a24;
        --tb-olive-dark: #232913;
        --tb-olive-text: #4a591c;
        --tb-ink: #0d1109;
        --tb-muted: #10140d;
      }

      html {
        scroll-behavior: smooth;
      }

      body {
        background: var(--tb-cream);
        color: var(--tb-ink);
      }

      .tb-serif {
        font-family: Georgia, Cambria, "Times New Roman", Times, serif;
        letter-spacing: -0.02em;
      }

      .tb-nav-link {
        position: relative;
        border-radius: 9999px;
        padding: 0.55rem 0.85rem;
        font-size: 0.93rem;
        font-weight: 700;
        color: var(--tb-ink);
        text-shadow:
          0 1px 0 rgba(255, 255, 255, 0.56),
          0 1px 8px rgba(248, 243, 231, 0.46);
        transition: all 0.28s ease;
      }

      .tb-nav-link:hover {
        background: rgba(255, 251, 240, 0.75);
        color: var(--tb-olive-dark);
        transform: translateY(-1px);
      }

      .tb-nav-link::after {
        content: "";
        position: absolute;
        left: 14px;
        right: 14px;
        bottom: 7px;
        height: 2px;
        border-radius: 9999px;
        background: linear-gradient(90deg, var(--tb-olive), var(--tb-straw));
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.28s ease;
      }

      .tb-nav-link:hover::after {
        transform: scaleX(1);
      }

      .tb-mobile-link {
        border-radius: 1rem;
        padding: 0.7rem 0.9rem;
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--tb-ink);
        text-shadow:
          0 1px 0 rgba(255, 255, 255, 0.54),
          0 1px 8px rgba(248, 243, 231, 0.42);
        transition: all 0.28s ease;
      }

      .tb-mobile-link:hover {
        background: rgba(255, 251, 240, 0.85);
        color: var(--tb-olive-dark);
      }

      .tb-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 1rem;
  background: linear-gradient(135deg, var(--tb-olive), #86924d);
  padding: 0.9rem 1.3rem;
  font-weight: 600;
  color: white;
  box-shadow: 0 10px 28px rgba(76, 85, 40, 0.18);
  transition:
    transform 0.28s ease,
    box-shadow 0.28s ease,
    filter 0.28s ease,
    background 0.28s ease;
}

.tb-btn-primary:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow:
    0 18px 38px rgba(76, 85, 40, 0.28),
    0 0 0 4px rgba(217, 201, 125, 0.18);
  filter: brightness(1.08) saturate(1.08);
}

.tb-btn-primary:active {
  transform: translateY(-1px) scale(0.99);
}

      .tb-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 1rem;
  border: 1px solid var(--tb-line);
  background: rgba(255, 252, 245, 0.9);
  padding: 0.9rem 1.3rem;
  font-weight: 600;
  color: var(--tb-ink);
  box-shadow: 0 8px 22px rgba(84, 82, 53, 0.06);
  transition:
    transform 0.28s ease,
    box-shadow 0.28s ease,
    background 0.28s ease,
    border-color 0.28s ease,
    color 0.28s ease;
}

.tb-btn-secondary:hover {
  transform: translateY(-3px) scale(1.03);
  background: rgba(255, 250, 238, 0.98);
  color: var(--tb-olive-dark);
  border-color: rgba(111, 123, 61, 0.3);
  box-shadow:
    0 16px 34px rgba(84, 82, 53, 0.14),
    0 0 0 4px rgba(217, 201, 125, 0.14);
}

      .tb-btn-soft {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border: 1px solid var(--tb-line);
  background: rgba(255, 252, 245, 0.82);
  padding: 0.55rem 0.95rem;
  font-size: 0.88rem;
  color: var(--tb-ink);
  transition:
    transform 0.24s ease,
    box-shadow 0.24s ease,
    background 0.24s ease,
    border-color 0.24s ease;
}

.tb-btn-soft:hover {
  transform: translateY(-2px);
  background: rgba(255, 250, 238, 0.96);
  border-color: rgba(111, 123, 61, 0.28);
  box-shadow: 0 10px 24px rgba(84, 82, 53, 0.12);
}

.tb-btn-featured {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 220px;
  white-space: nowrap;
  border-radius: 1rem;
  border: 1px solid rgba(111, 123, 61, 0.22);
  background: rgba(255, 252, 245, 0.96);
  padding: 0.95rem 1.4rem;
  font-weight: 700;
  color: var(--tb-ink);
  box-shadow:
    0 10px 24px rgba(84, 82, 53, 0.1),
    0 1px 0 rgba(255, 255, 255, 0.6);
  transition:
    transform 0.28s ease,
    box-shadow 0.28s ease,
    background 0.28s ease,
    border-color 0.28s ease,
    color 0.28s ease,
    filter 0.28s ease;
}

.tb-btn-featured:hover {
  transform: translateY(-4px) scale(1.04);
  background: linear-gradient(135deg, rgba(252, 255, 238, 0.98), rgba(245, 237, 204, 0.98));
  color: var(--tb-olive-dark);
  border-color: rgba(111, 123, 61, 0.36);
  box-shadow:
    0 18px 38px rgba(84, 82, 53, 0.18),
    0 0 0 5px rgba(217, 201, 125, 0.18);
  filter: saturate(1.03);
}

.tb-btn-featured:active {
  transform: translateY(-1px) scale(0.99);
}

.tb-btn-menu-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  min-width: 240px;
  white-space: nowrap;
  border-radius: 1.1rem;
  border: 1px solid rgba(90, 106, 36, 0.18);
  background: linear-gradient(135deg, #62722a, #87944a);
  padding: 1rem 1.5rem;
  font-weight: 700;
  color: white;
  box-shadow:
    0 14px 30px rgba(76, 85, 40, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition:
    transform 0.26s ease,
    box-shadow 0.26s ease,
    filter 0.26s ease,
    background 0.26s ease;
}

.tb-btn-menu-cta:hover {
  transform: translateY(-4px) scale(1.04);
  filter: brightness(1.08) saturate(1.08);
  box-shadow:
    0 22px 42px rgba(76, 85, 40, 0.32),
    0 0 0 5px rgba(217, 201, 125, 0.2);
}

.tb-btn-menu-cta:active {
  transform: translateY(-1px) scale(0.99);
}

.tb-btn-menu-cta svg {
  transition: transform 0.26s ease;
}

.tb-btn-menu-cta:hover svg {
  transform: translateX(4px);
}

      .tb-card {
        border: 1px solid var(--tb-line);
        background: rgba(255, 252, 245, 0.9);
        box-shadow: 0 12px 34px rgba(69, 68, 43, 0.06);
        backdrop-filter: blur(12px);
      }

      .tb-chip {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        border-radius: 9999px;
        border: 1px solid rgba(111, 123, 61, 0.22);
        background: rgba(255, 252, 245, 0.78);
        padding: 0.45rem 0.8rem;
        font-size: 0.76rem;
        font-weight: 700;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--tb-olive-dark);
      }

      .tb-divider {
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(111, 123, 61, 0.18), transparent);
      }

      .tb-arch {
        border-radius: 9999px 9999px 1.4rem 1.4rem;
      }

      .tb-gallery-a {
        background:
          linear-gradient(180deg, rgba(192, 214, 206, 0.92), rgba(233, 225, 190, 0.88)),
          radial-gradient(circle at 70% 18%, rgba(250, 234, 157, 0.9) 0 12%, transparent 13%);
      }

      .tb-gallery-b {
        background:
          linear-gradient(180deg, rgba(219, 224, 189, 0.82), rgba(157, 175, 118, 0.96)),
          radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.24) 0 10%, transparent 11%);
      }

      .tb-gallery-c {
        background:
          linear-gradient(180deg, rgba(243, 228, 183, 0.9), rgba(198, 165, 108, 0.9)),
          radial-gradient(circle at 78% 24%, rgba(255, 255, 255, 0.2) 0 8%, transparent 9%);
      }

      .tb-gallery-d {
        background:
          linear-gradient(180deg, rgba(189, 200, 161, 0.92), rgba(122, 139, 82, 0.92)),
          radial-gradient(circle at 32% 22%, rgba(250, 234, 157, 0.55) 0 10%, transparent 11%);
      }

      .tb-stat {
        border-radius: 1.4rem;
        border: 1px solid var(--tb-line);
        background: rgba(255, 252, 245, 0.8);
        padding: 1rem;
      }

      .tb-scene-bg {
        position: fixed;
        inset: 0;
        z-index: -10;
        background-image:
          linear-gradient(rgba(248, 243, 231, 0.5), rgba(248, 243, 231, 0.5)),
          url("/demos/terra-bistro/hero-terrabistro.png");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
      }

      .tb-scene-bg::after {
        content: "";
        position: absolute;
        inset: 0;
        background:
          radial-gradient(circle at 20% 20%, rgba(217, 201, 125, 0.1), transparent 30%),
          radial-gradient(circle at 80% 25%, rgba(111, 123, 61, 0.08), transparent 28%),
          radial-gradient(circle at 50% 80%, rgba(239, 229, 184, 0.1), transparent 35%);
        pointer-events: none;
      }

      .tb-hero-title {
        line-height: 1.08 !important;
        letter-spacing: -0.04em;
        text-wrap: unset;
        text-shadow:
          0 1px 0 rgba(255, 255, 255, 0.72),
          0 3px 18px rgba(248, 243, 231, 0.62),
          0 10px 28px rgba(248, 243, 231, 0.28);
        -webkit-text-stroke: 0.15px rgba(255, 255, 255, 0.25);
      }

      @media (min-width: 768px) {
        .tb-hero-title {
          line-height: 1.02 !important;
        }
      }

      .tb-hero-line {
        display: block;
      }

      .tb-hero-highlight {
        display: block;
        margin-top: 0.08em;
        color: var(--tb-olive-text);
        text-shadow:
          0 1px 0 rgba(255, 255, 255, 0.52),
          0 2px 10px rgba(248, 243, 231, 0.48);
      }

      .tb-hero-copy {
        color: var(--tb-muted);
        font-weight: 600;
        text-shadow:
          0 1px 0 rgba(255, 255, 255, 0.58),
          0 2px 10px rgba(248, 243, 231, 0.46);
      }

      .tb-hero-kicker {
        text-shadow:
          0 1px 0 rgba(255, 255, 255, 0.58),
          0 1px 8px rgba(248, 243, 231, 0.42);
      }