/* Testimonials page.
   Deliberately not a card grid. A grid of equal tiles reads like a software
   review page; these are people describing something that happened to them, so
   they get vertical rhythm and room to breathe, the way the rest of the site
   treats CJ's own words. */

.tst-head { text-align: center; max-width: 44rem; margin: 0 auto 2.2rem; }

.tst-kicker {
  font-family: var(--sans); font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold);
  margin: 0 0 0.9rem;
}

.tst-head h1 {
  font-family: var(--serif); color: var(--lavender);
  font-size: clamp(2rem, 5vw, 2.8rem); margin: 0 0 0.8rem; line-height: 1.15;
}

.tst-head p { font-family: var(--sans); color: var(--lavender-dim); line-height: 1.6; }

/* One testimonial. The gold rule echoes the .testimonial blockquote used on the
   sessions page so the two never look like different sites. */
.tst-list { max-width: 46rem; margin: 0 auto; }

.tst-item:last-child { border-bottom: none; }

/* The testimonial itself. Serif and a touch larger than body copy, because these are
   somebody's own words about their own experience, not supporting text. */
.tst-body {
  font-family: var(--serif); color: var(--lavender);
  font-size: clamp(1.05rem, 2.2vw, 1.2rem); line-height: 1.7;
  margin: 0; padding-left: 1.3rem; border-left: 2px solid var(--gold);
}

.tst-by {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem;
  margin-top: 1.3rem;
  font-family: var(--sans); font-size: 0.9rem; color: var(--lavender-dim);
}

.tst-name { color: var(--gold-bright); letter-spacing: 0.02em; }

/* Remote is the hardest thing to explain and the easiest to doubt, so a remote
   testimonial says so rather than making the reader guess. */
.tst-chip {
  font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--lavender-dim); border: 1px solid var(--iris-edge);
  border-radius: 999px; padding: 0.2rem 0.65rem; white-space: nowrap;
}

.tst-chip--remote { color: var(--iris-pale); border-color: var(--iris-glow); }

/* The lead testimonial.
   A visitor should meet a person's voice inside something built, not a paragraph floating
   in the dark. Same construction as the meditation player's panel so the two pages read as
   one site: bordered iris surface, a soft glow, and the Flower of Life behind it. */
.tst-hero {
  position: relative; overflow: hidden;
  max-width: 46rem; margin: 0 auto 3.5rem;
  padding: clamp(2.6rem, 6vw, 4rem) clamp(1.4rem, 5vw, 3.2rem);
  border: 1px solid var(--iris-edge); border-radius: 6px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(107, 63, 160, 0.28), transparent 62%),
    var(--iris-band);
}

.tst-geo { width: min(30rem, 108%); height: auto; }

.tst-geo-petals circle {
  fill: none; stroke: var(--gold); stroke-width: 0.7; opacity: 0.3;
}

.tst-geo-ring { fill: none; stroke: var(--iris-bright); stroke-width: 0.8; opacity: 0.4; }

.tst-geo-ring--faint { stroke: var(--gold); opacity: 0.22; }

.tst-hero-quote::before { content: "“"; }

.tst-hero-quote::after { content: "”"; }

/* A whole testimonial, not a one-line pull. Steps down from the display size so several
   sentences still read as prose, and drops the wrapping quote marks that only make sense
   around a single line. */
.tst-hero-quote--full {
  font-size: clamp(1.15rem, 2.4vw, 1.42rem); line-height: 1.55;
  text-align: left; max-width: 34rem; margin-inline: auto;
}

.tst-hero-quote--full::before,
.tst-hero-quote--full::after { content: none; }

.tst-fallback { font-family: var(--sans); color: var(--lavender-dim); }

@media (prefers-reduced-motion: no-preference) {
  .tst-geo-petals { animation: tst-breathe 14s ease-in-out infinite; transform-origin: center; }

}

@keyframes tst-breathe {
  0%, 100% { opacity: 1; transform: scale(1); }

  50%      { opacity: 0.72; transform: scale(1.015); }

}

