/* ============================================================
   Fusion page — page-specific flourishes only.
   All core tokens, components and animations live in styles.css.
   ============================================================ */

/* ===========================================================
   DEEP CAFÉ palette — a bolder warm overhaul of the brand
   moodboard (brick / terracotta / oak / olive / latte). Warm
   oat surfaces replace the airy cream, sections are colour-
   blocked, accents lean into brick + olive, and text warms to
   a coffee-bean black. Loaded only on the Fusion page; the
   token NAMES are reused so every existing component recolours
   without any markup change.
   =========================================================== */
:root {
  /* surfaces — warm oat/latte instead of near-white */
  --base:      #EFE1C7;  /* oat latte (page background)        */
  --base-deep: #E6D4B4;  /* deeper oat for bands               */
  --white:     #FBF5EA;  /* cards: warm ivory, not stark white */

  /* warmer, cohesive text tones (coffee-bean black) */
  --ink:       #382C20;
  --ink-soft:  #6a5a46;

  /* accent fills — richer pastels */
  --sun:        #E7BC76;  /* honey oak   (was pastel yellow) */
  --sky:        #D78C68;  /* clay rose   (was pastel blue)   */
  --coral:      #E09972;  /* terracotta                      */
  --sage:       #ABBE83;  /* olive sage  (greener, richer)   */
  --wood:       #E0BC81;  /* butterscotch                    */
  --terracotta: #D78C68;  /* clay (deeper than the default)  */

  --sun-tint:   #F1DFB9;
  --sky-tint:   #EED2BB;  /* warm clay tint (was pale blue)  */
  --coral-tint: #F2D6BD;
  /* section-rhythm washes — warm sand into clay (fusion stays all-warm) */
  --wash-1: #F1DFB9;  /* warm sand */
  --wash-2: #EFD7BE;  /* warm clay */
  --sage-tint:  #DCE5C0;
  --terra-tint: #EED6C0;
  --wood-tint:  #EEDBB8;

  /* deep accents for text / icons */
  --accent:       #A8472A; /* brick                            */
  --accent-sky:   #8A5A2C; /* deep oak  — Drinks heading        */
  --accent-sun:   #94661D;
  --accent-sage:  #586A36; /* olive     — Eats heading          */
  --accent-coral: #BE4F2B; /* deep terracotta — Treats heading  */

  /* warm gradient + dividers + bubbles */
  --grad-candy:  linear-gradient(135deg, var(--wood) 0%, var(--terracotta) 100%);
  --flow-accent: linear-gradient(90deg, var(--sun) 0%, var(--coral) 45%, var(--sage) 100%);
  --bub-1: var(--coral); --bub-2: var(--sage); --bub-3: var(--wood); --bub-4: var(--sun);
}

/* ---- Colour-blocked sections: the "Why Fusion?" band becomes a soft olive
     block amid the warm oat, so the page reads as composed colour fields
     rather than one flat cream. The flow divider surface matches it. ---- */
.band-white            { background: var(--sage-tint); }
.flow-top.band-white   { --surface: var(--sage-tint); }

/* ---- The real Fusion Coffee logo (transparent cutout) ---- */
.fusion-logo {
  display: inline-block;
  width: auto;
  vertical-align: middle;
  /* two-tone black-mark / white-halo art is baked into the PNG itself */
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.18));
}
/* hero: the logo IS the headline */
.fusion-logo--hero {
  height: auto;
  width: clamp(230px, 34vw, 360px);
  margin: 0.2rem 0 0.4rem;
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.20));
}
/* section brand-mark: centred above the menu + CTA headings */
.fusion-logo--mark {
  height: auto;
  width: clamp(150px, 24vw, 210px);
  margin: 0 auto 0.1rem;
}
.center .fusion-logo--mark { display: block; }

/* inline brand mentions inside body copy — the site's own script, in brick */
.fusion-word {
  font-family: var(--font-script);
  font-style: italic;
  font-weight: 600;
  color: var(--accent);
}

