/* Superseded on desktop by the new "For the people" section — desktop-hidden,
   kept for the mobile layout (pending the mobile pass). */
@media (min-width: 601px) { .tm { display: none; } }

/* What the people have to say — Figma 843:316. Speech-bubble SVG shapes placed
   at their Figma coordinates inside a centred 2000x1027 stage. Title 76px,
   quotes Domaine Bold Italic (→Playfair italic), name 11.251px. */
.tm {
  position: relative;
  background: #2f255b;
  overflow: hidden;
}
.tm__stage {
  /* Full-frame composition (like the hero): re-scale the whole subtree by --fpx
     so it fills the viewport exactly like Figma 843:316, instead of the 1140
     content cap. Every child's calc(...*var(--px)) now uses the frame scale. */
  --px: var(--fpx);
  position: relative;
  width: calc(2000 * var(--px));    /* == viewport width */
  height: calc(1078 * var(--px));   /* section ends exactly at the jukebox base (440 + 638) */
  left: 50%;
  transform: translateX(-50%);
}
.tm__title {
  position: absolute;
  left: calc(504 * var(--px));
  top: calc(119 * var(--px));
  font-family: var(--font-display);
  font-weight: 700;
  font-size: calc(76 * var(--px));
  color: #fff;
  white-space: nowrap;
}

/* speech bubbles */
.tm__q {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;   /* SVG viewBox matches the box aspect, so no distortion */
}
.tm__q--1 { background-image: url("../../../assets/img/bubble-1.svg"); }
.tm__q--2 { background-image: url("../../../assets/img/bubble-2.svg"); }
.tm__q--3 { background-image: url("../../../assets/img/bubble-3.svg"); }
.tm__q--4 { background-image: url("../../../assets/img/bubble-4.svg"); }
.tm__q--5 { background-image: url("../../../assets/img/bubble-5.svg"); }
.tm__q--6 { background-image: url("../../../assets/img/bubble-6.svg"); }
.tm__q blockquote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  letter-spacing: 0.03em;
  text-align: center;
  /* uniform gap inside every bubble (sized relative to the bubble body) */
  padding: 7% 12% 13%;
  margin: 0;
}

/* name + stars below each bubble */
.tm__cap {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(7 * var(--px));
  /* breathing room so the name/stars aren't glued to the bubble tail */
  padding-top: calc(14 * var(--px));
  text-align: center;
}
.tm__name { font-family: var(--font-sans); font-weight: 300; font-size: calc(11.251 * var(--px)); color: #fff; }
.tm__stars { color: #fff; font-size: calc(12 * var(--px)); letter-spacing: calc(3 * var(--px)); }

/* jukebox (image 389) — render the FULL asset (no horizontal crop) at a larger
   size, left edge brought close to the right-hand quotes without touching.
   The PNG has ~250px transparent padding each side (opaque cabinet = x252..754
   of 1024); section overflow:hidden clips the transparent bottom past the base. */
.tm__jukebox {
  position: absolute;
  left: calc(1372 * var(--px));   /* image left; visible cabinet starts ~1528 (≈16px gap from quotes) */
  top: calc(377 * var(--px));     /* cabinet base lands ~y1072, just above the section end */
  width: calc(635 * var(--px));
  pointer-events: none;
}
.tm__jukebox img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 700px) {
  /* mobile: stack bubbles in normal flow */
  .tm__stage { width: 100%; height: auto; padding: 30px 20px 50px; }
  .tm__title { position: static; white-space: normal; font-size: 30px; text-align: center; margin-bottom: 24px; }
  .tm__q {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    min-height: 90px;
    margin: 0 auto 4px;
    padding: 18px 22px;
    border: 2px solid #fff;
    border-radius: 22px;
    background-image: none !important;
  }
  .tm__q blockquote { font-size: 16px !important; margin-bottom: 0; }
  .tm__cap { position: static !important; width: auto !important; margin: 0 0 22px; }
  .tm__name, .tm__stars { font-size: 11px; }
  .tm__jukebox { position: static; width: 230px; height: 320px; margin: 10px auto 0; overflow: visible; }
  .tm__jukebox img { width: 100%; margin: 0; }
}

/* "What people have to say" is not in the Figma mobile flow — desktop-only. */
@media (max-width: 600px) {
  .tm { display: none; }
}