/* ─────────────────────────────────────────────────────────────
   Review-reply examples — UI ported verbatim from the kitpro-fluke
   "Testimonials from our clients." section (app/globals.css): the tall
   heading, the 500vh sticky story, and the 3D rotateY plane carrying four
   scenes with a portrait card, two floating chips and a blockquote.

   Values are unchanged from the source. Everything is scoped under .tv-rr
   so generic names (.stars, .portrait-card, .floating-chip) cannot collide
   with the Webflow stylesheet this site already loads.
   ───────────────────────────────────────────────────────────── */

.tv-rr.testimonial-section {
  background: #fff;
}

.tv-rr .testimonial-heading {
  height: 130vh;
  display: grid;
  place-items: center;
  padding: 3vw;
}
.tv-rr .testimonial-heading h2 {
  margin: 0;
  text-align: center;
  font-size: clamp(52px, 4.8vw, 72px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.05em;
  color: #0a0a0a;
}
.tv-rr .testimonial-heading p {
  max-width: 46rem;
  margin: 1.4rem auto 0;
  text-align: center;
  color: #6f6f6f;
  font-family: Inter, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
}

.tv-rr .testimonial-story {
  height: 500vh;
}
.tv-rr .testimonial-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 640px;
  overflow: hidden;
  background: #fff;
}
.tv-rr .testimonial-camera {
  perspective: 100vw;
  perspective-origin: 50% 50%;
}
.tv-rr .testimonial-rotate {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  will-change: transform;
}
.tv-rr .testimonial-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  pointer-events: none;
  will-change: opacity;
}
.tv-rr .testimonial-front { transform: rotateY(0deg); }
.tv-rr .testimonial-back  { transform: rotateY(180deg); }
.tv-rr .testimonial-scene.scene-1,
.tv-rr .testimonial-scene.scene-2 { opacity: 1; }
.tv-rr .testimonial-scene.scene-3,
.tv-rr .testimonial-scene.scene-4 { opacity: 0; }

/* Portrait card. The source shows a client photo; there are no customer
   photos here (and inventing them would be fabricating reviewers), so the
   same card carries an initial badge plus the review that was answered. */
