/* Alumni profiles on the v2 index. */
.tx-alumni {
  position: relative;
  overflow: hidden;
  background: #0d2d59;
  font-family: var(--v2-font-body);
}

.tx-alumni *,
.tx-alumni *::before,
.tx-alumni *::after {
  box-sizing: border-box;
  font-family: inherit;
}

.tx-bg,
.tx-scrim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.tx-bg {
  object-fit: cover;
  border: 0;
}

.tx-scrim {
  background: linear-gradient(90deg, rgba(9, 33, 70, .91), rgba(7, 45, 101, .89));
}

.tx-inner {
  position: relative;
  width: calc(100% - 2 * var(--v2-gutter));
  max-width: 1600px;
  margin: 0 auto;
  padding: clamp(72px, 6.5vw, 124px) 0;
  text-align: center;
}

.tx-title {
  margin: 0 0 44px;
  color: var(--v2-heading-color);
  font-family: var(--v2-font-display);
  font-size: clamp(36px, 2.6vw, 50px);
  font-weight: 700;
  line-height: 1.2;
}

.tx-lead {
  max-width: 1000px;
  margin: 0 auto 104px;
  color: #fff;
  font-size: clamp(18px, 1.25vw, 24px);
  font-weight: 600;
  line-height: 1.8;
  text-wrap: pretty;
}

.tx-slide {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 84px 56px;
  text-align: left;
  animation: tx-fade-in .3s ease both;
}

.tx-slide[hidden],
.tx-controls[hidden] {
  display: none;
}

.tx-card {
  display: grid;
  grid-template-columns: clamp(128px, 9.25vw, 176px) minmax(0, 1fr);
  align-items: center;
  position: relative;
  gap: 48px;
  min-width: 0;
  min-height: 176px;
  color: #ffde90;
}

.tx-card:hover,
.tx-card:focus {
  color: #ffde90;
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .v2-index .tx-card { transition: scale .28s ease; }
  .v2-index .tx-card:is(:hover, :focus-visible) {
    scale: 1.025;
    z-index: 1;
  }
  .v2-index .tx-portrait { transition: filter .28s ease; }
  .v2-index .tx-card:is(:hover, :focus-visible) .tx-portrait {
    filter: drop-shadow(0 12px 20px rgba(0, 0, 0, .28));
  }
}

.tx-portrait {
  position: relative;
  aspect-ratio: 1;
  border-radius: 50%;
}

/* Pixso 194:17: the 182 x 184 artwork includes a smaller, offset dashed circle. */
.tx-portrait::before {
  content: '';
  position: absolute;
  top: 0;
  left: -3.4090909%;
  width: 103.4090909%;
  height: 104.5454545%;
  background: url('../images/testimonial-portrait-dash.svg') center / 100% 100% no-repeat;
  pointer-events: none;
}

.tx-portrait::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../images/testimonial-portrait-ring.svg') center / 100% 100% no-repeat;
  pointer-events: none;
}

/* The photo continues behind the fading ring, inside one circular outer clip. */
.tx-photo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 50%;
  background: #fff;
}

.tx-photo img {
  display: block;
  position: absolute;
  /* Keep 16px headroom at 176px, entirely within the upper ring's width. */
  top: 9.0909091%;
  left: 0;
  width: 100%;
  height: 90.9090909%;
  object-fit: cover;
  object-position: center top;
}

.tx-quote-mark {
  position: absolute;
  top: 6px;
  left: calc(clamp(128px, 9.25vw, 176px) + 8px);
  color: #fff;
  font-family: Georgia, serif;
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
}

.tx-body {
  min-width: 0;
}

.tx-name-row {
  display: flex;
  align-items: baseline;
  margin-bottom: 12px;
}