/* warm the "Locally roasted" sticker text now that its fill is clay */
.menu-group--drinks .sticker--sky { color: #5a2f1c; }

/* ---- Hero: a cosy COFFEE world — a faint coffee-bean texture over a warm
     oat→clay gradient, with steam rising from the café. ---- */
.page-hero.ph--cafe {
  background:
    url("../../img/coffee-beans.svg") center / 132px repeat,
    linear-gradient(180deg, #F3E3C5 0%, #EFD7BD 58%, var(--base) 100%);
  /* Reserve clear space below the centred CTAs so the next section's flow-top
     wave (which rises ~flow-h + 18px = up to ~90px above its top edge) lands
     in empty hero, not slicing across the pill buttons. */
  padding-bottom: clamp(5.5rem, 4vw + 4rem, 7.5rem);
}

/* Real-logo café tower: size by height so the tall tower isn't stretched wide */
.ph--cafe .hero-art { display: grid; place-items: center; }
.ph--cafe .hero-art img { width: auto; max-height: clamp(250px, 40vh, 350px); }

/* Steam rising from the latte mug's foam */
.fusion-steam {
  position: absolute;
  top: 22%;
  left: 50%;
  transform: translateX(-50%);
  width: 46px;
  z-index: 2;
  pointer-events: none;
}
.fusion-steam svg { width: 100%; height: auto; display: block; }
.fusion-steam .st { opacity: 0; transform-box: fill-box; transform-origin: bottom center; }
@media (prefers-reduced-motion: no-preference) {
  .fusion-steam .st { animation: steamRise 4.2s ease-in-out infinite; }
  .fusion-steam .st2 { animation-delay: 1.4s; }
  .fusion-steam .st3 { animation-delay: 2.8s; }
}
@keyframes steamRise {
  0%   { opacity: 0; transform: translateY(6px); }
  40%  { opacity: 0.6; }
  100% { opacity: 0; transform: translateY(-9px); }
}
@media (prefers-reduced-motion: reduce) {
  .fusion-steam .st { opacity: 0.4; }
}

/* ---- Hero: pull the art and copy a little closer on larger screens ---- */
.ph--cafe .container {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
@media (min-width: 760px) {
  .ph--cafe .container { grid-template-columns: 1fr auto; }
}

/* Coffee cup sticker floating near the hero heading */
.fusion-coffee-sticker {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 1.25rem;
  line-height: 1;
  transform: rotate(6deg);
  margin-left: 0.5rem;
  vertical-align: middle;
  animation: bobSticker 4s ease-in-out infinite;
}
@keyframes bobSticker {
  0%, 100% { transform: rotate(6deg) translateY(0); }
  50%       { transform: rotate(6deg) translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) {
  .fusion-coffee-sticker { animation: none; }
}

/* ---- Partner panel: a polished "sister café" callout. Warm ivory→oat
     gradient card with a real lift shadow + a circular brand medallion for
     the icon — no more flat dashed box. ---- */
.fusion-partner-panel {
  background: linear-gradient(135deg, var(--white) 0%, var(--wood-tint) 100%);
  border: 1px solid rgba(140, 100, 40, 0.16);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 1.5rem);
  max-width: 720px;
  margin-inline: auto;
  padding: clamp(1.4rem, 3.5vw, 2.1rem);
  /* Clear space below the panel so the next section's flow-top wave doesn't
     slice the rounded bottom corners. Section padding alone (~26px mobile /
     ~46px desktop) is shorter than the wave band (~52px / ~90px), so the
     box needs an extra margin sized to make up the difference. */
  margin-bottom: clamp(2.5rem, 5vw, 3.75rem);
}
/* Café icon sits inside a circular ivory medallion with a soft brick ring,
   so it reads as a deliberate brand badge instead of a floating glyph. */
.fusion-partner-panel .partner-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--white);
  border: 1.5px solid rgba(168, 71, 42, 0.20);
  box-shadow: 0 4px 12px rgba(120, 70, 30, 0.12);
}
.fusion-partner-panel .partner-icon img { display: block; width: 36px; height: 36px; }
.partner-panel-title {
  display: block;
  font-family: var(--font-head);
  font-size: 1.12rem;
  color: var(--accent);
  margin-bottom: 0.3rem;
}
.partner-panel-text { margin: 0; color: var(--ink-soft); }

/* ---- Closing CTA box: same clearance trick so the footer's scallop wave
     rises into empty section space instead of cutting across the orange
     band's rounded bottom corners. ---- */
.cta-band { margin-bottom: clamp(2.5rem, 5vw, 3.75rem); }

/* ---- Stats / fun-facts pill strip ---- */
.fusion-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.4rem;
  justify-content: center;
  margin-top: 2rem;
  /* The pills are the section's last content; the next section's flow-top
     wave was slicing the bottom row. Give the strip clearance below so it
     sits above the wave band. */
  margin-bottom: clamp(2.5rem, 5vw, 3.75rem);
}
.fusion-stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.1rem;
  border-radius: var(--r-pill);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.88rem;
  background: var(--white);
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(80, 60, 30, 0.08);
  color: var(--ink);
}
.fusion-stat-pill .pill-icon { font-size: 1.1rem; line-height: 1; display: inline-flex; align-items: center; }
.fusion-stat-pill .pill-icon img { width: 22px; height: 22px; display: block; }
/* Custom SVG icons replacing emojis — align cleanly inside the inline-flex
   partner-tag and sticker pills so they read as one unit, not as a glyph
   floating next to text. */
