/* ===========================================================================
   WHAT CLIENTS SAY — testimonial deck.
   A stack of coloured cards, one dramatically softened corner. The controls
   shuffle the front card off into the deck and settle the next full card into
   place (back button reverses); on load the whole stack is visible. The
   "View project" pill fills with ink on hover and drifts lightly toward the
   cursor. Motion + positions are owned by js/testimonials.js;
   this file styles the pieces. Scoped under .pages.blocks .sec--voices to match
   the existing card-rule specificity.
   =========================================================================== */

.pages.blocks .sec--voices { max-width: 1320px; }

/* Two columns on desktop: statement left, deck right (as in the reference). */
.pages.blocks .voices-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.4rem, 5vw, 3.4rem);
  margin-top: clamp(1.8rem, 4vw, 3rem);
}
@media (min-width: 62em) {
  .pages.blocks .voices-layout {
    grid-template-columns: 0.82fr 1.18fr;
    /* two rows on the left — masthead up top, stat block on the baseline —
       while the deck spans both rows and stays vertically centred */
    grid-template-areas:
      "head deck"
      "stats deck";
    grid-template-rows: auto 1fr;
    column-gap: clamp(3rem, 6vw, 6rem);
    row-gap: clamp(2rem, 4vw, 3rem);
    align-items: center;
  }
  .pages.blocks .voices-head { grid-area: head; }
  .pages.blocks .tstm { grid-area: deck; }
  .pages.blocks .voices-stats { grid-area: stats; align-self: end; }
}
.pages.blocks .voices-head { align-self: start; }
/* the stepped masthead rides beside the deck here, so size it to the narrower
   column instead of the full-bleed viewport scale used elsewhere; the second
   line holds on one row so it reads as a clean two-line staircase */
.pages.blocks .voices-head .sec-title { font-size: clamp(2rem, 4.3vw, 3.7rem); }
.pages.blocks .voices-head .sec-title__line--step {
  margin-left: clamp(0.8rem, 3vw, 2rem);
  white-space: nowrap;
}

/* ---- The receipt ----------------------------------------------------------
   ONE headline number in the lower-left, tied to the front card: shuffle the
   deck and the figure swaps with it (js/testimonials.js toggles .is-active).
   About-page stat treatment — oversized grotesque figure on a hairline, mono
   uppercase label — so the numbers read as one system across the site. Both
   entries occupy the same grid cell; the inactive one sits faded + dropped. */
.pages.blocks .voices-stats {
  display: grid; /* entries stack in the same cell for the crossfade */
}
.pages.blocks .vstat {
  grid-area: 1 / 1;
  border-top: 1px solid var(--hair);
  padding-top: clamp(1rem, 2vw, 1.4rem);
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  /* in step with the deck's deal (620ms, same family of curve) */
  transition: opacity 0.62s cubic-bezier(0.5, 0.05, 0.1, 1),
              transform 0.62s cubic-bezier(0.5, 0.05, 0.1, 1);
}
.pages.blocks .vstat.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.pages.blocks .vstat__tag {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: clamp(1.2rem, 2.6vw, 2rem);
}
/* the figure — a HOLLOW numeral in the family of the About chapters' outlined
   giants (--fs-giant), held under their scale so it fills the column without
   shouting over the masthead. Outline carries the data, so the stroke sits
   darker than the About backdrops (those are set decoration-faint). */
.pages.blocks .vstat__num {
  font-weight: 700;
  font-size: clamp(4.6rem, 10.4vw, 9.4rem);
  line-height: 0.82;
  letter-spacing: -0.05em;
  /* fallback when text-stroke is unsupported: a faint solid fill */
  color: rgba(56, 57, 61, 0.18);
  user-select: none;
}
@supports (-webkit-text-stroke: 1px black) {
  .pages.blocks .vstat__num {
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(56, 57, 61, 0.62);
  }
}
/* the up-arrow that stands in for the word "increase" — same hollow-outline
   treatment as the figure (it inherits the stroke), sized just under the
   digits and nudged up so its cap aligns with theirs, reading as one figure */