.tx-name {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  color: #ffde90;
  font-size: clamp(24px, 1.65vw, 32px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .12em;
  overflow-wrap: anywhere;
}

.tx-name-en {
  min-width: 0;
  margin-left: -1.8em;
  background: linear-gradient(90deg, transparent, rgba(255, 222, 144, .3) 30%, #ffde90 85%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: clamp(15px, 1.15vw, 22px);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: .1em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.tx-name:only-child {
  min-width: 0;
  flex-shrink: 1;
}

.tx-role {
  color: #29d5ff;
  font-size: clamp(17px, 1.2vw, 23px);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: .06em;
  overflow-wrap: anywhere;
}

.tx-role span {
  display: block;
  white-space: pre-line;
}

.v2-index .tx-role span:first-child { color: #35d0fd; }
.v2-index .tx-role span + span { color: #a8dff0; }

.tx-controls {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 64px;
}

.tx-dot {
  display: grid;
  place-items: center;
  width: 25px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.tx-dot::before {
  content: '';
  width: 14px;
  height: 14px;
  border: 2px solid #fff;
  border-radius: 50%;
}

.tx-dot[aria-current="true"]::before,
.tx-dot:hover::before {
  background: #fff;
}

.tx-cta {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 74px;
  margin-top: 52px;
  padding: 14px 34px;
  border: 1px solid var(--cta-border);
  border-radius: var(--cta-radius) var(--cta-radius) 0 0;
  background: var(--cta-gradient);
  color: var(--cta-text);
  font-family: var(--v2-font-display);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .2em;
  transition: filter .2s;
}

.tx-cta:hover,
.tx-cta:focus {
  color: var(--cta-text);
  text-decoration: none;
  filter: brightness(1.07);
}

.tx-dot:focus-visible,
.tx-card:focus-visible,
.tx-cta:focus-visible {
  outline: 3px solid #ffde90;
  outline-offset: 5px;
}

@keyframes tx-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Match the compact Pixso composition without changing the desktop grid. */
@media (max-width: 767px) {
  .tx-inner {
    width: calc(100% - clamp(40px, 13.33vw, 80px));
    max-width: 680px;
    padding: clamp(40px, 6vw, 72px) 0;
  }

  .tx-title {
    margin-bottom: 20px;
    font-size: clamp(25px, calc(17.86px + 1.905vw), 36px);
    line-height: 1.2;
  }

  .tx-lead {
    margin-bottom: clamp(30px, 5vw, 44px);
    font-size: clamp(12px, calc(8.43px + .952vw), 17px);
    line-height: 1.75;
    line-break: strict;
  }

  .tx-lead br { display: none; }
  .tx-lead span { display: inline-block; white-space: nowrap; }
  .tx-lead span:first-child,
  .tx-lead span:last-child { display: block; }

  .tx-stack { touch-action: pan-y; }
  .tx-slide { grid-template-columns: minmax(0, 1fr); gap: clamp(16px, 4.27vw, 28px); }
  .tx-slide + .tx-slide { margin-top: 16px; }
  .tx-slide[hidden] + .tx-slide { margin-top: 0; }

  /* Reserve the tallest page's natural height so pagination never jumps. */
  .tx-stack.is-paginated { display: grid; }
  .tx-stack.is-paginated .tx-slide { grid-area: 1 / 1; align-content: start; margin-top: 0; }
  .tx-stack.is-paginated .tx-slide[hidden] { display: grid; visibility: hidden; pointer-events: none; }

  .tx-card {
    --tx-portrait-size: clamp(80px, 26.67vw, 150px);
    --tx-card-padding: clamp(12px, 3.47vw, 24px);
    grid-template-columns: minmax(0, 1fr) var(--tx-portrait-size);
    gap: clamp(24px, 6.4vw, 40px);
    min-height: clamp(142px, 37.87vw, 208px);
    padding: 20px var(--tx-card-padding);
    border-bottom: 2px solid #ffde90;
    background: #102f60;
  }

  /* Fine divider with the small angular notch visible in the design. */
  .tx-card::before {
    content: '';
    position: absolute;
    top: 15px;
    bottom: 15px;
    right: calc(var(--tx-card-padding) + var(--tx-portrait-size) + clamp(12px, 3.2vw, 20px));
    width: 6px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 100' preserveAspectRatio='none'%3E%3Cpath d='M1 0V42L5 50H1V100' fill='none' stroke='%2395accb' stroke-width='.7' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    pointer-events: none;
  }

  .tx-body { grid-column: 1; grid-row: 1; }
  .tx-portrait { grid-column: 2; grid-row: 1; }
  .tx-quote-mark {
    top: 17px;
    left: auto;
    right: calc(var(--tx-card-padding) + var(--tx-portrait-size) - 8px);
    font-size: 28px;
    z-index: 1;
  }

  .tx-name-row { flex-wrap: wrap; gap: 2px 6px; margin-bottom: 12px; }
  .tx-name {
    font-size: clamp(20px, calc(15.71px + 1.143vw), 26px);
    letter-spacing: .06em;
    overflow-wrap: break-word;
  }
  .tx-name-en {
    margin-left: 0;
    background: none;
    color: #e1ca94;
    font-size: clamp(10px, calc(5.71px + 1.143vw), 16px);
    letter-spacing: .07em;
    overflow-wrap: break-word;
  }
  .tx-role {
    color: #35d0fd;
    font-size: clamp(13px, calc(9.43px + .952vw), 18px);
    line-height: 1.5;
    letter-spacing: .02em;
    overflow-wrap: break-word;
    line-break: strict;
  }

  .tx-controls { margin-top: 12px; }
  .tx-dot { width: 28px; }
  .tx-dot::before { width: 7px; height: 7px; border-width: 1px; }
  .tx-cta {
    width: 100%;
    max-width: clamp(312px, 60vw, 440px);
    min-height: 44px;
    margin-top: 24px;
    padding: 8px 12px;
    border-radius: var(--cta-radius);
    font-family: var(--v2-font-body);
    font-size: clamp(19px, 2.5vw, 22px);
    line-height: 1.45;
    letter-spacing: 2.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tx-slide { animation: none; }
  .tx-cta { transition: none; }
}

/* Overlay pages on desktop too, so the next page cannot move the controls. */
.v2-index .tx-stack.is-paginated { display: grid; }
.v2-index .tx-stack.is-paginated .tx-slide {
  grid-area: 1 / 1;
  align-content: start;
  margin-top: 0;
  animation: none;
}
.v2-index .tx-stack.is-paginated .tx-slide[hidden] {
  display: grid;
  visibility: hidden;
  pointer-events: none;
}
.v2-index .tx-stack.is-sliding {
  overflow-x: clip;
  clip-path: inset(-30px 0);
}