/* ==========================================================================
   Tea Talk — Hero (preview)
   Layout and art direction follow the supplied reference; the palette,
   type colour and content are Tea Talk's.
   ========================================================================== */
:root {
  /* warm neutrals */
  --cream: #f7f1e6;
  --cream-deep: #f1e7d6;
  --beige: #e6d4ba;

  /* muted accents */
  --sage: #a9bc96;
  --sage-soft: #c8d4b8;
  --peach: #f1c8a4;
  --peach-soft: #f8ddc6;
  --blue: #a7bbcd;
  --blue-soft: #c7d4e0;

  /* ink */
  --ink: #17140f;
  --ink-soft: #4a4238;
  --ink-mute: #6d6355;

  --display: "Fredoka", "Trebuchet MS", sans-serif;
  --body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --gutter: clamp(20px, 4vw, 64px);
  --section-space: clamp(48px, 5.2vw, 76px);
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
h1 { margin: 0; }
p { margin: 0; }

.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 200;
  background: var(--ink);
  color: var(--cream);
  padding: 12px 18px;
  border-radius: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: top 0.2s var(--ease);
}
.skip:focus { top: 12px; }

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  border-radius: 8px;
}

.page {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* A slim, low-key announcement strip that keeps the page moving gently. */
.promo-bar {
  position: relative;
  z-index: 30;
  width: 100%;
  min-height: 34px;
  overflow: hidden;
  display: flex;
  align-items: center;
  background: var(--sage-soft);
  color: var(--ink);
  border-bottom: 1px solid rgba(23, 20, 15, 0.1);
}

.promo-bar__track {
  display: flex;
  width: max-content;
  animation: promo-scroll 34s linear infinite;
}

.promo-bar__track span {
  display: inline-flex;
  align-items: center;
  padding: 7px clamp(28px, 5vw, 72px);
  white-space: nowrap;
  font-size: clamp(0.68rem, 0.85vw, 0.82rem);
  font-weight: 700;
  letter-spacing: 0.025em;
}

@keyframes promo-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ==========================================================================
   Header
   ========================================================================== */
.hd {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: clamp(16px, 2.2vw, 26px) var(--gutter);
}

/* mirrors the hero's own grid (same columns, same gap) so the nav's start
   lines up exactly with where the hero copy — "BUBBLE TEA, MATCHA…" —
   begins beneath it, instead of an approximated margin. */
@media (min-width: 1000px) {
  .hd {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(24px, 3vw, 56px);
  }
  .hd__brand { grid-column: 1; justify-self: start; }
  .hd__nav { grid-column: 2; justify-self: start; margin-left: 0; }
}

.hd__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.35rem, 2vw, 1.6rem);
  letter-spacing: -0.01em;
}

.hd__brand img { width: clamp(38px, 3.4vw, 46px); height: auto; }

.hd__nav {
  display: none;
  gap: clamp(18px, 2.2vw, 34px);
}

.hd__nav a {
  position: relative;
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 0;
}

.hd__nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 2px;
  background: var(--ink);
  transition: right 0.3s var(--ease);
}

.hd__nav a:hover::after,
.hd__nav a.is-current::after { right: 0; }

.hd__lang {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: clamp(2px, 0.5vw, 8px);
  color: var(--ink-mute);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.hd__lang button,
.drawer__lang button {
  padding: 2px 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}

.hd__lang button.is-active,
.hd__lang button:hover,
.drawer__lang button.is-active,
.drawer__lang button:hover { color: var(--ink); }

.hd__burger {
  margin-left: auto;
  width: 46px;
  height: 46px;
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 0 11px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  cursor: pointer;
}

.hd__burger span {
  height: 2.5px;
  background: var(--ink);
  border-radius: 2px;
}

@media (min-width: 1000px) {
  .hd__nav { display: flex; }
  .hd__burger { display: none; }
}

/* mobile drawer */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--cream);
  padding: 26px var(--gutter) 40px;
  display: flex;
  flex-direction: column;
  transform: translateY(-100%);
  transition: transform 0.4s var(--ease);
}

.drawer.is-open { transform: translateY(0); }
body.locked { overflow: hidden; }

.drawer__close {
  align-self: flex-end;
  width: 46px;
  height: 46px;
  border: 2px solid var(--ink);
  border-radius: 14px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  padding: 10px;
}

.drawer__nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 36px;
}

.drawer__nav a {
  text-decoration: none;
  color: var(--ink);
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2.1rem, 9vw, 2.8rem);
  padding: 12px 0;
  border-bottom: 1px solid rgba(23, 20, 15, 0.12);
}

.drawer__lang {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  color: var(--ink-mute);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.drawer__cta { margin-top: auto; justify-content: center; }

/* ==========================================================================
   Hero shell
   ========================================================================== */
.hero {
  position: relative;
  flex: 1;
  width: min(100%, 1440px);
  margin: 0 auto;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: clamp(18px, 3vw, 40px);
  padding: clamp(8px, 2vw, 24px) var(--gutter) clamp(32px, 5vw, 56px);
}

@media (min-width: 1000px) {
  .hero {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(24px, 3vw, 56px);
    padding-bottom: clamp(40px, 5vw, 72px);
  }
}

/* ==========================================================================
   Organic background shapes
   ========================================================================== */
.blobs {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.hero-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.46;
  overflow: hidden;
}

.hero-backdrop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero::after {
  content: "";
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  left: 0;
  height: clamp(72px, 10vw, 148px);
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(247, 241, 230, 0), var(--cream));
}