.pages.blocks .vstat__arrow {
  display: inline-block;
  font-size: 0.86em;
  margin-right: 0.06em;
  transform: translateY(-0.05em);
}
/* First Session's figure carries an arrow, a "K" and a "%" — more glyphs than
   the bare numbers, so hold it a step smaller to keep it on one line inside the
   column */
.pages.blocks .vstat--wide .vstat__num {
  font-size: clamp(3.5rem, 8vw, 7.2rem);
}
.pages.blocks .vstat__title {
  margin-top: clamp(1rem, 2vw, 1.5rem);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
}
.pages.blocks .vstat__note {
  margin-top: 0.35rem;
  font-weight: 300;
  font-size: var(--fs-meta);
  letter-spacing: 0.01em;
  color: var(--ink-soft);
}
/* narrow screens: rein the hollow figure in so it clears the gutter */
@media (max-width: 61.99em) {
  .pages.blocks .vstat__num { font-size: clamp(4rem, 17vw, 7rem); }
}
/* Phones: the masthead joins the site-wide section-title scale (the narrow
   desktop-column size read a step small next to OUR WORK / OUR SERVICES) —
   held a touch under the 13vw convention so "CLIENTS SAY" stays one line.
   The title's own bottom margin collapses to 0 so the layout gap alone sets
   the rhythm: title → deck → receipt all share one even beat. */
@media (max-width: 720px) {
  .pages.blocks .voices-head .sec-title {
    font-size: clamp(2.3rem, 11.5vw, 4.4rem);
    margin-bottom: 0;
  }
  .pages.blocks .voices-head .sec-title__line--step {
    margin-left: clamp(0.6rem, 7vw, 3rem);
  }
  .pages.blocks .voices-layout {
    margin-top: clamp(1rem, 3vw, 1.8rem);
    gap: clamp(1.9rem, 6vw, 2.4rem);
  }
  /* the signature corner scales with the smaller card so it reads as the
     same gesture, not a bite out of a phone-sized card */
  .pages.blocks .tstm__card { border-radius: 18px 88px 18px 18px; }
  .pages.blocks .vstat__note { max-width: 36ch; }
  /* Every card in the deck shares ONE fixed height, so it has to clear the
     tallest quote (Edda's) above the control row — on a phone the copy wraps to
     more lines, so give the stage room to keep the attribution off the buttons.
     Shorter cards simply carry more breathing space (attribution stays pinned
     to the base), which reads as balanced rather than cramped. */
  .pages.blocks .tstm { min-height: 460px; }
}
@media (prefers-reduced-motion: reduce) {
  .pages.blocks .vstat { transition: none; }
}

/* ---- Stage ---------------------------------------------------------------
   Holds the deck + the fixed control layer. A stable min-height keeps the
   frame from resizing as cards change; the peeking cards fan out to the left
   (page overflow-x is clipped, so the overhang never scrolls the page). */
.pages.blocks .tstm {
  --tstm-pad: clamp(1.7rem, 3vw, 2.6rem);
  position: relative;
  min-height: clamp(340px, 46vw, 440px);
}

.pages.blocks .tstm__deck { position: absolute; inset: 0; }

/* ---- Cards ---------------------------------------------------------------
   All four sit on top of each other; JS translates each by its depth. The
   signature is the single oversized corner. Colours travel with the card so
   the deck reads as distinct testimonials, not tints of one. */
