/* ==========================================
       Design Tokens
       ========================================== */
    :root {
      --accent-amber: #f6a10a;
      --accent-blue:  #5aa0ff;
      --card-radius: 22px;
      --card-shadow: 0 10px 30px rgba(0, 0, 0, .25);
      --overlay-start: rgba(0, 0, 0, 0);
      --overlay-end:   rgba(0, 0, 0, .85); /* darker for legibility */
    }

    /* ==========================================
       Base & Typography
       ========================================== */
    body {
      background: inherit;
      color: #000000;
    }

    .eyebrow {
      color: #8a95a3;
      font-size: .78rem;
      letter-spacing: .2em;
    }

    .display-title {
      font-weight: 700;
      line-height: 1.05;
    }

    /* ==========================================
       Text Effects
       ========================================== */
    .gradient-word {
      background: linear-gradient(90deg, var(--accent-amber), var(--accent-blue));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .accent-amber {
      background: linear-gradient(90deg, #ffcc66, #ff9f1c);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .accent-blue {
      background: linear-gradient(90deg, #7cc3ff, #4a7dff);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    /* ==========================================
       Testimonial Card
       ========================================== */
    .t-card {
      border: none;
      border-radius: var(--card-radius);
      overflow: hidden;
      position: relative;
      transition: transform .25s ease, box-shadow .25s ease;
    }

    .t-card .bg-img {
      background-position: center;
      background-size: cover;
      filter: saturate(1.05) contrast(1.05);
      inset: 0;
      position: absolute;
    }

    /* Overlay gradient bottom-up for text readability */
    .t-card::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(
        to top,
        var(--overlay-end) 0%,
        rgba(0, 0, 0, .95) 25%,
        var(--overlay-start) 75%
      );
    }

    .t-card .content {
      display: flex;
      flex-direction: column;
      height: 100%;
      justify-content: flex-end;
      padding: 1.25rem 1.25rem 1.75rem;
      position: relative;
      z-index: 2;
    }

    .quote {
      color: #f4f6f8;
      font-size: 1.25rem;
      font-weight: 300;
      margin-bottom: 1rem;
    }

    .divider {
      background: linear-gradient(90deg, rgba(255,255,255,.31), rgba(255,255,255,.31));
      height: 1px;
      margin: .75rem 0 1rem 0;
    }

    .person {
      color: #e6ebef;
      font-weight: 600;
    }

    .role {
      color: #b9c3cf;
      font-size: .95rem;
    }

    /* ==========================================
       Layout Sizing
       ========================================== */
    .t-card.tall { aspect-ratio: 3 / 4; }

    @media (min-width: 992px) {
      .t-card.tall { aspect-ratio: 4 / 5; }
    }

    /* ==========================================
       Interactions
       ========================================== */
    .t-card:hover {
     
      transform: translateY(-4px);
    }

 /*/* ==========================================
   Clickable helpers
   ========================================== */
  .t-card .bg-img{pointer-events:none;}           /* allow clicks to pass */
  .t-card::after{pointer-events:none;}            /* allow clicks to pass */
  .t-card .stretched-link{position:static;}       /* rely on Bootstrap stretch */