.partner-tag img,
.sticker img { width: 18px; height: 18px; display: block; }
.fusion-stat-pill--sun   { background: var(--sun-tint);   border-color: rgba(244, 183, 64, 0.3);  }
.fusion-stat-pill--sky   { background: var(--sky-tint);   border-color: rgba(79, 176, 208, 0.3);  }
.fusion-stat-pill--sage  { background: var(--sage-tint);  border-color: rgba(156, 176, 130, 0.3); }
.fusion-stat-pill--coral { background: var(--coral-tint); border-color: rgba(242, 117, 75, 0.3);  }

/* ---- Menu: coloured left-border accent on each group heading ---- */
.menu-group--drinks h3 { color: var(--accent-sky); border-left: 4px solid var(--accent-sky); padding-left: 0.75rem; }
.menu-group--eats   h3 { color: var(--accent-sage); border-left: 4px solid var(--accent-sage); padding-left: 0.75rem; }
.menu-group--treats h3 { color: var(--accent-coral); border-left: 4px solid var(--accent-coral); padding-left: 0.75rem; }

/* ---- Menu row hover: a subtle warm lift ---- */
.menu-row {
  border-radius: var(--r-sm);
  padding-inline: 0.4rem;
  transition: background 0.18s ease, transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.menu-row:hover {
  background: var(--wood-tint);
  transform: translateX(4px);
}
@media (hover: none) {
  .menu-row:active { background: var(--wood-tint); }
}
@media (prefers-reduced-motion: reduce) {
  .menu-row { transition: background 0.18s ease; }
  .menu-row:hover { transform: none; }
}

/* ---- Member savings callout inside menu section ---- */
.menu-member-callout {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  background: var(--sun-tint);
  border: 1.5px solid rgba(244, 183, 64, 0.35);
  border-radius: var(--r-lg);
  padding: 0.9rem 1.3rem;
  margin-bottom: 2rem;
}
.menu-member-callout .sticker { flex: none; }
.menu-member-callout p { margin: 0; font-size: 0.95rem; }
.menu-member-callout a { color: var(--accent); font-weight: 600; }
.menu-member-callout a:hover { text-decoration: underline; }

/* ---- Steps: override step-no gradient for a coffee warm palette ---- */
.fusion-steps .step .step-no {
  background: var(--grad-candy);
}

/* ---- Quote: warm tint background ---- */
.fusion-quote {
  background: var(--terra-tint);
  border: none;
  box-shadow: var(--shadow-md);
  max-width: 640px;
  margin-inline: auto;
}
.fusion-quote::before { color: var(--accent); opacity: 0.6; }

/* ---- "Locally roasted" split band: add a warm glow blob ---- */
.fusion-roasted-blob {
  position: absolute;
  width: 360px; height: 360px;
  right: -80px; bottom: -100px;
  background: var(--sun-tint);
  border-radius: 46% 54% 58% 42% / 52% 44% 56% 48%;
  opacity: 0.5;
  z-index: 0;
  pointer-events: none;
  filter: blur(2px);
}
.fusion-roasted-blob-2 {
  position: absolute;
  width: 200px; height: 200px;
  left: -60px; top: -60px;
  background: var(--coral-tint);
  border-radius: 54% 46% 40% 60% / 46% 56% 44% 54%;
  opacity: 0.45;
  z-index: 0;
  pointer-events: none;
  filter: blur(2px);
}

/* ---- Cafe photo frame: a little tilt and warm border ---- */
.fusion-cafe-photo {
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  border: 4px solid var(--white);
  display: block;
}
.fusion-photo-wrap {
  position: relative;
}
.fusion-photo-wrap .sticker {
  position: absolute;
  bottom: -0.7rem;
  right: 1.2rem;
  z-index: 2;
}

/* ---- Drinks category top bar colour (inside header chip) ---- */
.menu-cat-chip {
  width: 38px; height: 38px;
  border-radius: var(--r-md);
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
}
.menu-cat-chip--drinks { background: var(--sky-tint); }
.menu-cat-chip--eats   { background: var(--sage-tint); }
.menu-cat-chip--treats { background: var(--coral-tint); }

/* ---- Allergen / mock note: give it a bit more breathing room ---- */
.menu-footer-note {
  text-align: center;
  margin-top: 1.6rem;
  padding: 0.7rem 1rem;
  background: var(--base-deep);
  border-radius: var(--r-md);
  font-size: 0.82rem;
  color: var(--ink-soft);
  font-style: italic;
}

/* ---- Touch active state for stat pills ---- */
@media (hover: none) {
  .fusion-stat-pill:active { box-shadow: var(--shadow-md); transform: scale(0.97); }
}

/* ---- Menu: keep cards above the floating doodles ---- */
#menu > .container { position: relative; z-index: 2; }

/* ---- Menu: bounce the category chip when its group is hovered ---- */
.menu-cat-chip { transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); }
.menu-group:hover .menu-cat-chip { transform: rotate(-7deg) scale(1.1); }
@media (prefers-reduced-motion: reduce) {
  .menu-cat-chip { transition: none; }
  .menu-group:hover .menu-cat-chip { transform: none; }
}