.pages.blocks .tstm__card {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(1.1rem, 2.4vw, 1.7rem);
  padding: var(--tstm-pad);
  /* room at the base for the control layer that sits over the front card */
  padding-bottom: clamp(4.8rem, 7vw, 6rem);
  padding-right: clamp(1rem, 5vw, 3.2rem);   /* keep copy off the big corner */
  border-radius: 20px 118px 20px 20px;
  /* grainy like the rest of the page: the noise tile sits over the card tone */
  background-color: var(--card, #e6e6e3);
  background-image: url(../img/noise.png);
  background-size: 150px;
  background-repeat: repeat;
  border: 1px solid var(--hair);
  box-shadow: 0 18px 40px -28px rgba(56, 57, 61, 0.38);
  /* JS owns transform/opacity + the transition toggle */
  transform-origin: 60% 60%;
  backface-visibility: hidden;
}
/* Neutral greyscale stack (no beige) — a grain-textured tone that reads on the
   charcoal + off-white palette; cards stay distinct via subtle value steps,
   the hairline, the shadow and the signature oversized corner. */
.pages.blocks .tstm__card:nth-child(1) { --card: #e7e7e4; } /* light neutral   */
.pages.blocks .tstm__card:nth-child(2) { --card: #dcdcd9; } /* neutral grey    */
.pages.blocks .tstm__card:nth-child(3) { --card: #d1d1cd; } /* mid neutral     */
.pages.blocks .tstm__card:nth-child(4) { --card: #c6c6c2; } /* deeper neutral  */

/* card content — ink on the pastel, on the site's type system */
.pages.blocks .tstm__brandline { display: flex; align-items: center; }
.pages.blocks .tstm__brand {
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.3rem);
  font-weight: 500; letter-spacing: -0.01em; color: var(--ink);
}
.pages.blocks .tstm__quote {
  margin: 0;
  font-weight: 400;
  font-size: var(--fs-lead);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--ink);
  max-width: 46ch;
}
/* Attribution on ONE line — name then role, separated by a middot — so it
   stays a single row even when a longer quote (e.g. Edda) pushes it down; keeps
   every card's base balanced and never lets the role collide with the controls.
   Wraps gracefully to two lines only if a card is exceptionally narrow. */
.pages.blocks .tstm__who {
  margin-top: auto;
  display: flex; flex-direction: row; align-items: baseline;
  flex-wrap: wrap; gap: 0 0.55rem;
}
.pages.blocks .tstm__name { font-size: var(--fs-body); color: var(--ink); }
.pages.blocks .tstm__role {
  font-size: var(--fs-body);
  color: var(--ink); opacity: 0.72;
}
.pages.blocks .tstm__role::before {
  content: "·"; margin-right: 0.55rem; opacity: 0.6;
}

/* ---- Control layer (fixed over the front card's base) -------------------- */
.pages.blocks .tstm__ui {
  position: absolute;
  left: var(--tstm-pad);
  right: var(--tstm-pad);
  bottom: clamp(1.4rem, 2.6vw, 2rem);
  /* above every card — cards reach z 100 at rest and z 200 mid-exit */
  z-index: 300;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  pointer-events: none;                 /* only the buttons are interactive */
}
.pages.blocks .tstm__ui .vp,
.pages.blocks .tstm__ui .tstm__ctrl { pointer-events: auto; }

/* View project — hairline stadium pill. It stays full width (no collapse); on
   hover/focus it simply fills with ink + white label, matching the arrow
   controls and the site's Book-a-call button. JS applies a light magnetic drift. */
.pages.blocks .vp {
  display: inline-flex; align-items: center;
  height: 3rem;
  padding: 0 1.3rem;
  border: 1px solid var(--ink);
  border-radius: 100px;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
  will-change: transform;
  transition: background 0.35s ease, color 0.35s ease;
}
.pages.blocks .vp__label { display: inline-block; margin-right: 0.7em; }
.pages.blocks .vp__arrow {
  display: grid; place-items: center;
  width: 1.05rem; height: 1.05rem; flex: none;
}
.pages.blocks .vp__arrow svg { width: 100%; height: 100%; }
/* hover: colour change only, no shape change */
.pages.blocks .vp:hover,
.pages.blocks .vp:focus-visible { background: var(--ink); color: #fff; }

/* circular prev / next */
.pages.blocks .tstm__ctrls { display: flex; gap: 0.55rem; }
.pages.blocks .tstm__ctrl {
  width: 3rem; height: 3rem;
  display: grid; place-items: center;
  border: 1px solid var(--ink); border-radius: 50%;
  background: transparent; color: var(--ink);
  cursor: pointer; will-change: transform;
  transition: background 0.35s ease, color 0.35s ease;
}
.pages.blocks .tstm__ctrl svg { width: 40%; height: 40%; }
.pages.blocks .tstm__ctrl:hover { background: var(--ink); color: #fff; }
.pages.blocks .tstm__ctrl[disabled] { opacity: 0.4; cursor: default; }

/* ---- Reduced motion: no collapse, no magnetic drift, plain controls ------ */
@media (prefers-reduced-motion: reduce) {
  .pages.blocks .vp,
  .pages.blocks .tstm__card { transition: none !important; }
}