<section class="tm-brp" aria-label="Client testimonials">
  <header class="tm-brp-mast">
    <div class="tm-brp-title">The Testimonial Record &middot; Reviews &amp; Verified Reports</div>
    <div class="tm-brp-count">Vol. XLII &middot; 1,248 Reviews</div>
  </header>

  <div class="tm-brp-grid">

    <article class="tm-brp-col">
      <div class="tm-brp-stamp" aria-hidden="true">&#9733; Editor's Pick</div>
      <blockquote class="tm-brp-pull">"Nothing short of transformative — our team has never been more aligned."</blockquote>
      <p class="tm-brp-attribution">Posted by</p>
      <p class="tm-brp-attr-name"><cite>Eleanor Ashcroft</cite> &middot; COO, Latitude Group</p>
      <div class="tm-brp-star-row" aria-label="5 out of 5 stars">
        <span class="tm-brp-s" aria-hidden="true">&#9733;</span>
        <span class="tm-brp-s" aria-hidden="true">&#9733;</span>
        <span class="tm-brp-s" aria-hidden="true">&#9733;</span>
        <span class="tm-brp-s" aria-hidden="true">&#9733;</span>
        <span class="tm-brp-s" aria-hidden="true">&#9733;</span>
      </div>
      <p class="tm-brp-body">I've evaluated dozens of platforms in my career and few have combined this level of depth with genuine usability. The onboarding alone changed how we think about process. Six months in and the team still finds new capabilities worth talking about.</p>
    </article>

    <div class="tm-brp-divider" aria-hidden="true"></div>

    <div class="tm-brp-col">
      <div class="tm-brp-rating-box">
        <div class="tm-brp-rating-num">4.9</div>
        <div class="tm-brp-rating-sub">Out of 5.0 &middot; 1,248 reviews</div>
        <div class="tm-brp-bar-wrap">
          <div class="tm-brp-bar-row"><span class="tm-brp-bar-lbl">5&#9733;</span><div class="tm-brp-bar-track"><div class="tm-brp-bar-fill" style="width:89%"></div></div><span class="tm-brp-bar-cnt">1,112</span></div>
          <div class="tm-brp-bar-row"><span class="tm-brp-bar-lbl">4&#9733;</span><div class="tm-brp-bar-track"><div class="tm-brp-bar-fill" style="width:8%"></div></div><span class="tm-brp-bar-cnt">98</span></div>
          <div class="tm-brp-bar-row"><span class="tm-brp-bar-lbl">3&#9733;</span><div class="tm-brp-bar-track"><div class="tm-brp-bar-fill" style="width:2%"></div></div><span class="tm-brp-bar-cnt">24</span></div>
          <div class="tm-brp-bar-row"><span class="tm-brp-bar-lbl">2&#9733;</span><div class="tm-brp-bar-track"><div class="tm-brp-bar-fill" style="width:1%"></div></div><span class="tm-brp-bar-cnt">9</span></div>
          <div class="tm-brp-bar-row"><span class="tm-brp-bar-lbl">1&#9733;</span><div class="tm-brp-bar-track"><div class="tm-brp-bar-fill" style="width:0.4%"></div></div><span class="tm-brp-bar-cnt">5</span></div>
        </div>
      </div>
      <article class="tm-brp-tblock">
        <div class="tm-brp-bnum" aria-hidden="true">01</div>
        <div class="tm-brp-star-row" aria-label="5 out of 5 stars"><span class="tm-brp-s">&#9733;</span><span class="tm-brp-s">&#9733;</span><span class="tm-brp-s">&#9733;</span><span class="tm-brp-s">&#9733;</span><span class="tm-brp-s">&#9733;</span></div>
        <blockquote class="tm-brp-bq">"Doubled our output with half the friction. It's the tool I wish we'd found three years ago."</blockquote>
        <figcaption class="tm-brp-bmeta"><cite>D. Nakamura</cite> &middot; Head of Ops, Renova</figcaption>
      </article>
      <article class="tm-brp-tblock">
        <div class="tm-brp-bnum" aria-hidden="true">02</div>
        <div class="tm-brp-star-row" aria-label="5 out of 5 stars"><span class="tm-brp-s">&#9733;</span><span class="tm-brp-s">&#9733;</span><span class="tm-brp-s">&#9733;</span><span class="tm-brp-s">&#9733;</span><span class="tm-brp-s">&#9733;</span></div>
        <blockquote class="tm-brp-bq">"The support team alone is worth the subscription. Responsive, knowledgeable, human."</blockquote>
        <figcaption class="tm-brp-bmeta"><cite>F. Oberlin</cite> &middot; Founder, Plinth Studio</figcaption>
      </article>
    </div>

    <div class="tm-brp-divider" aria-hidden="true"></div>

    <div class="tm-brp-col">
      <div class="tm-brp-hblock">
        <blockquote>"I put my entire operations on this platform in 48 hours. That is not something I do lightly."</blockquote>
        <figcaption class="tm-brp-hmeta">— <cite>K. Bergström</cite>, CTO &middot; Kolverd Systems</figcaption>
      </div>
      <article class="tm-brp-tblock">
        <div class="tm-brp-bnum" aria-hidden="true">03</div>
        <div class="tm-brp-star-row" aria-label="4 out of 5 stars"><span class="tm-brp-s">&#9733;</span><span class="tm-brp-s">&#9733;</span><span class="tm-brp-s">&#9733;</span><span class="tm-brp-s">&#9733;</span><span class="tm-brp-s tm-brp-se">&#9733;</span></div>
        <blockquote class="tm-brp-bq">"Robust, opinionated in the right ways, and genuinely designed for real work rather than demos."</blockquote>
        <figcaption class="tm-brp-bmeta"><cite>P. Fontaine</cite> &middot; PM, Vex Collective</figcaption>
      </article>
      <article class="tm-brp-tblock">
        <div class="tm-brp-bnum" aria-hidden="true">04</div>
        <div class="tm-brp-star-row" aria-label="5 out of 5 stars"><span class="tm-brp-s">&#9733;</span><span class="tm-brp-s">&#9733;</span><span class="tm-brp-s">&#9733;</span><span class="tm-brp-s">&#9733;</span><span class="tm-brp-s">&#9733;</span></div>
        <blockquote class="tm-brp-bq">"Every competitor promised results. These people delivered — on time, under budget."</blockquote>
        <figcaption class="tm-brp-bmeta"><cite>M. Osei</cite> &middot; Director, Harven Capital</figcaption>
      </article>
    </div>
  </div>
