/* ============================================================
   COMPONENT — Testimonials, outline numerals  (.to)
   From Charles's standalone handoff, 2026-08-10.

   Replaces the .tm marquee. Self-contained: this file owns every
   rule for the section, and nothing in production.css overrides it.
   If a change is needed, it belongs here — not in the override layer.

   CONTRACT
     Tokens   --bg --ink --ink-soft --muted --line-2 --terra
              --serif --sans --mono --sec-pad
     Markup   section.to > .wrap > .to-list > figure.to-row *n
                .to-row  > .to-kpi  > .to-num + .to-lab
                         > .to-body > .to-logo + .to-q + .to-by + .to-link?
     Built by tools/build.py :: testimonials_section(slug)
     JS       none

   VARIANTS
     .to-logo-word   logo file is a wordmark carrying its own name
     .to-logo-mark   logo file is a square mark; pairs with .to-org

   ROW COUNT
     Rules sit between rows, never around the set, so the section opens
     and closes on whitespace at any count. Three is the intended number.
   ============================================================ */

.to { background: var(--bg); padding: var(--sec-pad) 0 }
.to-list { display: flex; flex-direction: column }

/* Charles, 2026-08-10: rules only where rows meet — for three rows that is the
   pair bracketing the middle testimonial, with nothing closing the set top or
   bottom. Written row-to-row rather than nth-child(2) so it stays correct at
   any row count. */
.to-row + .to-row { border-top: 1px solid var(--line-2) }

.to-row {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 70px);
  align-items: center;
  padding: clamp(34px, 4.4vw, 64px) 0;
}

/* ---- KPI ---------------------------------------------------- */
.to-kpi { min-width: 0 }

/* The numeral is drawn as an outline: transparent fill, stroked edge. That
   makes support load-bearing — without text-stroke the glyph is transparent
   text on cream, i.e. an invisible headline number. @supports keeps the fill
   solid anywhere the stroke can't be drawn, so the worst case is an ordinary
   numeral rather than a missing one. */
.to-num {
  display: block;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(72px, 11.5vw, 190px);
  line-height: .82;
  letter-spacing: -.05em;
  color: var(--ink);
}
@supports ((-webkit-text-stroke: 1px black) or (text-stroke: 1px black)) {
  .to-num {
    color: transparent;
    -webkit-text-stroke: 1.4px var(--ink);
    text-stroke: 1.4px var(--ink);
    paint-order: stroke fill;
  }
}

.to-lab {
  display: block;
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--ink);
}

/* ---- Body --------------------------------------------------- */
.to-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(18px, 2vw, 26px);
  min-width: 0;
}

.to-logo { display: flex; align-items: center; gap: 11px; flex: none }
.to-logo img { width: auto; object-fit: contain; object-position: left center; display: block }
/* A wordmark carries its own name, so it runs at the row's cap height. A square
   mark is set smaller and paired with the name, which is what gives the two
   kinds comparable weight on the page. */
.to-logo-word img { height: 30px; max-width: 170px }
.to-logo-mark img { height: 26px; width: 26px; border-radius: 5px }
.to-org {
  font-family: var(--serif); font-weight: 460; font-size: 19px;
  letter-spacing: -.01em; color: var(--ink); white-space: nowrap;
}

.to-q {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(20px, 1.9vw, 28px);
  line-height: 1.34;
  letter-spacing: -.014em;
  color: var(--ink);
  text-wrap: pretty;
}

.to-by { font-size: 16px; line-height: 1.5; color: var(--muted) }
.to-by b { font-weight: 600; color: var(--ink) }

/* ---- Link --------------------------------------------------- */
.to-link {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--sans); font-weight: 600; font-size: 16.5px;
  color: var(--ink); text-decoration: none;
  border-bottom: 1.5px solid var(--terra);
  padding-bottom: 3px;
}
.to-link:hover { opacity: .7 }
/* The handoff styled :hover only, which leaves a keyboard user with no visible
   target — the border is decoration, not a focus ring. */
.to-link:focus-visible {
  outline: 2px solid var(--terra);
  outline-offset: 4px;
  border-radius: 3px;
  opacity: 1;
}
.to-link svg { flex: none }

/* ---- Responsive --------------------------------------------- */
@media (max-width: 900px) {
  .to-num { -webkit-text-stroke-width: 1.2px }
}
@media (max-width: 760px) {
  .to-row { grid-template-columns: 1fr; gap: 22px; padding: clamp(30px, 6vw, 44px) 0 }
  .to-num { font-size: clamp(64px, 20vw, 110px) }
}