.blob {
  position: absolute;
  display: block;
  filter: blur(0.5px);
}

.blob--sage {
  width: clamp(300px, 40vw, 620px);
  aspect-ratio: 1 / 0.94;
  left: -6%;
  top: 4%;
  background: var(--sage-soft);
  border-radius: 58% 42% 47% 53% / 52% 48% 52% 48%;
  animation: morph-a 22s ease-in-out infinite;
}

.blob--peach {
  width: clamp(190px, 25vw, 380px);
  aspect-ratio: 1 / 1.05;
  left: 24%;
  bottom: 2%;
  background: var(--peach-soft);
  border-radius: 46% 54% 60% 40% / 55% 45% 55% 45%;
  animation: morph-b 26s ease-in-out infinite;
}

.blob--blue {
  width: clamp(120px, 15vw, 220px);
  aspect-ratio: 1;
  left: 3%;
  bottom: 12%;
  background: var(--blue-soft);
  border-radius: 52% 48% 44% 56% / 48% 56% 44% 52%;
  opacity: 0.9;
  animation: morph-a 19s ease-in-out infinite 2s;
}

.blob--beige {
  width: clamp(150px, 20vw, 300px);
  aspect-ratio: 1 / 0.9;
  right: -4%;
  top: 10%;
  background: var(--cream-deep);
  border-radius: 44% 56% 52% 48% / 50% 44% 56% 50%;
  animation: morph-b 24s ease-in-out infinite 1.4s;
}

@keyframes morph-a {
  0%, 100% { border-radius: 58% 42% 47% 53% / 52% 48% 52% 48%; transform: translate3d(0,0,0) rotate(0deg); }
  50%      { border-radius: 46% 54% 58% 42% / 45% 55% 45% 55%; transform: translate3d(10px,-14px,0) rotate(4deg); }
}

@keyframes morph-b {
  0%, 100% { border-radius: 46% 54% 60% 40% / 55% 45% 55% 45%; transform: translate3d(0,0,0) rotate(0deg); }
  50%      { border-radius: 58% 42% 44% 56% / 46% 56% 44% 54%; transform: translate3d(-12px,10px,0) rotate(-4deg); }
}

/* ==========================================================================
   The cups
   ========================================================================== */
.stage {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
}

.stage__inner {
  position: relative;
  width: min(100%, 560px);
  aspect-ratio: 796 / 842;
}

/* the illustration: a single piece, already posed mid-toast.
   It moves as one unit — a soft settle-and-bump on the same beat
   the two photo cups used to lean into each other on. */
.cup-duo {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 104%;
  height: fit-content;
  transform-origin: 50% 86%;
  filter: drop-shadow(0 26px 30px rgba(60, 44, 24, 0.22));
  animation: cheers-duo 6.5s var(--ease) infinite;
}

.cup-duo img {
  width: 100%;
  display: block;
  transform-origin: 50% 86%;
  animation: bubbles-breathe 4.6s ease-in-out infinite;
}

/* Small, low-contrast highlights give the tapioca a gentle bubbling rhythm
   without adding another decorative layer around the cups. */
.cup-duo::before,
.cup-duo::after {
  content: "";
  position: absolute;
  z-index: 2;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 246, 226, 0.62);
  opacity: 0;
  pointer-events: none;
}

.cup-duo::before {
  left: 34%;
  top: 68%;
  box-shadow: 16px 8px 0 -1px rgba(255, 246, 226, 0.48), -10px 18px 0 -2px rgba(255, 246, 226, 0.42);
  animation: boba-hop-left 3.8s ease-in-out 0.35s infinite;
}

.cup-duo::after {
  left: 62%;
  top: 67%;
  box-shadow: -14px 11px 0 -1px rgba(255, 246, 226, 0.46), 10px 21px 0 -2px rgba(255, 246, 226, 0.4);
  animation: boba-hop-right 4.2s ease-in-out 1s infinite;
}

@keyframes boba-hop-left {
  0%, 100% { opacity: 0; transform: translateY(5px) scale(0.82); }
  35% { opacity: 0.68; transform: translateY(-3px) scale(1); }
  62% { opacity: 0.35; transform: translateY(-8px) scale(0.9); }
}

@keyframes boba-hop-right {
  0%, 100% { opacity: 0; transform: translateY(5px) scale(0.8); }
  32% { opacity: 0.62; transform: translateY(-4px) scale(1); }
  64% { opacity: 0.3; transform: translateY(-9px) scale(0.88); }
}

@keyframes bubbles-breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-1px) scale(1.004); }
}

/* The replacement header artwork already contains its own hearts, stars,
   spirals and pearls, so the original overlay decorations stay hidden to
   avoid a doubled effect. The cup group animation remains active. */
.stage > .doodle,
.stage > .clink,
.stage > .spark,
.stage > .pearl { display: none; }

/* the cheers: a light settle, a lean into the clink, back to rest */
@keyframes cheers-duo {
  0%, 54%   { transform: translateY(0) rotate(0deg) scale(1); }
  64%       { transform: translateY(-7px) rotate(-1.8deg) scale(1.016); }
  70%       { transform: translateY(-3px) rotate(0.9deg) scale(1.008); }
  78%       { transform: translateY(0) rotate(-0.4deg) scale(1); }
  86%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
}

/* ==========================================================================
   Hand-drawn doodles
   ========================================================================== */
.doodle {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--ink);
  overflow: visible;
}

.doodle--back { z-index: 1; opacity: 0.82; }

.dd { transform-box: fill-box; transform-origin: center; }

