.testimonial-carousel {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #fff;
  color: #f7f6f3;
  --card: clamp(188px, 22vw, 300px);
  --gap: clamp(14px, 1.8vw, 26px);

  * { box-sizing: border-box; }
  .carousel-intro {
    margin-inline: max(24px, 9vw);
    border-inline: 1px solid #0000001a;
    padding: clamp(32px, 5vw, 72px) clamp(16px, 2.5vw, 36px) 0;
    color: #211a2d;
  }
  .carousel-intro .carousel-lead { margin-top: 10px; }
  .carousel-body {
    padding: 24px 0 36px;
  }
  .carousel { display: grid; gap: var(--gap); cursor: grab; touch-action: pan-y; }
  .carousel.is-dragging { cursor: grabbing; }
  .carousel-row {
    --edge-fade: clamp(6px, 1.8%, 20px);
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent, #000 var(--edge-fade), #000 calc(100% - var(--edge-fade)), transparent);
  }
  .track { display: flex; width: max-content; will-change: transform; }
  .track ul {
    display: flex;
    gap: var(--gap);
    margin: 0;
    padding: 0 var(--gap) 0 0;
    list-style: none;
  }

  .card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    width: var(--card);
    aspect-ratio: 4 / 5;
    border-radius: clamp(18px, 1.8vw, 26px);
    background: var(--tint);
    user-select: none;
  }

  .card::before, .card::after, .card-photo { position: absolute; inset: 0; }
  .card-photo {
    background-image: url("portraits.jpg");
    background-size: 500% 200%;
    background-position: var(--x) var(--y);
  }

  .card::before {
    content: "";
    z-index: 1;
    backdrop-filter: blur(14px);
    mask-image: linear-gradient(transparent 49%, #0003 61%, #000a 78%, #000 100%);
  }

  .card::after {
    content: "";
    z-index: 2;
    background:
      radial-gradient(ellipse at 77% 115%, color-mix(in srgb, var(--tint) 67%, transparent), transparent 64%),
      linear-gradient(180deg, transparent 42%, #0b0a0a15 53%, #100f106a 70%, #0a0a0bd1 100%);
  }

  .profile {
    position: absolute;
    z-index: 3;
    inset: auto 13px 14px;
    display: grid;
    justify-items: start;
    gap: 3px;
  }

  .profile h3 { margin: 0; font-size: clamp(14px, 1.2vw, 17px); font-weight: 600; }
  .profile p { margin: 0; color: #f5f1edd1; font-size: clamp(12px, 1vw, 14px); line-height: 1.3; }
  .profile .specialty {
    color: #f5f1edbe;
    font-size: clamp(10px, .9vw, 12px);
  }

  .carousel:focus-visible { outline: 2px solid #504361; outline-offset: 3px; }

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

}