/* ---- Signature drinks — featured trio with mock illustrations ---- */
.signature-drinks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
  margin-top: 1.6rem;
}
@media (max-width: 760px) { .signature-drinks { grid-template-columns: 1fr; } }
.signature-drink {
  margin: 0;
  background: #fff;
  border-radius: var(--r-lg, 22px);
  box-shadow: var(--shadow-md);
  padding: 1.1rem 1rem 1.2rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  border: 2px solid #f1e4ce;
}
.signature-drink:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(58,49,40,0.18);
}
/* tilt-3d signature drinks: JS owns transform, so drop the transform
   transition (was smearing the per-frame rAF tilt) and let the lifted
   shadow still fade in on hover. */
.signature-drink.tilt-3d {
  transition: box-shadow 0.25s ease;
}
.signature-drink.tilt-3d:hover {
  box-shadow: 0 20px 40px rgba(58,49,40,0.18);
}
.signature-art {
  width: 120px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.signature-art svg { width: 100%; height: 100%; display: block; }
.signature-drink figcaption {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: 0.5rem;
}
.signature-drink strong {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--ink);
}
.signature-drink span {
  font-size: 0.9rem;
  color: var(--ink-soft);
  line-height: 1.4;
  max-width: 30ch;
  margin-inline: auto;
}
.signature-drink em {
  font-style: normal;
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--accent, #d9774e);
  font-size: 1.05rem;
  margin-top: 0.3rem;
}
@media (prefers-reduced-motion: reduce) {
  .signature-drink { transition: none; }
  .signature-drink:hover { transform: none; }
}

/* ============================================================
   FUSION — Mobile experience layer
   Every rule here is gated behind a max-width query so the
   desktop layout is never touched. Order: hero → stats →
   menu (the critical piece) → partner panel → CTA band.
   ============================================================ */