.dd--heart  { animation: dd-bob 7s ease-in-out infinite; }
.dd--spiral { animation: dd-bob 9s ease-in-out infinite 0.8s; }
.dd--star   { animation: dd-pop 6.5s var(--ease) infinite; }
.dd--arc    { opacity: 0.5; animation: dd-bob 13s ease-in-out infinite 2.2s; }

@keyframes dd-bob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-8px) rotate(3deg); }
}

/* the star reacts to the clink */
@keyframes dd-pop {
  0%, 58%  { transform: scale(1) rotate(0deg); }
  66%      { transform: scale(1.35) rotate(16deg); }
  76%, 100%{ transform: scale(1) rotate(0deg); }
}

/* impact marks at the point of contact */
.clink {
  position: absolute;
  left: 37%;
  top: 2%;
  width: 24%;
  aspect-ratio: 1;
  z-index: 4;
  color: var(--ink);
  opacity: 0;
  transform: scale(0.55);
  transform-origin: center;
  animation: clink 6.5s var(--ease) infinite;
}

@keyframes clink {
  0%, 60%  { opacity: 0; transform: scale(0.55); }
  66%      { opacity: 0.9; transform: scale(1); }
  74%      { opacity: 0; transform: scale(1.25); }
  100%     { opacity: 0; transform: scale(0.55); }
}

.spark {
  position: absolute;
  left: 49%;
  top: 8%;
  width: 6.5%;
  aspect-ratio: 1;
  z-index: 5;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,247,226,0.95) 0%, rgba(241,200,164,0.55) 45%, rgba(241,200,164,0) 72%);
  opacity: 0;
  animation: spark 6.5s var(--ease) infinite;
}

@keyframes spark {
  0%, 60%  { opacity: 0; transform: scale(0.4); }
  67%      { opacity: 1; transform: scale(1.15); }
  78%      { opacity: 0; transform: scale(1.5); }
  100%     { opacity: 0; transform: scale(0.4); }
}

/* ==========================================================================
   Tapioca pearls
   ========================================================================== */
.pearl {
  position: absolute;
  z-index: 3;
  border-radius: 50%;
  background: var(--ink);
}

.pearl--1 { width: 16px; aspect-ratio: 1; left: -1%;  top: 30%; animation: float-a 8s ease-in-out infinite; }
.pearl--2 { width: 10px; aspect-ratio: 1; left: 34%;  top: 8%;  animation: float-b 10s ease-in-out infinite 0.7s; }
.pearl--3 { width: 13px; aspect-ratio: 1; right: 6%;  top: 20%; animation: float-a 9s ease-in-out infinite 1.5s; }
.pearl--4 { width: 8px;  aspect-ratio: 1; right: 16%; bottom: 16%; animation: float-b 11s ease-in-out infinite 2.1s; opacity: 0.85; }
.pearl--5 { width: 11px; aspect-ratio: 1; left: 18%;  bottom: 6%;  animation: float-a 7.5s ease-in-out infinite 1.1s; }

@keyframes float-a {
  0%, 100% { transform: translate3d(0,0,0); }
  50%      { transform: translate3d(5px,-16px,0); }
}
@keyframes float-b {
  0%, 100% { transform: translate3d(0,0,0); }
  50%      { transform: translate3d(-6px,-12px,0); }
}

/* ==========================================================================
   Copy
   ========================================================================== */
.copy {
  position: relative;
  z-index: 5;
  max-width: 39rem;
}

.eyebrow {
  font-weight: 700;
  font-size: clamp(0.7rem, 1vw, 0.78rem);
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: clamp(14px, 1.8vw, 20px);
}

.title {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2.5rem, 4.6vw, 3.85rem);
  line-height: 1.02;
  letter-spacing: -0.022em;
  color: var(--ink);
  margin-bottom: clamp(18px, 2.2vw, 26px);
  text-wrap: balance;
}

/* soft, watermark-like underline — same pastel sage as the background blobs.
   A real text-decoration (not a positioned pseudo-element) so it follows
   the text correctly even if the highlighted phrase wraps onto two lines. */
.title__hl {
  text-decoration-line: underline;
  text-decoration-color: rgba(169, 188, 150, 0.55);
  text-decoration-thickness: 0.22em;
  text-underline-offset: -0.06em;
  text-decoration-skip-ink: none;
}

.lede {
  font-size: clamp(1rem, 1.25vw, 1.14rem);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 40ch;
  margin-bottom: clamp(24px, 3vw, 34px);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: clamp(22px, 3vw, 34px);
}

.social-proof {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 100%;
  margin: 0 0 clamp(18px, 2.4vw, 26px);
}

.social-proof__avatars {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  padding-left: 4px;
}

.social-proof__avatars img {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  margin-left: -8px;
  border: 2px solid var(--cream);
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 3px 8px rgba(23, 20, 15, 0.16);
}

.social-proof__avatars img:first-child { margin-left: 0; }

.social-proof__details {
  min-width: 0;
  color: var(--ink-soft);
  line-height: 1.25;
}

.social-proof__rating {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  font-size: 0.78rem;
}

.social-proof__rating strong {
  color: var(--ink);
  font-size: 0.86rem;
}

.social-proof__stars {
  color: #d79a32;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  line-height: 1;
}