</section>

/* Brutalist Press — newsprint column layout. Self-contained: all
   styling lives under .tm-brp. Pull quote uses a heavy top + bottom
   border (the masthead-rule pattern). Rating bars animate from 0
   width on first paint. Red editor's stamp is rotated -1deg for a
   stuck-on feel. */
.tm-brp {
  --tm-brp-black:  #111010;
  --tm-brp-white:  #f2ede4;
  --tm-brp-yellow: #f5e642;
  --tm-brp-red:    #d63022;
  --tm-brp-gray:   #888070;
  --tm-brp-lgray:  #ddd8cc;
  padding: clamp(28px, 4vw, 48px) clamp(20px, 3vw, 40px);
  background: var(--tm-brp-white);
  font-family: 'IBM Plex Serif', Georgia, serif;
  color: var(--tm-brp-black);
  min-height: 520px;
}
.tm-brp-mast {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
  border-top: 6px solid var(--tm-brp-black);
  border-bottom: 2px solid var(--tm-brp-black);
  padding: 6px 0;
}
.tm-brp-title {
  font-family: 'Bebas Neue', 'Arial Narrow', sans-serif;
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--tm-brp-black);
  flex: 1;
}
.tm-brp-count {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10px;
  color: var(--tm-brp-gray);
  letter-spacing: 0.1em;
}
.tm-brp-grid {
  display: grid;
  grid-template-columns: 2fr 1px 1.2fr 1px 1.2fr;
  gap: 0;
  align-items: start;
}
.tm-brp-divider {
  background: var(--tm-brp-black);
  height: 100%;
  min-height: 280px;
  opacity: 0.15;
}
.tm-brp-col {
  padding: 0 22px;
}
.tm-brp-col:first-child { padding-left: 0; }
.tm-brp-col:last-child  { padding-right: 0; }
.tm-brp-pull {
  font-family: 'IBM Plex Serif', Georgia, serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1.4rem, 2.4vw, 2.2rem);
  line-height: 1.12;
  color: var(--tm-brp-black);
  border-top: 4px solid var(--tm-brp-black);
  border-bottom: 4px solid var(--tm-brp-black);
  padding: 18px 0;
  margin: 0 0 18px;
}
.tm-brp-stamp {
  display: inline-flex;
  background: var(--tm-brp-red);
  color: var(--tm-brp-white);
  font-family: 'Bebas Neue', 'Arial Narrow', sans-serif;
  font-size: 10px;
  letter-spacing: 0.25em;
  padding: 3px 8px;
  margin-bottom: 12px;
  transform: rotate(-1deg);
}
.tm-brp-attribution {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tm-brp-gray);
  margin: 0 0 4px;
}
.tm-brp-attr-name {
  font-family: 'IBM Plex Serif', Georgia, serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--tm-brp-black);
  margin: 0 0 8px;
}
.tm-brp-attr-name cite { font-style: normal; }
.tm-brp-body {
  font-size: 0.86rem;
  line-height: 1.7;
  color: #333;
  margin-top: 14px;
}
.tm-brp-rating-box {
  background: var(--tm-brp-black);
  color: var(--tm-brp-yellow);
  padding: 22px 20px;
  margin-bottom: 22px;
  position: relative;
  overflow: hidden;
}
.tm-brp-rating-box::after {
  content: '\2605';
  position: absolute;
  right: -10px; top: -10px;
  font-size: 80px;
  opacity: 0.07;
  color: var(--tm-brp-yellow);
  line-height: 1;
}
.tm-brp-rating-num {
  font-family: 'Bebas Neue', 'Arial Narrow', sans-serif;
  font-size: 56px;
  line-height: 1;
  color: var(--tm-brp-yellow);
}
.tm-brp-rating-sub {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.2em;
  color: #888;
  text-transform: uppercase;
  margin-top: 4px;
}
.tm-brp-bar-wrap { margin-top: 16px; }
.tm-brp-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
}
.tm-brp-bar-lbl {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 8px;
  color: #888;
  width: 26px;
  text-align: right;
}
.tm-brp-bar-track {
  flex: 1;
  height: 4px;
  background: #222;
  overflow: hidden;
}
.tm-brp-bar-fill {
  height: 100%;
  background: var(--tm-brp-yellow);
  transform-origin: left;
  animation: tm-brp-barin 1s ease both;
}
.tm-brp-bar-row:nth-child(1) .tm-brp-bar-fill { animation-delay: 0.1s; }
.tm-brp-bar-row:nth-child(2) .tm-brp-bar-fill { animation-delay: 0.2s; }
.tm-brp-bar-row:nth-child(3) .tm-brp-bar-fill { animation-delay: 0.3s; }
.tm-brp-bar-row:nth-child(4) .tm-brp-bar-fill { animation-delay: 0.4s; }
.tm-brp-bar-row:nth-child(5) .tm-brp-bar-fill { animation-delay: 0.5s; }
@keyframes tm-brp-barin {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
.tm-brp-bar-cnt {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 8px;
  color: #666;
  width: 22px;
}
.tm-brp-tblock {
  margin-bottom: 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--tm-brp-lgray);
  position: relative;
  transition: all 0.25s;
}
.tm-brp-tblock:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.tm-brp-tblock:hover .tm-brp-bnum {
  color: var(--tm-brp-yellow);
  text-shadow: 2px 2px 0 var(--tm-brp-black);
}
.tm-brp-bnum {
  font-family: 'Bebas Neue', 'Arial Narrow', sans-serif;
  font-size: 40px;
  line-height: 1;
  color: var(--tm-brp-lgray);
  float: left;
  margin-right: 9px;
  margin-top: -5px;
  transition: color 0.25s, text-shadow 0.25s;
}
.tm-brp-bq {
  font-size: 0.87rem;
  line-height: 1.6;
  color: #333;
  margin: 0 0 10px;
  font-style: italic;
}
.tm-brp-bmeta {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tm-brp-gray);
  display: flex;
  align-items: center;
  gap: 8px;
}
.tm-brp-bmeta::before {
  content: '\2014';
  color: var(--tm-brp-red);
  font-size: 12px;
}
.tm-brp-bmeta cite { font-style: normal; color: var(--tm-brp-black); font-weight: 600; }
.tm-brp-star-row {
  display: flex;
  gap: 2px;
  margin-bottom: 8px;
}
.tm-brp-s {
  color: var(--tm-brp-black);
  font-size: 11px;
}
.tm-brp-se { color: var(--tm-brp-lgray); }
.tm-brp-hblock {
  background: var(--tm-brp-yellow);
  padding: 16px 18px;
  margin-bottom: 22px;
  border-left: 5px solid var(--tm-brp-black);
}
.tm-brp-hblock blockquote {
  font-style: italic;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--tm-brp-black);
  margin: 0 0 8px;
}
.tm-brp-hmeta {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #555;
}
.tm-brp-hmeta cite { font-style: normal; }
@media (max-width: 720px) {
  .tm-brp-grid { grid-template-columns: 1fr; gap: 24px; }
  .tm-brp-divider { display: none; }
  .tm-brp-col { padding: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .tm-brp-bar-fill { animation: none; transform: scaleX(1); }
  .tm-brp-tblock { transition: none; }
}