/* ---- Hero: tame the logo on narrow phones ----------------
   The clamp floor of 230px is fine at ~680px+ but takes up
   too much vertical space at 320–414px.  Drop it to a
   viewport-proportional size with a comfortable floor. ---- */
@media (max-width: 600px) {
  .fusion-logo--hero {
    width: clamp(160px, 52vw, 230px);
  }
  /* Stack art below copy (hero container is already a grid;
     single-column is the default — just make sure the mug
     art isn't eating too much height on short phones). */
  .ph--cafe .hero-art {
    max-width: 180px !important;  /* override the inline style */
    margin-inline: auto;
  }
  .ph--cafe .hero-art img {
    max-height: clamp(140px, 30vh, 200px);
  }
  /* The steam animation container is absolutely positioned;
     scale it with the mug on small screens. */
  .fusion-steam {
    width: 34px;
  }
  /* Tighten hero bottom padding — the wave band is also
     shorter at this width so we need less clearance. */
  .page-hero.ph--cafe {
    padding-bottom: clamp(3.5rem, 8vw, 5.5rem);
  }
}

/* ---- Stat pills: wrap comfortably, never overflow --------- */
@media (max-width: 480px) {
  .fusion-stats {
    gap: 0.6rem 0.9rem;
    margin-top: 1.4rem;
  }
  .fusion-stat-pill {
    font-size: 0.84rem;
    padding: 0.55rem 0.95rem;
  }
}

/* ---- Signature drinks: more breathing room on one-column --
   The trio already collapses to 1-col at ≤760px (global rule
   above), but on a narrow phone the cards feel squat. Give
   each a row layout so the art and text sit side-by-side and
   take less vertical space. --------------------------------- */
@media (max-width: 600px) {
  .signature-drinks { gap: 0.8rem; }
  .signature-drink {
    flex-direction: row;
    align-items: center;
    text-align: left;
    padding: 0.85rem 1rem;
    gap: 0.9rem;
  }
  .signature-art {
    width: 72px;
    height: 84px;
    flex: none;
  }
  .signature-drink figcaption { align-items: flex-start; }
  .signature-drink span {
    max-width: none;
    margin-inline: 0;
    font-size: 0.85rem;
  }
  .signature-drink em { margin-top: 0.15rem; font-size: 0.98rem; }
}

/* ---- Menu group headings: keep chip + label + sticker in
   one neat row without overflowing at 320px.  The sticker
   (`margin-left:auto`) pushes to the right and can clip off
   the card edge on the very smallest screens. -------------- */
@media (max-width: 480px) {
  /* Shrink the heading font just enough so all three elements
     (chip, label, sticker) always fit in one line. */
  .menu-group h3 {
    font-size: 1.2rem;
    gap: 0.5rem;
  }
  /* Ensure the chip stays its designed size; the label
     shrinks via font-size above. */
  .menu-cat-chip {
    width: 34px;
    height: 34px;
    flex: none;
  }
  /* Shrink the sticker badge text so it doesn't clip. */
  .menu-group--drinks h3 .sticker,
  .menu-group--eats h3 .sticker,
  .menu-group--treats h3 .sticker {
    font-size: 0.68rem !important;
    padding: 0.28rem 0.55rem;
  }
}

/* ---- Menu rows: the key layout fix ----------------------------
   At 320px the default `44px 1fr auto` grid leaves the 1fr
   column only ~170px wide.  Long item names + descriptions
   are fine (they wrap within 1fr), but the `.m-price` pill
   (`auto`) can squeeze the description or visually collide
   with it when it wraps to two lines and the pill re-anchors.

   Fix: switch to a 2-row sub-layout.  Row 1 keeps the icon
   + name side-by-side; the price pill is anchored to the
   right of that same first row.  Row 2 (description) spans
   all three columns so it always gets the full width.
   ---------------------------------------------------------------- */