.social-proof__label {
  margin: 4px 0 0;
  color: var(--ink-mute);
  font-size: 0.76rem;
  font-weight: 600;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 30px;
  border-radius: 999px;
  font-family: var(--body);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  border: 2px solid var(--ink);
  cursor: pointer;
  transition: transform 0.25s var(--ease), background 0.25s var(--ease),
    color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.btn--fill {
  background: var(--ink);
  color: var(--cream);
  box-shadow: 0 10px 22px rgba(23, 20, 15, 0.18);
}
.btn--fill:hover { transform: translateY(-2px); box-shadow: 0 16px 30px rgba(23,20,15,0.24); }

.btn--line { background: transparent; color: var(--ink); }
.btn--line:hover { background: var(--ink); color: var(--cream); transform: translateY(-2px); }

.btn--uber {
  border-color: var(--sage);
  background: var(--sage);
  color: var(--ink);
  box-shadow: 0 10px 22px rgba(102, 125, 77, 0.22);
}

.btn--uber:hover {
  background: var(--sage-soft);
  border-color: var(--sage-soft);
  color: var(--ink);
}

.btn--location {
  gap: 7px;
  min-height: 48px;
  padding-inline: 8px;
  border-color: transparent;
  color: var(--ink-mute);
  font-size: 0.9rem;
  box-shadow: none;
}

.btn--location svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.btn--location:hover {
  background: transparent;
  border-color: transparent;
  color: var(--ink);
  transform: translateY(-2px);
}

.btn:active { transform: scale(0.97); }

.foot {
  font-size: 0.84rem;
  color: var(--ink-mute);
  font-weight: 500;
}

.foot__hours {
  display: block;
  margin-top: 4px;
}

/* ==========================================================================
   Mobile — a composition of its own:
   headline first, then the drinks, then the pitch and the buttons.
   ========================================================================== */
@media (max-width: 999px) {
  .hero {
    grid-template-columns: 1fr;
    align-content: center;
    gap: 0;
    padding-top: clamp(12px, 3vw, 32px);
  }

  /* the copy's children become grid items so they can be re-ordered
     around the drinks — they need their own stacking context back */
  .copy { display: contents; }

  .hero .eyebrow,
  .hero .title,
  .hero .lede,
  .hero .actions,
  .hero .social-proof,
  .hero .foot {
    position: relative;
    z-index: 5;
  }

  .hero .eyebrow { order: 1; }
  .hero .title   { order: 2; margin-bottom: 20px; }
  .hero .stage   { order: 3; margin: 0 0 22px; }
  .hero .lede    { order: 4; max-width: none; margin-bottom: 22px; }
  .hero .actions { order: 5; }
  .hero .social-proof { order: 6; }
  .hero .foot    { order: 7; }

  /* smaller, pushed to the edges so they frame rather than crowd */
  .blob--sage  { width: 62vw; left: -18%; top: 16%; }
  .blob--peach { width: 44vw; left: auto; right: -12%; bottom: 16%; }
  .blob--blue  { width: 26vw; left: -8%; bottom: 22%; }
  .blob--beige { width: 34vw; right: -10%; top: 6%; }

  .stage__inner {
    width: min(100%, 420px);
    aspect-ratio: 796 / 842;
  }

  /* calmer decoration on small screens */
  .pearl--2,
  .pearl--4 { display: none; }
  .dd--arc { display: none; }
  .blob--blue { opacity: 0.7; }

  .actions .btn { flex: 1 1 auto; min-width: 46%; }
}

@media (max-width: 620px) {
  .title { font-size: clamp(2.3rem, 10.5vw, 3rem); }
  .lede { font-size: 1rem; }
  .foot { font-size: 0.76rem; line-height: 1.5; }
  .stage__inner { width: min(100%, 360px); }
}

/* ==========================================================================
   Favorites — "Os favoritos da Tea Talk"
   Same background, type and button language as the hero; kept airy on
   purpose (large gaps, no dense grid) so it still reads as premium.
   ========================================================================== */
.favorites {
  position: relative;
  background: var(--cream);
  padding: clamp(72px, 9vw, 128px) 0 clamp(40px, 5vw, 72px);
  overflow: hidden;
  isolation: isolate;
}

.favorites__head {
  max-width: 640px;
  margin: 0 auto clamp(44px, 6vw, 72px);
  padding: 0 var(--gutter);
  text-align: center;
}

.favorites__head .eyebrow { justify-content: center; }

.favorites__title {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2rem, 3.6vw, 2.8rem);
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-top: 12px;
}

.favorites__track {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 2.4vw, 36px);
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.favorites__carousel {
  position: relative;
}

.favorites__arrow {
  display: none;
}

.fav-card {
  display: flex;
  flex-direction: column;
}

.fav-card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 22px;
  overflow: hidden;
  background: var(--cream-deep);
  box-shadow: 0 18px 34px -14px rgba(23, 20, 15, 0.22);
  margin-bottom: 18px;
}

.fav-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}

.fav-card:hover .fav-card__media img { transform: scale(1.045); }

.fav-card__label {
  position: absolute;
  z-index: 2;
  top: 14px;
  left: 14px;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--body);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  padding: 7px 14px;
  border-radius: 999px;
}

.fav-card__name {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--ink);
  margin: 0 0 8px;
}

.fav-card__desc {
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 14px;
  flex: 1;
}

.fav-card__price {
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--ink);
  margin: 0;
}

.favorites__cta {
  text-align: center;
  margin-top: clamp(44px, 6vw, 68px);
}