/* Closing note. Not a disclaimer in legal voice: every person's experience really
   is their own, and saying so plainly is both honest and protective. */
.tst-close {
  max-width: 46rem; margin: 3.5rem auto 0; padding-top: 2rem;
  border-top: 1px solid var(--iris-edge); text-align: center;
  font-family: var(--sans); color: var(--lavender-dim); line-height: 1.7;
}

.tst-close .tst-cta { margin-top: 1.6rem; }

/* ---- The letters ----
   No panels and no borders. Each testimonial is centred and given room, separated by
   a small Flower of Life the way a book of letters uses an ornament between entries.
   Nothing frames the person's words except space. */

.ltr-wrap { max-width: 42rem; margin: 0 auto; }

.ltr-item { text-align: center; padding: 1rem 0; }

.ltr-quote {
  font-family: var(--serif); font-style: italic; color: var(--lavender);
  font-size: clamp(1.45rem, 3.4vw, 2rem); line-height: 1.36;
  margin: 0 0 1.4rem; text-wrap: balance;
}
.ltr-quote::before { content: "\201C"; }
.ltr-quote::after { content: "\201D"; }

.ltr-body {
  font-family: var(--sans); color: var(--lavender-dim);
  font-size: 1rem; line-height: 1.75; text-align: left;
  max-width: 34rem; margin: 0 auto;
}
.ltr-body p { margin: 0 0 0.9rem; }
.ltr-body p:last-child { margin-bottom: 0; }

.ltr-by { justify-content: center; margin-top: 1.5rem; }

/* Vertical phone footage. The gold ring frames it the way the logo's arch does, so a raw
   phone clip still belongs on this page. */
.ltr-video-frame {
  width: min(18rem, 76vw); margin: 0 auto 1.8rem; padding: 0.5rem;
  border: 1px solid var(--gold); border-radius: 10px;
  background: var(--iris-band);
  box-shadow: 0 0 42px rgba(107, 63, 160, 0.35);
}
.ltr-video {
  width: 100%; display: block; border-radius: 6px;
  aspect-ratio: 9 / 16; object-fit: cover; background: var(--ink-black);
}

/* Landscape footage: a Zoom recording, or a camera held sideways. Same gold ring, wider,
   and the picture is shown whole instead of cropped into a phone shape. */
.ltr-video-frame--wide { width: min(36rem, 92vw); }
.ltr-video--wide { aspect-ratio: 16 / 9; object-fit: contain; }

/* The full transcript folds away under a video, so the page stays a page of voices and
   not a wall of text. The captions on the video carry the words while it plays. */
.ltr-transcript { max-width: 34rem; margin: 0.4rem auto 0; }
.ltr-transcript summary {
  cursor: pointer; list-style: none; text-align: center;
  font-family: var(--sans); font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold);
  padding: 0.4rem 0;
}
.ltr-transcript summary::-webkit-details-marker { display: none; }
.ltr-transcript summary::after { content: "  +"; }
.ltr-transcript[open] summary::after { content: "  \2212"; }
.ltr-transcript summary:hover { color: var(--gold-bright); }
.ltr-transcript .ltr-body { margin-top: 1.1rem; }

/* The ornament between entries. Small, centred, and quiet enough to read as punctuation. */
.ltr-div { display: flex; justify-content: center; padding: 2.6rem 0; }
.ltr-glyph { width: 46px; height: 46px; opacity: 0.5; }
.ltr-glyph .tst-geo-petals circle { fill: none; stroke: var(--gold); stroke-width: 3; }
.ltr-glyph .tst-geo-ring { fill: none; stroke: var(--iris-bright); stroke-width: 3; opacity: 0.7; }

/* A written letter carries no pulled line above it, because the line would be a
   sentence the letter itself is about to say. Its opening paragraph takes the weight
   instead, so the entry still starts with something to look at. */
.ltr-body--lead p:first-child {
  font-family: var(--serif); font-style: italic; color: var(--lavender);
  font-size: clamp(1.15rem, 2.4vw, 1.4rem); line-height: 1.5;
  text-align: center; margin-bottom: 1.3rem;
}