@media (max-width: 600px) {
  /* Redefine the grid: 3 columns exactly as desktop so we
     can place cells explicitly — but drop `align-items:center`
     so rows can have independent heights. */
  .menu-row {
    grid-template-columns: 40px 1fr auto;
    grid-template-rows: auto auto;
    align-items: start;
    gap: 0.3rem 0.65rem;
    padding: 0.75rem 0;
  }
  /* Icon: spans both rows so it stays vertically centred next
     to the name + description block. */
  .menu-row .m-icon {
    grid-column: 1;
    grid-row: 1 / 3;
    width: 40px;
    height: 40px;
    align-self: center;
  }
  /* Name row: sits in col 2 row 1, same row as the price. */
  .menu-row .m-name {
    grid-column: 2;
    grid-row: 1;
    font-size: 0.95rem;
    line-height: 1.2;
    padding-top: 0.05rem;   /* optical alignment with price pill */
  }
  /* Price pill: col 3 row 1 — always right-aligned beside the
     name, never next to the description. */
  .menu-row .m-price {
    grid-column: 3;
    grid-row: 1;
    font-size: 0.82rem;
    padding: 0.18rem 0.5rem;
    align-self: center;
    white-space: nowrap;
  }
  /* Description: spans the whole content width (cols 2–3) in
     row 2 so it wraps gracefully below name + price. */
  .menu-row > div:not(.m-price) {
    display: contents;  /* unwrap the wrapper div so children
                           are direct grid items */
  }
  .menu-row .m-desc {
    grid-column: 2 / 4;
    grid-row: 2;
    font-size: 0.83rem;
    line-height: 1.45;
    padding-bottom: 0.1rem;
  }
  /* Hover translate is nice but keep it subtle on small screens
     so it doesn't cause layout jitter. */
  .menu-row:hover { transform: translateX(2px); }
}

/* Tighten menu group card padding on narrow phones so the rows
   have more horizontal room. */
@media (max-width: 480px) {
  .menu-group.card {
    padding: 1.1rem 0.9rem;
  }
  /* Left-border accent still looks great at the smaller size. */
  .menu-group--drinks h3,
  .menu-group--eats   h3,
  .menu-group--treats h3 {
    padding-left: 0.55rem;
  }
}

/* ---- Member savings callout: stack on very narrow phones -- */
@media (max-width: 420px) {
  .menu-member-callout {
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.8rem 1rem;
  }
  .menu-member-callout p { font-size: 0.9rem; }
}

/* ---- Partner panel: comfortable on phone ----------------
   The default panel padding (`clamp(1.5rem, 4vw, 3rem)`)
   is generous; on a 360px phone that's ~1.5rem per side which
   is fine — but the dashed border + flex row can still feel
   cramped.  Give the icon more breathing room. ------------ */
@media (max-width: 480px) {
  .fusion-partner-panel {
    flex-direction: row;   /* keep icon + text side-by-side */
    gap: 0.85rem;
    padding: 1.15rem 1.1rem;
  }
  .fusion-partner-panel .partner-icon { width: 52px; height: 52px; }
  .fusion-partner-panel .partner-icon img { width: 30px; height: 30px; }
  .partner-panel-title { font-size: 1.02rem; }
  .partner-panel-text { font-size: 0.92rem; }
}

/* ---- Closing CTA band: tighten padding so content breathes
   at narrow widths.  styles.css already stacks `.flex-cta`
   at ≤559px so three buttons land in a clean full-width
   column automatically.  The logo mark uses the base clamp
   (150–210px) which is already well-sized — no override
   needed.  We just ensure the band's own padding suits a
   phone card. -------------------------------------------- */
@media (max-width: 600px) {
  .cta-band {
    padding: clamp(1.8rem, 6vw, 2.5rem) clamp(1rem, 5vw, 2rem);
  }
}

/* ---- Overflow guard: nothing bleeds at 320px ------------ */
@media (max-width: 360px) {
  /* Collapse stat pills to fill the narrow viewport. */
  .fusion-stats { gap: 0.5rem 0.7rem; }
  .fusion-stat-pill { font-size: 0.8rem; padding: 0.5rem 0.8rem; }
  /* Menu rows: tighten further. */
  .menu-row {
    gap: 0.25rem 0.5rem;
    padding: 0.65rem 0;
  }
  .menu-row .m-name { font-size: 0.9rem; }
  .menu-row .m-price { font-size: 0.78rem; padding: 0.15rem 0.4rem; }
  .menu-row .m-desc { font-size: 0.78rem; }
}