/* ---- mobile: one centered card per slide with explicit arrow controls ---- */
@media (max-width: 680px) {
  .favorites__track {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    column-gap: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-left: 0;
    padding-right: 0;
  }
  .favorites__track::-webkit-scrollbar { display: none; }

  .fav-card { scroll-snap-align: start; }

  .favorites__carousel {
    padding-inline: var(--gutter);
  }

  .favorites__arrow {
    position: absolute;
    z-index: 4;
    top: clamp(100px, 31vw, 170px);
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1.5px solid rgba(23, 20, 15, 0.16);
    border-radius: 50%;
    background: rgba(251, 247, 240, 0.94);
    color: var(--ink);
    box-shadow: 0 8px 18px rgba(23, 20, 15, 0.14);
    cursor: pointer;
    transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
  }

  .favorites__arrow svg {
    width: 20px;
    height: 20px;
  }

  .favorites__arrow:hover:not(:disabled) {
    transform: scale(1.05);
  }

  .favorites__arrow:disabled {
    opacity: 0.35;
    cursor: default;
  }

  .favorites__arrow--prev { left: 2px; }
  .favorites__arrow--next { right: 2px; }
}

@media (max-width: 480px) {
  .favorites__track { grid-auto-columns: 100%; }
}

/* ==========================================================================
   Menu — "Encontra a combinação perfeita para hoje"
   Same background/type/branding as hero + favorites. Photos are deliberately
   small here (140px desktop / 104px mobile) so Favorites keeps the visual lead.
   ========================================================================== */
.menu {
  position: relative;
  background: var(--cream);
  padding: clamp(44px, 5vw, 72px) 0 clamp(72px, 9vw, 128px);
}

.menu__head {
  max-width: 920px;
  margin: 0 auto clamp(28px, 3vw, 36px);
  padding: 0 var(--gutter);
  text-align: center;
}

.menu__head .eyebrow { justify-content: center; }

.menu__title {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2rem, 3.6vw, 2.8rem);
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 12px 0 0;
  white-space: nowrap;
}

.menu__note {
  margin: 12px auto 0;
  color: var(--ink-mute);
  font-size: clamp(0.78rem, 1.1vw, 0.92rem);
  line-height: 1.45;
  text-align: center;
}

/* ---- category pills ---- */
.menu__tabs {
  display: flex;
  gap: 10px;
  max-width: 1320px;
  margin: 0 auto clamp(36px, 5vw, 56px);
  padding: 0 var(--gutter) 6px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  justify-content: center;
  flex-wrap: wrap;
}

.menu__tabs::-webkit-scrollbar { display: none; }

.menu-tab {
  flex-shrink: 0;
  padding: 11px 22px;
  border-radius: 999px;
  border: 2px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font-family: var(--body);
  font-weight: 700;
  font-size: 0.92rem;
  cursor: pointer;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}

.menu-tab:hover:not(.is-active) { background: var(--cream-deep); }

.menu-tab.is-active { background: var(--ink); color: var(--cream); }

/* ---- product list ---- */
.menu__panel {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px clamp(32px, 4vw, 64px);
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.menu__panel[hidden] { display: none; }

.menu-card {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 12px;
  border-radius: 20px;
  border-bottom: 1px solid rgba(23, 20, 15, 0.08);
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}

.menu-card:last-child,
.menu-card:nth-last-child(2) { border-bottom: none; }

.menu-card:hover {
  background: var(--cream-deep);
  transform: translateY(-1px);
}

.menu-card__img {
  flex-shrink: 0;
  width: 140px;
  height: 140px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--cream-deep);
}

.menu-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.menu-card__body { min-width: 0; }

.menu-card__name {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--ink);
  margin: 0 0 5px;
  line-height: 1.2;
}

.menu-card__desc {
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--ink-soft);
  margin: 0 0 8px;
}

.menu-card__price {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--ink);
}

.menu-card__price small {
  font-weight: 500;
  color: var(--ink-mute);
  font-size: 0.8rem;
}

.menu-card__price--tbd {
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--ink-mute);
}

/* ---- mobile ---- */
@media (max-width: 780px) {
  .menu__panel {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .menu-card {
    border-bottom: 1px solid rgba(23, 20, 15, 0.08);
  }

  .menu-card:last-child { border-bottom: none; }

  .menu-card__img {
    width: 104px;
    height: 104px;
  }

  .menu__tabs {
    justify-content: center;
    flex-wrap: wrap;
    overflow-x: visible;
    padding-inline: var(--gutter);
    gap: 8px;
  }
}

/* ==========================================================================
   Milk Tea menu overrides
   ========================================================================== */
.menu { padding-bottom: clamp(84px, 10vw, 144px); }

.menu__intro {
  max-width: 38ch;
  margin: 14px auto 0;
  color: var(--ink-soft);
  font-size: clamp(0.95rem, 1.2vw, 1.05rem);
}

.menu__panel {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(40px, 7vw, 120px);
  row-gap: 0;
  max-width: 1240px;
}

.menu-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  min-width: 0;
  padding: clamp(22px, 2.8vw, 32px) 0;
  border-top: 1px dashed rgba(23, 20, 15, 0.16);
}

.menu-item__copy { min-width: 0; }

.menu-item h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.08rem, 1.45vw, 1.25rem);
  color: var(--ink);
  margin: 0 0 9px;
  line-height: 1.25;
}

.menu-item__copy > p {
  max-width: 40ch;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--ink-soft);
  margin: 0;
}

.menu-item__price {
  flex: 0 0 auto;
  display: grid;
  justify-items: end;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.25;
  color: var(--ink);
  margin: 1px 0 0;
  white-space: nowrap;
}

.menu-item__price small {
  margin-top: 5px;
  font-weight: 500;
  color: var(--ink-mute);
  font-size: 0.76rem;
}