.tv-rr .portrait-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(335px, 32vw);
  height: min(475px, 60vh);
  overflow: hidden;
  border-radius: 15px;
  background: #f2f2f2;
  transform: translate3d(-50%, -50%, 0);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 18px;
  padding: 26px;
  backface-visibility: hidden;
  text-align: center;
}
/* Avatar image, sized exactly as the source portrait */
.tv-rr .portrait-card .rr-face {
  width: 138px;
  height: 138px;
  border: 4px solid #fff;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
}
.tv-rr .portrait-card .rr-platform {
  color: #8a8a8a;
  font-family: "Roboto Mono", monospace;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.tv-rr .portrait-card .rr-review {
  color: #3f3f3f;
  font-family: Inter, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

.tv-rr .floating-chip,
.tv-rr .testimonial-scene blockquote {
  position: absolute;
  border-radius: 14px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 18px 38px rgba(0, 0, 0, .12);
  backdrop-filter: blur(10px);
  transform: translate3d(0, var(--content-y, 0), 4vw);
  backface-visibility: hidden;
}

.tv-rr .person-chip {
  top: 33%;
  left: 26.5%;
  min-width: 235px;
  padding: 18px 28px;
  display: flex;
  flex-direction: column;
}
.tv-rr .person-chip strong { font-size: 25px; font-weight: 500; }
.tv-rr .person-chip span { margin-top: 5px; font-size: 18px; }

.tv-rr .rating-chip {
  top: 45.5%;
  right: 22%;
  min-width: 300px;
  padding: 18px 26px;
}
.tv-rr .rating-chip .stars {
  color: #ffc400;
  font-size: 24px;
  letter-spacing: 1px;
}
.tv-rr .rating-chip .stars i {
  display: inline-block;
  width: .52em;
  overflow: hidden;
  font-style: normal;
  vertical-align: bottom;
}
.tv-rr .rating-chip small { margin-left: 8px; font-size: 16px; }
.tv-rr .rating-chip strong {
  display: block;
  margin-top: 9px;
  font-size: 30px;
  font-weight: 500;
  line-height: 1;
}

.tv-rr .testimonial-scene blockquote {
  left: 27%;
  bottom: 18.5%;
  width: min(390px, 40vw);
  margin: 0;
  padding: 26px 28px;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.28;
  letter-spacing: -.025em;
  color: #0a0a0a;
}
.tv-rr .testimonial-scene blockquote .rr-by {
  display: block;
  margin-top: 12px;
  color: #6f6f6f;
  font-family: "Roboto Mono", monospace;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* Source breakpoint, values unchanged */
@media (max-width: 900px) {
  .tv-rr .testimonial-heading { height: 100vh; }
  .tv-rr .testimonial-heading h2 { font-size: 12vw; }
  .tv-rr .testimonial-story { height: 500vh; }
  .tv-rr .portrait-card { top: 36%; width: 68vw; height: 46vh; }
  .tv-rr .portrait-card .rr-face { width: 96px; height: 96px; }
  .tv-rr .person-chip { top: 23%; left: 16px; min-width: 190px; padding: 14px 18px; }
  .tv-rr .person-chip strong { font-size: 19px; }
  .tv-rr .person-chip span { font-size: 15px; }
  .tv-rr .rating-chip { top: 44%; right: 16px; min-width: 222px; padding: 14px 16px; }
  .tv-rr .rating-chip .stars { font-size: 17px; }
  .tv-rr .rating-chip small { font-size: 13px; }
  .tv-rr .rating-chip strong { font-size: 22px; }
  .tv-rr .testimonial-scene blockquote { left: 3%; bottom: 14%; width: 82%; padding: 18px; font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .tv-rr .testimonial-rotate { transform: none !important; }
  .tv-rr .testimonial-scene { opacity: 1 !important; position: relative; height: auto; }
}

/* The site stylesheet is dark-themed and colours text white by default, which
   rendered the chips blank on their white background. Set them explicitly. */
.tv-rr .person-chip strong,
.tv-rr .rating-chip strong { color: #0a0a0a; }
.tv-rr .person-chip span,
.tv-rr .rating-chip small { color: #6f6f6f; }

/* Review above, reply below — the card holds only the avatar, as in the
   source, so the chips no longer sit on top of body copy. */
.tv-rr .testimonial-scene blockquote .rr-quote {
  display: block;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0,0,0,.1);
  color: #6f6f6f;
  font-family: Inter, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0;
}
.tv-rr .testimonial-scene blockquote .rr-answer { display: block; }

/* Platform mark, top-right of the portrait card. The two logos are opposite
   shapes — Zomato is a wide wordmark (2500x535), Swiggy a tall mark
   (2520x3703) — so a shared square box shrank the wordmark to a few pixels.
   Constrain one axis each and let the other follow the aspect ratio. */
.tv-rr .portrait-card .rr-logo {
  position: absolute;
  top: 18px;
  right: 18px;
  border: 0;
  border-radius: 0;
  object-fit: contain;
}
.tv-rr .portrait-card .rr-logo.is-zomato { width: 92px; height: auto; }
.tv-rr .portrait-card .rr-logo.is-swiggy { width: auto; height: 50px; }

/* Blockquote holds a review plus its reply, where the source held one quote.
   Tightened so the box lands at the source height and clears the rating chip
   at the source position (bottom 18.5%) rather than needing to be moved. */

@media (max-width: 900px) {
  .tv-rr .portrait-card .rr-logo.is-zomato { width: 66px; }
  .tv-rr .portrait-card .rr-logo.is-swiggy { height: 36px; }
}

/* Blockquote carries a review plus its reply where the source carried one
   quote. Tightened just enough that the taller box still clears the rating
   chip at the source position (bottom 18.5%). */
.tv-rr .testimonial-scene blockquote { font-size: 19px; padding: 22px 24px; }
.tv-rr .testimonial-scene blockquote .rr-quote {
  margin-bottom: 11px;
  padding-bottom: 10px;
  font-size: 13px;
  line-height: 1.4;
}
.tv-rr .testimonial-scene blockquote .rr-by { margin-top: 10px; font-size: 10px; }

@media (max-width: 900px) {
  .tv-rr .testimonial-scene blockquote { font-size: 16px; }
  .tv-rr .testimonial-scene blockquote .rr-quote { font-size: 12px; }
}

/* ═══ DARK GROUND ════════════════════════════════════════════
   Background only. The portrait card, chips, blockquote, type and shadows
   all keep the template's own values above — nothing else is touched.
   The heading has to flip since black on black is invisible, and both
   platform logos are brand-coloured so they read against black as-is.
   ═══════════════════════════════════════════════════════════ */
.tv-rr.testimonial-section { background: #0a0a0a; }
.tv-rr .testimonial-stage { background: #0a0a0a; }
.tv-rr .testimonial-heading h2 { color: #fff; }
.tv-rr .testimonial-heading p { color: #a7a7a7; }

/* ═══ SCALE TO MATCH THE LIVE TEMPLATE ═══════════════════════
   The ported CSS caps the portrait card at min(475px, 60vh), so on any tall
   viewport the 475px cap binds and the whole composition renders about 1.3x
   smaller than kitpro-fluke.webflow.io, whose card runs uncapped at 60vh
   (~717px). Measured against the live site the internal proportions already
   matched (card 0.71 w/h, avatar 0.29 of card height, rating chip 0.67) —
   only the base size was wrong.

   So: one variable, --s, holds the card height, and every size is expressed
   as the ratio it already had against 475px. Positions stay on the source
   percentages and are untouched.
   ═══════════════════════════════════════════════════════════ */
.tv-rr .testimonial-scene { --s: 60vh; }

.tv-rr .portrait-card {
  width: calc(var(--s) * .705);
  height: var(--s);
  border-radius: calc(var(--s) * .0316);
}
.tv-rr .portrait-card .rr-face {
  width: calc(var(--s) * .29);
  height: calc(var(--s) * .29);
  border-width: calc(var(--s) * .0084);
}
.tv-rr .portrait-card .rr-logo { top: calc(var(--s) * .038); right: calc(var(--s) * .038); }
.tv-rr .portrait-card .rr-logo.is-zomato { width: calc(var(--s) * .194); }
.tv-rr .portrait-card .rr-logo.is-swiggy { height: calc(var(--s) * .105); }

.tv-rr .floating-chip,
.tv-rr .testimonial-scene blockquote { border-radius: calc(var(--s) * .0295); }

.tv-rr .person-chip {
  min-width: calc(var(--s) * .495);
  padding: calc(var(--s) * .038) calc(var(--s) * .059);
}
.tv-rr .person-chip strong { font-size: calc(var(--s) * .053); }
.tv-rr .person-chip span { font-size: calc(var(--s) * .038); }

.tv-rr .rating-chip {
  min-width: calc(var(--s) * .46);
  padding: calc(var(--s) * .038) calc(var(--s) * .055);
}
.tv-rr .rating-chip .stars { font-size: calc(var(--s) * .0505); }
.tv-rr .rating-chip small { font-size: calc(var(--s) * .0337); }
.tv-rr .rating-chip strong {
  margin-top: calc(var(--s) * .019);
  font-size: calc(var(--s) * .0632);
}

.tv-rr .testimonial-scene blockquote {
  width: calc(var(--s) * .821);
  padding: calc(var(--s) * .046) calc(var(--s) * .0505);
  font-size: calc(var(--s) * .040);
}
.tv-rr .testimonial-scene blockquote .rr-quote {
  margin-bottom: calc(var(--s) * .023);
  padding-bottom: calc(var(--s) * .021);
  font-size: calc(var(--s) * .0274);
}
.tv-rr .testimonial-scene blockquote .rr-by {
  margin-top: calc(var(--s) * .021);
  font-size: calc(var(--s) * .021);
}

/* Phone rules stay as the source had them — re-stated last so they win. */
@media (max-width: 900px) {
  .tv-rr .portrait-card { top: 36%; width: 68vw; height: 46vh; border-radius: 15px; }
  .tv-rr .portrait-card .rr-face { width: 96px; height: 96px; border-width: 4px; }
  .tv-rr .portrait-card .rr-logo { top: 12px; right: 12px; }
  .tv-rr .portrait-card .rr-logo.is-zomato { width: 66px; }
  .tv-rr .portrait-card .rr-logo.is-swiggy { height: 36px; }
  .tv-rr .floating-chip,
  .tv-rr .testimonial-scene blockquote { border-radius: 14px; }
  .tv-rr .person-chip { top: 23%; left: 16px; min-width: 190px; padding: 14px 18px; }
  .tv-rr .person-chip strong { font-size: 19px; }
  .tv-rr .rating-chip { top: 44%; right: 16px; min-width: 222px; padding: 14px 16px; }
  .tv-rr .rating-chip .stars { font-size: 17px; }
  .tv-rr .rating-chip small { font-size: 13px; }
  .tv-rr .rating-chip strong { font-size: 22px; margin-top: 9px; }
  .tv-rr .testimonial-scene blockquote { left: 3%; bottom: 14%; width: 82%; padding: 18px; font-size: 16px; }
  .tv-rr .testimonial-scene blockquote .rr-quote { font-size: 12px; margin-bottom: 11px; padding-bottom: 10px; }
  .tv-rr .testimonial-scene blockquote .rr-by { font-size: 10px; margin-top: 10px; }
}

/* ═══ TWO-COLUMN LAYOUT ══════════════════════════════════════
   Copy on the left, animation on the right, both pinned together while the
   500vh story scrolls the rotation. The stage was sticky itself in the
   source; here the row is sticky and the stage just fills its half.
   ═══════════════════════════════════════════════════════════ */
.tv-rr .rr-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 640px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 2vw;
  padding-left: 5vw;
}
.tv-rr .testimonial-stage {
  position: relative;
  top: auto;
  height: 100%;
  min-height: 0;
}

.tv-rr .rr-copy { max-width: 34rem; color: #fff; }
.tv-rr .rr-copy-title {
  margin: 1rem 0 0;
  color: #fff;
  font-family: Geist, Inter, sans-serif;
  font-size: clamp(2rem, 2.9vw, 3rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -.03em;
}
.tv-rr .rr-copy-lead {
  margin: 1rem 0 0;
  color: #a7a7a7;
  font-family: Inter, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
}
.tv-rr .rr-copy-list { margin-top: 1.4rem; }

/* Phones: stack, copy first, and give the stage back its own sticky pin. */
@media (max-width: 900px) {
  .tv-rr .rr-sticky {
    position: static;
    height: auto;
    min-height: 0;
    display: block;
    padding: 3.5rem 1.25rem 0;
  }
  .tv-rr .rr-copy { max-width: none; }
  .tv-rr .testimonial-stage {
    position: sticky;
    top: 0;
    height: 100vh;
    margin-top: 2rem;
  }
}

/* ═══ CLUSTER ANCHORED TO THE CARD ═══════════════════════════
   The source positions each chip as a percentage of the STAGE while the card
   is a fixed size, so the arrangement only holds at the one stage width it
   was drawn at — chips drift off the card when wider, pile onto it when
   narrower. Both failures were the same bug.

   These offsets are measured off the template frame and expressed from the
   card's own centre in multiples of --s (the card height), so the layout is
   identical to the template at any stage size:

       element        left      top
       person-chip   -0.658   -0.345
       rating-chip   +0.220   -0.118
       blockquote    -0.690   +0.211
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 901px) {
  .tv-rr .testimonial-scene { --s: min(46vh, 34vw); }

  .tv-rr .person-chip {
    left: calc(50% - .658 * var(--s));
    top: calc(50% - .345 * var(--s));
    right: auto;
  }
  .tv-rr .rating-chip {
    left: calc(50% + .220 * var(--s));
    top: calc(50% - .118 * var(--s));
    right: auto;
  }
  .tv-rr .testimonial-scene blockquote {
    left: calc(50% - .690 * var(--s));
    top: calc(50% + .211 * var(--s));
    bottom: auto;
  }
}

/* ═══ PHONE ═════════════════════════════════════════════════
   Two faults here.

   1. Nothing pinned. .rr-sticky was set to static/block on phones, so the
      stage's sticky parent became .rr-sticky (height: auto) instead of the
      500vh story — it unpinned almost immediately and left the rest of the
      story as blank scroll. display:contents removes .rr-sticky from layout
      so the stage sticks against the full story again.

   2. Misaligned cluster. The card was overridden to 68vw x 46vh while the
      chips still sized off --s, so the two no longer agreed and the chips
      landed on the card. Drop those overrides, keep the card on the --s
      ratio, and reuse the same card-anchored offsets as desktop — they are
      ratios, so they hold at any size once --s fits the screen.
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .tv-rr .rr-sticky { display: contents; }
  .tv-rr .rr-copy { display: block; padding: 3.5rem 1.25rem 2rem; max-width: none; }
  .tv-rr .testimonial-stage { position: sticky; top: 0; height: 100vh; margin-top: 0; }

  /* cluster spans about 1.54 x --s, so cap --s to keep it on screen */
  .tv-rr .testimonial-scene { --s: min(38vh, 57vw); }

  .tv-rr .portrait-card {
    top: 50%;
    width: calc(var(--s) * .705);
    height: var(--s);
    border-radius: calc(var(--s) * .0316);
  }
  .tv-rr .portrait-card .rr-face {
    width: calc(var(--s) * .29);
    height: calc(var(--s) * .29);
    border-width: calc(var(--s) * .0084);
  }
  .tv-rr .portrait-card .rr-logo { top: calc(var(--s) * .038); right: calc(var(--s) * .038); }
  .tv-rr .portrait-card .rr-logo.is-zomato { width: calc(var(--s) * .194); }
  .tv-rr .portrait-card .rr-logo.is-swiggy { height: calc(var(--s) * .105); }

  .tv-rr .person-chip {
    left: calc(50% - .658 * var(--s));
    top: calc(50% - .345 * var(--s));
    right: auto;
    min-width: calc(var(--s) * .495);
    padding: calc(var(--s) * .038) calc(var(--s) * .059);
  }
  .tv-rr .person-chip strong { font-size: calc(var(--s) * .053); }

  .tv-rr .rating-chip {
    left: calc(50% + .220 * var(--s));
    top: calc(50% - .118 * var(--s));
    right: auto;
    min-width: calc(var(--s) * .46);
    padding: calc(var(--s) * .038) calc(var(--s) * .055);
  }
  .tv-rr .rating-chip .stars { font-size: calc(var(--s) * .0505); }
  .tv-rr .rating-chip small { font-size: calc(var(--s) * .0337); }
  .tv-rr .rating-chip strong { font-size: calc(var(--s) * .0632); margin-top: calc(var(--s) * .019); }

  .tv-rr .testimonial-scene blockquote {
    left: calc(50% - .690 * var(--s));
    top: calc(50% + .211 * var(--s));
    bottom: auto;
    width: calc(var(--s) * .821);
    padding: calc(var(--s) * .046) calc(var(--s) * .0505);
    font-size: calc(var(--s) * .040);
  }
  .tv-rr .testimonial-scene blockquote .rr-quote {
    font-size: calc(var(--s) * .0274);
    margin-bottom: calc(var(--s) * .023);
    padding-bottom: calc(var(--s) * .021);
  }
  .tv-rr .testimonial-scene blockquote .rr-by { font-size: calc(var(--s) * .021); margin-top: calc(var(--s) * .021); }
}

/* Phone camera distance. perspective:100vw is ~390px on a phone, so the
   plane warps far harder than on desktop — the card is ~157px against a
   390px camera (ratio 2.5) where desktop is 292px against 1500px (ratio
   5.1). Lengthening it to 200vw brings the phone ratio back in line, which
   is exactly what the live template does in its own <=479px override. */
@media (max-width: 900px) {
  .tv-rr .testimonial-camera { perspective: 200vw; perspective-origin: 50%; }
}

/* Closing line under the lead — the punchline, so it carries brand colour
   and a little more weight than the paragraph above it. */
.tv-rr .rr-copy-kicker {
  margin: 1.6rem 0 0;
  color: var(--accent, #88ef56);
  font-family: Geist, Inter, sans-serif;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -.02em;
}
@media (max-width: 900px) {
  .tv-rr .rr-copy-kicker { font-size: 1.1rem; margin-top: 1.2rem; }
}

/* ═══ USE THE COLUMN ═════════════════════════════════════════
   The copy was capped at 34rem inside a ~970px column, so it filled barely
   half its half and left a dead gap in the middle of the section. Widen the
   text, scale the type up to match the space, and let the animation grow
   into its own half too.
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 901px) {
  .tv-rr .rr-copy { max-width: 46rem; padding-right: 2vw; }
  .tv-rr .rr-copy-title { font-size: clamp(2.4rem, 3.6vw, 4.1rem); line-height: 1.02; }
  .tv-rr .rr-copy-lead { max-width: 40rem; font-size: 1.15rem; line-height: 1.65; margin-top: 1.4rem; }
  .tv-rr .rr-copy-kicker { font-size: 1.5rem; margin-top: 2rem; }

  /* animation fills its half rather than floating small in the middle */
  .tv-rr .testimonial-scene { --s: min(52vh, 36vw); }
  .tv-rr .rr-sticky { gap: 1vw; padding-left: 6vw; }
}

/* ═══ COPY RHYTHM ═══════════════════════════════════════════
   Give the block room to breathe: the badge was stretching the full column
   width instead of hugging its label, and the title/lead/kicker were packed
   at 1–1.4rem apart with no clear hierarchy of gaps.
   ═══════════════════════════════════════════════════════════ */
.tv-rr .rr-copy .badge {
  display: inline-flex;
  width: auto;
  max-width: max-content;
}
.tv-rr .rr-copy-title { margin-top: 2rem; }
.tv-rr .rr-copy-lead { margin-top: 2.25rem; }
.tv-rr .rr-copy-kicker { margin-top: 2.75rem; }

@media (min-width: 901px) {
  .tv-rr .rr-copy-title { margin-top: 2.25rem; }
  .tv-rr .rr-copy-lead { margin-top: 2.5rem; line-height: 1.7; }
  .tv-rr .rr-copy-kicker { margin-top: 3rem; }
}
@media (max-width: 900px) {
  .tv-rr .rr-copy-title { margin-top: 1.5rem; }
  .tv-rr .rr-copy-lead { margin-top: 1.75rem; }
  .tv-rr .rr-copy-kicker { margin-top: 2rem; }
}

/* Brand colours in the hero headline, taken straight from the logo SVGs in
   images/ so they match the marks used elsewhere on the page. The pair is
   kept on one line so it never breaks across a wrap; "one place" is Tavvlo
   green. */
/* Phone hero proportions. Webflow's variables land the title at 28px and the
   paragraph at 22px here, so the two read as almost the same size — on desktop
   the same rules give 65px against 24px. Restore the hierarchy: the title takes
   the space, the paragraph steps back. Sized in vw with a clamp so the four
   hard-wrapped title lines stay inside the column at every phone width. */
/* The Webflow class paints this paragraph with a gradient clipped to the text
   — white at the top fading to #ffffff30 — so the last line reads as half
   erased. Drop the gradient and the transparent fill, and give it a flat
   near-white grey instead. This stylesheet loads on this page only, so the
   other pages using .about-banner-text keep their fade. */
.about-banner-section .about-banner-text {
  background-image: none;
  background-clip: border-box;
  -webkit-background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  color: #c9c9c9;
}

/* Desktop keeps the written break: "reputation, managed from" / "one place."
   Phone moves it to "reputation, managed" / "from one place." — the long line
   is what caps the type size, and shortening it is what buys the headline
   real growth instead of the 2px the original break allowed. */
.tv-br-phone { display: none; }

@media (max-width: 767px) {
  .tv-br-phone { display: inline; }
  .tv-br-desk  { display: none; }

  .about-banner-section .banner-title {
    /* floor is 1.85rem, not 2rem: at 320px the vw term drops to ~30px but a
       2rem floor would clamp it back UP past that width's 31px wrap limit. */
    font-size: clamp(1.85rem, 9.4vw, 2.85rem);
    line-height: 1.08;
  }
  .about-banner-section .about-banner-text {
    font-size: clamp(.9rem, 4.05vw, 1.05rem);
    line-height: 1.45;
  }
}

.tv-swiggy { color: #fc8019; }
.tv-zomato { color: #e23744; }
.tv-green  { color: var(--color-palette--primary, #88ef56); }
.tv-nowrap { white-space: nowrap; }

/* ═══ PHONE: TITLE ABOVE, REST BELOW ════════════════════════
   Split the copy around the animation on phones — badge + heading first,
   then the cards, then the lead and kicker — all centred.

   The story becomes a flex column and both wrappers use display:contents so
   the five pieces become its direct children and can be ordered. The lead
   takes margin-top:auto, which pushes it and the kicker to the very bottom
   of the 500vh story, so they arrive exactly as the pinned stage releases
   rather than sliding over it a viewport in.
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .tv-rr .testimonial-story { display: flex; flex-direction: column; }
  .tv-rr .rr-sticky,
  .tv-rr .rr-copy { display: contents; }

  .tv-rr .rr-copy .badge {
    order: 1;
    align-self: center;
    margin: 3.5rem auto 0;
  }
  .tv-rr .rr-copy-title {
    order: 2;
    margin: 1.25rem 0 0;
    padding: 0 1.25rem;
    text-align: center;
  }
  .tv-rr .testimonial-stage { order: 3; }
  .tv-rr .rr-copy-lead {
    order: 4;
    margin-top: auto;          /* pushes the tail to the end of the story */
    padding: 0 1.5rem;
    text-align: center;
  }
  .tv-rr .rr-copy-kicker {
    order: 5;
    margin: 1.25rem 0 3.5rem;
    padding: 0 1.5rem;
    text-align: center;
  }
}

/* The pinned stage is position:sticky with an opaque background, so it paints
   above later static siblings regardless of DOM order — which hid the tail
   copy completely even though it measured as on-screen. Lift the tail into
   its own stacking level so it sits above the stage as it releases. */
@media (max-width: 900px) {
  .tv-rr .rr-copy-lead,
  .tv-rr .rr-copy-kicker { position: relative; z-index: 2; }
}

/* ═══ PHONE: PIN THE WHOLE BLOCK TOGETHER ═══════════════════
   Previously only the stage was sticky, so the heading scrolled away long
   before the cards finished and the tail copy only arrived at the very end —
   you could never see the three together.

   Now .rr-sticky itself is the pinned 100vh screen and holds all of it:
   badge and heading at the top, the stage taking the remaining space in the
   middle, lead and kicker at the bottom. The stage no longer pins on its own,
   which also makes the earlier z-index workaround unnecessary.
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .tv-rr .rr-sticky {
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    min-height: 0;
    padding: 0;
    gap: 0;
  }
  .tv-rr .rr-copy { display: contents; }

  .tv-rr .rr-copy .badge { order: 1; align-self: center; margin: 2rem auto 0; flex: none; }
  .tv-rr .rr-copy-title { order: 2; margin: .9rem 0 0; padding: 0 1.25rem; text-align: center; flex: none; }

  .tv-rr .testimonial-stage {
    order: 3;
    position: static;
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    margin: 0;
  }

  .tv-rr .rr-copy-lead {
    order: 4;
    flex: none;
    margin: 0;
    padding: 0 1.5rem;
    text-align: center;
    position: static;
    font-size: .95rem;
  }
  .tv-rr .rr-copy-kicker {
    order: 5;
    flex: none;
    margin: .75rem 0 2rem;
    padding: 0 1.5rem;
    text-align: center;
    position: static;
    font-size: 1.05rem;
  }

  /* composition sized to the space the stage actually gets */
  .tv-rr .testimonial-scene { --s: min(30vh, 52vw); }
}

/* The stage is now a flex item, so its height is set by flex rather than an
   explicit value — and .testimonial-rotate's height:100% resolved against an
   indefinite height, collapsing to zero and taking the scenes with it.
   Fill the stage by absolute inset instead of a percentage height. */
@media (max-width: 900px) {
  .tv-rr .testimonial-stage { position: relative; }
  .tv-rr .testimonial-rotate {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
  }
}

/* .rr-sticky keeps align-items:center from the desktop grid. As a column
   flex container that centres on the cross axis, so the stage shrank to its
   content width — and its children are all absolutely positioned, giving it
   zero width. It measured 535px tall and 0 wide, which is why the cards
   vanished while every rect still looked plausible. */
@media (max-width: 900px) {
  .tv-rr .rr-sticky { align-items: stretch; }
  .tv-rr .testimonial-stage { width: 100%; }
}

/* ═══ PHONE: TIGHTEN AND ENLARGE ════════════════════════════
   The stage was flex:1, so it soaked up every spare pixel and left the cards
   marooned between the heading and the tail copy. Give it a height based on
   the composition itself (about 1.3 x the card height covers chip overhang
   top and bottom) and centre the column, so the three sit as one group.
   Title also steps up — it was falling back to the 2rem clamp floor.
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .tv-rr .rr-sticky { justify-content: center; }

  .tv-rr .rr-copy .badge { margin-top: 0; }
  .tv-rr .rr-copy-title {
    font-size: clamp(2.2rem, 6vw, 3.2rem);
    line-height: 1.05;
    margin-top: 1rem;
  }

  .tv-rr .testimonial-stage {
    --s: min(30vh, 52vw);
    flex: 0 0 auto;
    height: calc(var(--s) * 1.35);
    margin: 1.25rem 0 0;
  }

  .tv-rr .rr-copy-lead { margin-top: 1.5rem; }
  .tv-rr .rr-copy-kicker { margin: .85rem 0 0; }
}

/* Ease the phone spacing back out a little — the last pass pulled the
   heading and copy in tighter than intended. */
@media (max-width: 900px) {
  .tv-rr .testimonial-stage { margin-top: 2.5rem; }
  .tv-rr .rr-copy-lead { margin-top: 2.5rem; }
  .tv-rr .rr-copy-kicker { margin-top: 1.1rem; }
}

/* Drop the tail copy a little further below the cards. */
@media (max-width: 900px) {
  .tv-rr .rr-copy-lead { margin-top: 3.75rem; }
}

/* Further again — more air between the cards and the tail copy. */
@media (max-width: 900px) {
  .tv-rr .rr-copy-lead { margin-top: 5.5rem; }
}

/* The stage is now sized to the composition, so as the plane turns the cards
   swing past its edges and overflow:hidden was slicing them off. Allow
   vertical overflow into the space above and below (there is room there now)
   while still clipping sideways so nothing can cause a horizontal scroll. */
@media (max-width: 900px) {
  .tv-rr .testimonial-stage {
    overflow-x: clip;
    overflow-y: visible;
  }
}

/* ═══ SEAMLESS EDGES ════════════════════════════════════════
   The page body is #171616 and this section is #0a0a0a, so the TOP boundary
   showed as a hard line. Fade the section's own background into the body
   colour there. The stage's opaque fill has to go too, or it would punch the
   flat colour straight back through the fade where it overlaps.

   There is no matching fade at the bottom any more: the card deck below now
   opens on #0a0a0a, the same colour this section already is, so the two meet
   invisibly. A fade there would be lightening the join rather than hiding it,
   which is exactly what it looked like. Restore it if the deck's first card
   ever goes back to a bright ground.
   ═══════════════════════════════════════════════════════════ */
.tv-rr.testimonial-section {
  background-color: #0a0a0a;
  background-image: linear-gradient(180deg, #171616 0%, rgba(10, 10, 10, 0) 100%);
  background-size: 100% 240px;
  background-position: top center;
  background-repeat: no-repeat;
}
.tv-rr .testimonial-stage { background: transparent; }

/* ═══ PHONE: BIGGER TITLE, GROWS UPWARD ═════════════════════
   Anchor the column at the bottom instead of centring it, so when the
   heading takes an extra line it pushes up into the empty space above rather
   than shoving the cards and tail copy down. */
@media (max-width: 900px) {
  .tv-rr .rr-sticky { justify-content: flex-end; }
  .tv-rr .rr-copy-title { font-size: clamp(2.6rem, 7.5vw, 4rem); }
  .tv-rr .rr-copy-kicker { margin-bottom: 3rem; }
}

/* Phone title back down a step — the previous bump was too big. */
@media (max-width: 900px) {
  .tv-rr .rr-copy-title { font-size: clamp(2.2rem, 6vw, 3.2rem); }
}