#testimonials {
        width: 100%;
        box-sizing: border-box;
        background:
          linear-gradient(to bottom, transparent 55%, #ffffff 100%),
          linear-gradient(135deg, #C7D4FF 0%, #EEF0FF 40%, #D8CCFF 100%);
      }

      .testimonials-container {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        padding: 96px 128px 120px;
        box-sizing: border-box;
      }


      #testimonials .t-label {
        font-family: 'Inter', sans-serif;
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: #0055FF;
        margin: 0 0 10px;
        cursor: default;
        user-select: none;
      }

      @keyframes t-letter-hop {
        0% {
          transform: translateY(0);
        }

        40% {
          transform: translateY(-4px);
        }

        100% {
          transform: translateY(0);
        }
      }

      .t-label-letter {
        display: inline-block;
      }

      .t-label-letter.hopping {
        animation: t-letter-hop 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
      }

      #testimonials .t-heading {
        font-family: 'Libre Baskerville', serif;
        font-style: normal;
        font-weight: 400;
        font-size: 42px;
        line-height: 1.18;
        letter-spacing: -0.02em;
        color: #333;
        margin: 0 0 36px;
      }

      /* ── Stacked layout ── */
      .t-body {
        display: flex;
        flex-direction: column;
        gap: 0;
      }

      /* ── People row ── */
      .t-people-list {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 6px;
        padding-bottom: 24px;
      }

      .t-rail-item {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 20px 16px 8px;
        cursor: pointer;
        border-radius: 16px;
        border: 1px solid transparent;
        background: transparent;
        overflow: hidden;
        transition:
          background 0.28s ease,
          border-color 0.28s ease,
          box-shadow 0.32s cubic-bezier(0.16, 1, 0.3, 1),
          transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
        will-change: transform;
      }


      @keyframes t-rail-activate {
        0% {
          transform: scale(1);
        }

        45% {
          transform: scale(1.018);
        }

        100% {
          transform: scale(1);
        }
      }

      .t-rail-item.active {
        background: rgba(255, 255, 255, 0.36);
        backdrop-filter: blur(28px) saturate(180%);
        -webkit-backdrop-filter: blur(28px) saturate(180%);
        border-color: rgba(255, 255, 255, 0.7);
        box-shadow:
          0 8px 40px rgba(0, 0, 0, 0.08),
          inset 0 1px 0 rgba(255, 255, 255, 0.9);
      }

      .t-rail-item.active .t-rail-name {
        color: #0055FF;
      }

      .t-rail-item.just-activated {
        animation: t-rail-activate 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
      }

      .t-rail-item:not(.active):hover {
        background: rgba(255, 255, 255, 0.22);
        border-color: rgba(255, 255, 255, 0.3);
        transform: translateY(-3px);
      }

      .t-rail-item:not(.active):hover .t-rail-photo {
        transform: scale(1.06);
      }

      .t-rail-item:not(.active):hover .t-rail-name {
        color: #0055FF;
      }

      /* Avatar stack */
      .t-rail-avatar-stack {
        position: relative;
        width: 52px;
        height: 52px;
        flex-shrink: 0;
      }

      .t-rail-photo {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        object-fit: cover;
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1;
        transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
      }

      .t-rail-logo {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        object-fit: cover;
        display: block;
        position: absolute;
        right: 0;
        bottom: 0;
        top: auto;
        transform: none;
        z-index: 2;
        border: 2px solid #fff;
        background: #fff;
      }


      /* Name + role */
      .t-rail-info {
        display: flex;
        flex-direction: column;
        gap: 3px;
        min-width: 0;
        width: 100%;
      }

      .t-rail-name {
        font-family: 'Inter', sans-serif;
        font-size: 16px;
        font-weight: 600;
        color: #1A1A1A;
        line-height: 1.3;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        transition: color 0.22s ease;
      }

      .t-rail-role {
        font-family: 'Inter', sans-serif;
        font-size: 12px;
        font-weight: 400;
        color: #999;
        line-height: 1.3;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      /* Progress bar — below the role text, inside the card content */
      .t-rail-progress {
        width: 100%;
        height: 2px;
        margin-top: 8px;
        border-radius: 1px;
        background: rgba(0, 0, 0, 0.08);
        overflow: hidden;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.28s ease;
      }

      .t-rail-item.active .t-rail-progress {
        opacity: 1;
      }

      .t-rail-progress-fill {
        height: 100%;
        background: #0055FF;
        transform-origin: left;
        transform: scaleX(0);
        border-radius: 1px;
      }

      /* ── Quote block ── */
      .t-quote-block {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
      }

      .t-quote {
        font-family: 'Libre Baskerville', serif;
        font-style: normal;
        font-size: 24px;
        font-weight: 400;
        color: #1A1A1A;
        line-height: 160%;
        letter-spacing: -0.01em;
        margin: 0;
        text-align: left;
        width: 100%;
        transition: opacity 0.32s ease, transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
      }

      .t-context-row {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-top: 16px;
        align-self: flex-end;
        transition: opacity 0.46s ease, transform 0.52s cubic-bezier(0.16, 1, 0.3, 1), filter 0.44s ease;
      }

      .t-quote-logo {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        object-fit: cover;
        flex-shrink: 0;
        border: 1px solid rgba(0, 0, 0, 0.08);
      }

      .t-context {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-family: 'Inter', system-ui, sans-serif;
        font-size: 12px;
        font-weight: 400;
        color: #999;
        letter-spacing: 0.02em;
      }

      /* Linked "project" word in quote */
      .t-quote-proj {
        color: inherit;
        text-decoration: none;
        transition: color 0.3s ease;
        white-space: nowrap;
      }

      .t-quote-proj .sl-wrap {
        display: inline-block;
        text-decoration: underline;
        text-underline-offset: 3px;
        text-decoration-thickness: 1px;
        text-decoration-color: currentColor;
        transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), text-decoration-color 0.3s ease;
      }

      .t-quote-proj:hover .sl-wrap {
        transform: skewX(-8deg);
        text-decoration-color: #0055FF;
      }

      .t-quote-proj:hover {
        color: #0055FF;
      }

      /* Highlighted phrases — colour sweeps left to right via JS */
      .t-quote-hl {
        font-style: normal;
        color: inherit;
      }

      /* Only the inner partial link is blue and underlined */
      #testimonials .t-context-inner-link {
        color: inherit;
        text-decoration: none;
        transition: color 0.3s ease;
      }

      #testimonials .t-context-inner-link .sl-wrap {
        display: inline-block;
        text-decoration: underline;
        text-underline-offset: 2px;
        text-decoration-thickness: 1px;
        text-decoration-color: currentColor;
        transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), text-decoration-color 0.3s ease;
      }

      #testimonials .t-context-inner-link:hover .sl-wrap {
        transform: skewX(-8deg);
        text-decoration-color: #0055FF;
      }

      #testimonials .t-context-inner-link:hover {
        color: #0055FF;
      }

      /* Responsive */
      @media (max-width: 1100px) {
        .t-quote-block {
          padding: 0 0px;
        }
      }

      @media (max-width: 768px) {
        .testimonials-container {
          padding: 56px 24px;
        }

        .t-people-list {
          display: flex;
          flex-direction: row;
          flex-wrap: nowrap;
          overflow-x: auto;
          -webkit-overflow-scrolling: touch;
          scrollbar-width: none;
          gap: 6px;
          padding-bottom: 20px;
          margin: 0 -24px;
          padding-left: 24px;
          padding-right: 24px;
        }

        .t-people-list::-webkit-scrollbar {
          display: none;
        }

        .t-rail-item {
          flex: 0 0 auto;
          width: 130px;
          padding: 12px 10px 10px;
          gap: 8px;
          border-radius: 14px;
        }

        .t-rail-avatar-stack {
          width: 40px;
          height: 40px;
        }

        .t-rail-photo {
          width: 34px;
          height: 34px;
        }

        .t-rail-logo {
          width: 17px;
          height: 17px;
        }

        .t-rail-name {
          font-size: 12px;
        }

        .t-rail-role {
          font-size: 11px;
        }

        .t-quote-block {
          padding: 0;
        }
      }

      @media (max-width: 480px) {
        .t-rail-item {
          width: 120px;
        }
      }

      @media (max-width: 1499px) {
        #testimonials .t-heading {
          font-size: 32px;
        }

        .t-quote {
          font-size: 20px;
        }
      }

      @media (max-width: 1000px) {
        #testimonials .t-heading {
          font-size: 28px;
        }

        .t-quote {
          font-size: 18px;
        }
      }

      .t-lottie-target {
        width: 82px;
        height: 82px;
        margin-left: -16px;
        cursor: pointer;
      }

      @media (max-width: 1100px) {
        .t-lottie-target {
          width: 64px;
          height: 64px;
          margin-left: -10px;
        }
      }

      @media (max-width: 600px) {
        .t-lottie-target {
          width: 64px;
          height: 64px;
          margin-left: -10px;
        }
      }

      @media (max-width: 1000px) and (orientation: landscape) and (max-height: 500px) {
        .t-quote,
        .t-quote-proj {
          font-size: 16px;
        }
      }

      @media (orientation: landscape) and (max-height: 500px) {
        .t-quote,
        .t-quote-proj {
          font-size: 16px;
        }
      }