/* ============================================================================
   Testimonials — centred header, a row of quote cards, arrows beneath.
   ========================================================================= */

.testimonials { background: var(--bg); }

/* --- Header --------------------------------------------------------------- */

.testimonials__head {
  display: grid;
  justify-items: center;
  gap: 1rem;
  /* Wide enough for the heading on one line at desktop sizes; at 48rem it
     broke in two. */
  max-width: 64rem;
  margin: 0 auto clamp(2rem, 1.5rem + 2vw, 3rem);
  text-align: center;
}
/* Heavy and on one line where it fits, as the design sets its heading. */
.testimonials__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  text-wrap: balance;
}

/* --- Slider --------------------------------------------------------------- */

.tsx { position: relative; }

.tsx__viewport {
  overflow: hidden;
  /* Room above and below so the cards' shadows are not sheared by the clip. */
  padding-block: 0.75rem 1.25rem;
  margin-block: -0.75rem -1.25rem;
}
.tsx__viewport:focus-visible { outline: none; }

.tsx__track { display: flex; align-items: stretch; will-change: transform; touch-action: pan-y; }
.tsx__slide { flex: none; container-type: inline-size; }
.tsx__slide > * { height: 100%; }

/* Centred beneath, outlined in brand blue, as in the design. */
.tsx__arrows {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin-top: clamp(1.5rem, 1.25rem + 1vw, 2rem);
}
.tsx__arrow {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--blue-600);
  box-shadow: inset 0 0 0 1.5px var(--blue-500);
  cursor: pointer;
  transition:
    background-color var(--d-fast) var(--ease-out-soft),
    color var(--d-fast) var(--ease-out-soft),
    transform var(--d-fast) var(--ease-out-expo);
}
.tsx__arrow:hover:not(:disabled) { background: var(--blue-500); color: #fff; transform: translateY(-1px); }
.tsx__arrow:active:not(:disabled) { transform: none; }
.tsx__arrow:disabled { opacity: 0.35; cursor: default; }

/* --- Card ----------------------------------------------------------------- */

/* A near-white card that cools to a pale brand blue at its foot, with a soft
   blue hairline. Flex column so the attribution sits on the card's bottom
   edge whatever the quote's length, and every card's name lines up. */
.tq {
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
  padding: 0.6rem 1.5rem 1.6rem 0.6rem;
  border-radius: var(--r-lg);
  background: linear-gradient(165deg, #FFFFFF 0%, #F7FAFF 45%, #E6EFFD 100%);
  box-shadow: 0 0 0 1px rgba(35, 105, 210, .12), 0 18px 40px -26px rgba(23, 56, 110, .35);
  transition: transform var(--d-base) var(--ease-out-expo), box-shadow var(--d-base) var(--ease-out-soft);
}
.tq:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(35, 105, 210, .2), 0 26px 50px -26px rgba(23, 56, 110, .42); }

/* Logo tile and lead. Stacked on a narrow card; side by side once the card
   itself has room, which is a container query because at three across the
   card is a third of the viewport. */
.tq__top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}
@container (min-width: 21rem) {
  .tq__top { flex-direction: row; gap: 1.5rem; }
}

/* The mark on a white rounded tile with a soft shadow, as in the design. */
.tq__logo {
  --seal-size: 84px;
  flex: none;
  display: grid;
  place-items: center;
  width: 104px;
  height: 104px;
  border-radius: var(--r-md);
  background: #fff;
  box-shadow: 0 10px 24px -16px rgba(23, 56, 110, .35);
}
/* The shared plate sizes itself from the logo's aspect ratio, up to 2.2
   squares wide, so the Lancaster and Anchor wordmarks came out wider than this
   104px tile and spilled over it (Anchor's into the quote mark). Inside the
   tile the plate fills the tile instead, and the image, already
   `object-fit: contain`, scales down to fit whatever its shape. */
.tq__logo .seal {
  width: 100%;
  height: 100%;
  padding: 12px;
  box-shadow: none;
  background: transparent;
}

.tq__lead-wrap { margin: 0; padding-top: 0.9rem; min-width: 0; }
/* Drawn rather than typed, so it is the same heavy blue shape on every
   platform. Set inline before the lead's first word, as in the design. */
.tq__mark {
  float: left;
  margin: 0.15rem 0.55rem 0 0;
  color: var(--blue-500);
  line-height: 0;
}
.tq__lead {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink-900);
  /* Normal wrapping, not `pretty`: beside the floated quote mark, `pretty`
     pulled words down early and left short ragged lines. */
  text-wrap: wrap;
}

/* Body, clamped, with a real disclosure button. The left inset lines it up
   with the card's own inner edge rather than with the logo tile. */
.tq__body-wrap { min-width: 0; padding-left: 0.9rem; }
.tq__body {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-secondary);
  text-wrap: pretty;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 7;
  line-clamp: 7;
  overflow: hidden;
}
.tq__body.is-open { display: block; -webkit-line-clamp: none; line-clamp: none; overflow: visible; }
.tq__more {
  margin-top: 0.35rem;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-700);
  cursor: pointer;
}
.tq__more:hover { color: var(--blue-600); text-decoration: underline; text-underline-offset: 0.18em; }

/* Attribution: a pale blue monogram and three lines — name heavy, role
   regular, organisation heavy. */
.tq__by {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: auto;
  padding-left: 0.9rem;
}
.tq__avatar {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: 50%;
  background: var(--blue-100);
  box-shadow: inset 0 0 0 1px var(--blue-200);
  color: var(--blue-600);
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.tq__by-text { display: grid; gap: 0.15rem; min-width: 0; }
.tq__by-name { font-size: var(--fs-body); font-weight: 700; color: var(--ink-900); }
.tq__by-role { font-size: var(--fs-sm); color: var(--text-secondary); text-wrap: pretty; }
.tq__by-org { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-800); text-wrap: pretty; }

@media (prefers-reduced-motion: reduce) {
  .tq, .tq:hover, .tsx__arrow, .tsx__arrow:hover:not(:disabled) { transition: none; transform: none; }
}