.menu-item__tag {
  display: inline-flex;
  vertical-align: middle;
  align-items: center;
  margin: -2px 0 0 7px;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--sage);
  color: var(--ink);
  font-family: var(--body);
  font-weight: 600;
  font-size: 0.66rem;
  line-height: 1.1;
  letter-spacing: 0.02em;
}

@media (max-width: 780px) {
  .menu__panel { grid-template-columns: 1fr; }
  .menu__title { white-space: normal; }
}

@media (max-width: 440px) {
  .menu-item { gap: 14px; }
  .menu-item h3 { font-size: 1.02rem; }
  .menu-item__copy > p { font-size: 0.84rem; }
  .menu-item__price { font-size: 0.92rem; }
  .menu-item__tag { display: table; width: fit-content; margin: 7px 0 0; }
}

/* ==========================================================================
   A Tea Talk — a quieter, framed story moment after the menu.
   ========================================================================== */
.about {
  background: var(--cream);
  padding: clamp(84px, 10vw, 144px) var(--gutter);
}

.about__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(360px, 0.92fr);
  align-items: center;
  justify-content: center;
  gap: clamp(36px, 5vw, 72px);
  width: min(100%, 1240px);
  margin: 0 auto;
}

.about__frame {
  position: relative;
  overflow: hidden;
  border-radius: clamp(26px, 3vw, 38px);
  padding: clamp(12px, 1.8vw, 20px);
  background: #f3e6d1;
  box-shadow: 0 24px 48px -28px rgba(23, 20, 15, 0.35);
}

.about__frame img {
  position: relative;
  width: 100%;
  border-radius: clamp(17px, 2vw, 26px);
  background: var(--cream);
}

.about__copy { max-width: 34rem; }

.about__copy h2 {
  margin: 0 0 clamp(20px, 2.5vw, 28px);
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(2.25rem, 4vw, 3.35rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.02em;
}

.about__body {
  margin: 0 0 clamp(24px, 3vw, 32px);
  color: var(--ink-soft);
  font-size: clamp(1rem, 1.25vw, 1.1rem);
  line-height: 1.65;
}

.about__body p { margin: 0; }
.about__body p + p { margin-top: 16px; }
.about__body strong { color: var(--ink); font-weight: 700; }

.about__quote {
  position: relative;
  margin: 0;
  padding: clamp(20px, 2.6vw, 28px);
  border-radius: 18px;
  background: var(--sage-soft);
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  font-weight: 500;
  line-height: 1.4;
  animation: quote-float 5.5s ease-in-out infinite;
}

.about__quote::after {
  content: "";
  position: absolute;
  left: 30px;
  bottom: -13px;
  width: 26px;
  height: 26px;
  background: var(--sage-soft);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

.about__quote strong { font-weight: 700; }

@keyframes quote-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

@media (max-width: 820px) {
  .about__inner {
    grid-template-columns: 1fr;
    gap: clamp(36px, 7vw, 56px);
  }

  .about__copy {
    max-width: 42rem;
    margin-inline: auto;
    text-align: center;
  }

  .about__quote::after {
    left: 50%;
    transform: translateX(-50%);
  }
}

/* ===========================================================================
   Reviews — fixed on desktop, swipeable on mobile
   ========================================================================== */
.reviews {
  background: var(--cream);
  padding: var(--section-space) var(--gutter);
  overflow: hidden;
}

.reviews__head {
  width: min(100%, 760px);
  margin: 0 auto clamp(28px, 4vw, 48px);
  text-align: center;
}

.reviews__head h2 {
  margin: 12px 0 0;
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(2rem, 3.8vw, 3rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.reviews__carousel {
  position: relative;
  width: min(100%, 1240px);
  margin: 0 auto;
}

.reviews__arrow {
  display: none;
}

.reviews__track {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: clamp(16px, 2.4vw, 28px);
  width: min(100%, 1240px);
  margin: 0 auto;
  padding-block: 8px 22px;
  margin-block: -8px -22px;
}

.review-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 100%;
  padding: clamp(22px, 2.5vw, 28px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: clamp(22px, 2.5vw, 32px);
  background: rgba(241, 231, 214, 0.78);
  box-shadow: 0 18px 34px -14px rgba(23, 20, 15, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(12px) saturate(110%);
  backdrop-filter: blur(12px) saturate(110%);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), background 0.35s var(--ease);
}

.review-card::after {
  content: "";
  position: absolute;
  left: clamp(28px, 3vw, 38px);
  bottom: -13px;
  width: 24px;
  height: 24px;
  background: inherit;
  border-right: 1px solid rgba(255, 255, 255, 0.65);
  border-bottom: 1px solid rgba(255, 255, 255, 0.65);
  transform: rotate(45deg);
}

.review-card--sage { background: rgba(200, 212, 184, 0.78); }
.review-card--peach { background: rgba(248, 221, 198, 0.8); }

.review-card__quote {
  display: block;
  height: 0.58em;
  color: rgba(23, 20, 15, 0.28);
  font-family: Georgia, serif;
  font-size: clamp(4rem, 6vw, 5.4rem);
  line-height: 0.72;
  pointer-events: none;
}

.review-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 42px -16px rgba(23, 20, 15, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.review-card--beige:hover { background: rgba(247, 241, 230, 0.88); }
.review-card--sage:hover { background: rgba(211, 222, 197, 0.88); }
.review-card--peach:hover { background: rgba(251, 230, 211, 0.9); }

.review-card__text {
  flex: 1;
  margin: 0;
  color: var(--ink-soft);
  font-size: clamp(0.92rem, 1.15vw, 1.03rem);
  line-height: 1.55;
  text-align: center;
}

.review-card__text strong {
  color: var(--ink);
  font-weight: 600;
}

.review-card__footer {
  margin-top: clamp(20px, 2.5vw, 28px);
  text-align: center;
}

.review-card__stars {
  margin: 0 0 14px;
  color: #d79a32;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  text-align: center;
}

.review-card__person {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
}

.review-card__person img {
  width: 60px;
  height: 60px;
  flex: 0 0 60px;
  border: 2px solid rgba(255, 255, 255, 0.82);
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 4px 10px rgba(23, 20, 15, 0.14);
}

.review-card__person p {
  margin: 0;
  color: var(--ink);
  font-size: 0.88rem;
  line-height: 1.3;
}

.review-card__person strong { font-weight: 700; }
.review-card__person span { color: var(--ink-mute); }

.reviews__cta {
  margin-top: clamp(28px, 3.5vw, 40px);
  text-align: center;
}

.reviews__cta .btn {
  min-height: 46px;
  padding-inline: 22px;
  border-color: rgba(23, 20, 15, 0.35);
  font-size: 0.88rem;
}

@media (max-width: 899px) {
  .reviews__track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .reviews__head {
    margin-bottom: 30px;
  }

  .reviews__carousel {
    width: calc(100% - 52px);
  }

  .reviews__track {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    gap: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 0;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .reviews__track::-webkit-scrollbar { display: none; }
  .review-card { scroll-snap-align: start; }

  .reviews__arrow {
    position: absolute;
    z-index: 4;
    top: 50%;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1.5px solid rgba(23, 20, 15, 0.16);
    border-radius: 50%;
    background: rgba(251, 247, 240, 0.94);
    color: var(--ink);
    box-shadow: 0 8px 18px rgba(23, 20, 15, 0.14);
    cursor: pointer;
    transform: translateY(-50%);
    transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
  }

  .reviews__arrow svg {
    width: 20px;
    height: 20px;
  }

  .reviews__arrow:hover:not(:disabled) {
    transform: translateY(-50%) scale(1.05);
  }

  .reviews__arrow:disabled {
    opacity: 0.35;
    cursor: default;
  }

  .reviews__arrow--prev { left: -28px; }
  .reviews__arrow--next { right: -28px; }
}

/* ===========================================================================
   Visita-nos
   ========================================================================== */
.visit {
  background: var(--cream);
  padding: clamp(32px, 5vw, 72px) var(--gutter) clamp(84px, 10vw, 144px);
}

.visit__inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: clamp(24px, 3vw, 40px);
  max-width: 1120px;
  margin: 0 auto;
}

.visit__panel,
.visit__art {
  aspect-ratio: 1 / 1;
  border-radius: clamp(26px, 3vw, 38px);
  overflow: hidden;
}

.visit__panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(28px, 3vw, 48px);
  background: var(--sage-soft);
}

.visit__panel h2 {
  margin: 0 0 clamp(20px, 2.4vw, 30px);
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(2.5rem, 4.2vw, 3.75rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.02em;
}

.visit__intro {
  max-width: 38ch;
  margin: 0;
  color: var(--ink-soft);
  font-size: clamp(1rem, 1.3vw, 1.12rem);
  line-height: 1.65;
}

.visit__details {
  display: grid;
  gap: 16px;
  margin: clamp(26px, 3vw, 38px) 0;
}

.visit__detail {
  display: flex;
  align-items: flex-start;
  gap: 15px;
}

.visit__detail svg {
  flex: 0 0 auto;
  width: 27px;
  margin-top: 2px;
  fill: none;
  stroke: #667d4d;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.visit__detail p { margin: 0; }
.visit__detail strong,
.visit__detail span { display: block; }
.visit__detail strong { color: var(--ink); font-size: 0.98rem; }
.visit__detail span { margin-top: 3px; color: var(--ink-soft); font-size: 0.92rem; }

.visit__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 0;
}

.visit__actions .btn { min-height: 48px; padding: 0 22px; font-size: 0.9rem; }
.visit__map { background: #667d4d; border-color: #667d4d; color: #fff; }
.visit__map:hover { background: #51633d; border-color: #51633d; }
.visit__instagram { color: #51633d; border-color: #667d4d; }
.visit__instagram:hover { background: rgba(255, 255, 255, 0.42); color: #51633d; }

.visit__art {
  display: flex;
  align-items: center;
  background: #f3e6d1;
  padding: clamp(12px, 1.8vw, 20px);
}

.visit__art img {
  width: 100%;
  height: auto;
  border-radius: clamp(17px, 2vw, 26px);
}

@media (min-width: 821px) and (max-width: 1100px) {
  .visit__panel,
  .visit__art { aspect-ratio: auto; }
}

@media (max-width: 820px) {
  .visit__inner { grid-template-columns: 1fr; }
  .visit__panel,
  .visit__art { aspect-ratio: auto; }
  .visit__panel { min-height: auto; }
}

/* ===========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background: var(--cream);
  padding: 0 var(--gutter) clamp(28px, 4vw, 48px);
}

.site-footer__main,
.site-footer__bottom {
  max-width: 1240px;
  margin: 0 auto;
}

.site-footer__main {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(22px, 4vw, 64px);
  padding: clamp(28px, 4vw, 44px) 0;
  border-top: 1px solid rgba(23, 20, 15, 0.12);
}

.site-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 600;
  text-decoration: none;
}

.site-footer__brand img { width: 38px; height: 38px; }
.site-footer__tagline { margin: 0; color: var(--ink-soft); font-size: 0.9rem; }

@media (min-width: 721px) {
  .site-footer__tagline { text-align: center; }
}

.site-footer__links {
  display: flex;
  gap: 22px;
}

.site-footer__links a {
  color: var(--ink-soft);
  font-size: 0.86rem;
  font-weight: 700;
  text-decoration: none;
}

.site-footer__links a:hover { color: var(--ink); }

.site-footer__bottom {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: var(--ink-mute);
  font-size: 0.72rem;
}

.site-footer__bottom span:last-child { opacity: 0.7; }

@media (max-width: 720px) {
  .site-footer__main {
    grid-template-columns: 1fr;
    gap: 16px;
    justify-items: center;
    text-align: center;
  }

  .site-footer__brand {
    justify-content: center;
  }

  .site-footer__tagline {
    text-align: center;
  }

  .site-footer__links {
    justify-content: center;
    gap: 18px;
  }

  .site-footer__bottom {
    flex-direction: column;
    align-items: center;
    gap: 7px;
    text-align: center;
  }
}

/* ==========================================================================
   Responsive polish — one rhythm across every section and viewport
   ========================================================================== */
.favorites,
.menu,
.about,
.visit {
  padding-block: var(--section-space);
}

.hero {
  padding-bottom: var(--section-space);
}

.favorites__head,
.menu__head {
  margin-bottom: clamp(28px, 3vw, 36px);
}

.favorites__cta {
  margin-top: clamp(32px, 4vw, 48px);
}

.menu__tabs {
  margin-bottom: clamp(28px, 4vw, 44px);
}

.about__inner,
.visit__inner,
.about__frame,
.about__copy,
.visit__panel,
.visit__art {
  min-width: 0;
}

.menu__title {
  white-space: normal;
  text-wrap: balance;
}

.menu-item__copy > p {
  overflow-wrap: anywhere;
}

/* Let editorial sections stack before a tablet becomes too compressed. */
@media (max-width: 1099px) {
  .favorites__track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero .copy {
    text-align: center;
  }

  .hero .lede {
    margin-inline: auto;
  }

  .hero .actions {
    justify-content: center;
  }

  .hero .foot {
    text-align: center;
  }

  .hero .social-proof {
    justify-content: center;
    text-align: left;
  }
}

@media (max-width: 959px) {
  .about__inner,
  .visit__inner {
    grid-template-columns: 1fr;
  }

  .hero .copy {
    text-align: center;
  }

  .hero .lede {
    margin-inline: auto;
  }

  .hero .actions {
    justify-content: center;
  }

  .hero .actions .btn {
    flex: 1 1 100%;
    min-width: 100%;
  }

  .hero .foot {
    text-align: center;
  }

  .hero .social-proof {
    gap: 9px;
  }

  .hero .social-proof__rating {
    font-size: 0.72rem;
  }

  .hero .social-proof__label {
    font-size: 0.7rem;
  }

  .about__inner {
    gap: clamp(28px, 6vw, 48px);
  }

  .visit__inner {
    gap: clamp(28px, 5vw, 44px);
  }

  .visit__panel,
  .visit__art {
    aspect-ratio: auto;
  }

  .visit__panel {
    min-height: 0;
  }

  .menu__panel {
    grid-template-columns: 1fr;
    row-gap: 0;
  }

  .menu__tabs {
    justify-content: center;
    flex-wrap: wrap;
    overflow-x: visible;
    padding-inline: var(--gutter);
    gap: 8px;
  }
}

@media (max-width: 680px) {
  .favorites__track {
    grid-template-columns: none;
  }
}

@media (max-width: 680px) {
  :root {
    --section-space: clamp(40px, 9vw, 56px);
  }

  .favorites__head,
  .menu__head {
    margin-bottom: 32px;
  }

  .favorites__cta {
    margin-top: 32px;
  }

  .title {
    max-width: 100%;
    font-size: clamp(2.1rem, 9.5vw, 2.75rem);
    line-height: 1;
  }

  .favorites__title {
    font-size: clamp(1.85rem, 8vw, 2.75rem);
    line-height: 1.05;
  }

  .menu__tabs {
    margin-bottom: 28px;
    padding-inline: var(--gutter);
  }

  .menu-tab {
    padding: 10px clamp(12px, 3.8vw, 18px);
    font-size: clamp(0.78rem, 2.7vw, 0.92rem);
  }

  .hero .copy {
    text-align: center;
  }

  .hero .lede {
    margin-inline: auto;
  }

  .hero .actions {
    justify-content: center;
  }

  .hero .foot {
    text-align: center;
  }

  .menu-item {
    gap: 12px;
    padding-block: 20px;
  }

  .about__body,
  .visit__intro {
    line-height: 1.55;
  }

  .visit__actions {
    width: 100%;
  }

  .visit__actions .btn {
    flex: 1 1 100%;
    width: 100%;
  }
}

@media (max-width: 420px) {
  .hd {
    gap: 12px;
  }

  .hd__brand {
    font-size: 1.25rem;
  }

  .drawer {
    padding-inline: 20px;
  }

  .title {
    letter-spacing: -0.03em;
  }

  .actions .btn {
    width: 100%;
    min-width: 100%;
  }

  .menu-item__price {
    font-size: 0.9rem;
  }

  .menu-item__price small {
    font-size: 0.7rem;
  }
}

/* Motion off */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
  .cup-duo { transform: none; }
  .clink, .spark { opacity: 0; }
}