/* Trusted Partnerships: real client words drifting past in a slow, endless reel of glass cards,
   next to figures about the length and depth of the collaborations. */
.medusa-proof { --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace; position: relative; display: grid; grid-template-columns: minmax(280px, 30%) minmax(0, 1fr); gap: clamp(28px, 3.4vw, 64px); align-items: center; padding: clamp(80px, 9vw, 140px) 0 clamp(80px, 9vw, 140px) 3.2rem; color: #e0e5ef; overflow: hidden; }
.medusa-proof__label { display: flex; align-items: center; gap: 16px; margin: 0 0 22px; font: 300 10px/1.4 var(--_font-default); letter-spacing: .14em; color: #aab6c8; }
.medusa-proof__label span { width: 70px; height: 1px; background: #aab6c82b; }
.medusa-proof__eyebrow { margin: 0 0 14px; font: 400 10px/1.3 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: #a79ac8; }
.medusa-proof h2 { margin: 0 0 22px; font: 400 clamp(38px, 4.2vw, 74px)/1 var(--_font-default); letter-spacing: -.045em; color: #e0e5ef; }
.medusa-proof__lead { max-width: 34ch; margin: 0 0 28px; padding-top: 22px; border-top: 1px solid #e0e5ef24; font: 300 clamp(14px, 1.05vw, 17px)/1.45 var(--_font-default); color: #afb9cc; }
/* Stats: just the figures, in a 2x2 grid split by a fine cross with a "+" where the lines meet. */
.medusa-proof__figures { position: relative; margin: 0; }
.medusa-proof__stats { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.medusa-proof__stats::before, .medusa-proof__stats::after { content: ''; position: absolute; pointer-events: none; background: linear-gradient(var(--dir, 90deg), transparent, #c9bdf259 20%, #c9bdf259 80%, transparent); }
.medusa-proof__stats::before { left: 50%; top: 0; bottom: 0; width: 1px; --dir: 180deg; }
.medusa-proof__stats::after { top: 50%; left: 0; right: 0; height: 1px; }
.medusa-proof__stat { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 10px; padding: 22px 18px; }
.medusa-proof__stat:nth-child(odd) { padding-left: 0; }
.medusa-proof__stats dd { margin: 0; font: 400 clamp(34px, 3vw, 52px)/1 var(--_font-default); letter-spacing: -.045em; color: #f1f3f9; font-variant-numeric: tabular-nums; }
.medusa-proof__stats dt { max-width: 22ch; font: 400 10px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #8f9ab0; }
.medusa-proof__project, .medusa-proof__pause { display: inline-flex; align-items: center; gap: 10px; border: 1px solid #e0e5ef2e; border-radius: 20px; background: linear-gradient(145deg, #222c4a8c, #0c122273); color: #f1f3f9; text-decoration: none; cursor: pointer; transition: border-color .3s; }
.medusa-proof__project svg { width: 14px; height: 14px; }
.medusa-proof__project:hover, .medusa-proof__pause:hover { border-color: #e0e5ef66; }

/* The reel: fades out at both edges, drifts endlessly, pauses on hover, focus or the button. */
.medusa-proof__reel { position: relative; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 88%, transparent); }
.medusa-proof__track { will-change: transform; --gap: clamp(14px, 1.4vw, 22px); display: flex; align-items: stretch; gap: var(--gap); width: max-content; margin: 0; padding: 6px 0; list-style: none; }
.medusa-proof__card { display: flex; width: clamp(290px, 26vw, 420px); }
.medusa-proof__card figure { display: flex; flex-direction: column; width: 100%; margin: 0; padding: clamp(24px, 2.2vw, 34px); border: 1px solid #e0e5ef24; border-radius: 22px; background: linear-gradient(145deg, #222c4a73, #0c122259); box-shadow: inset 1px 1px 0 #ffffff12; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.medusa-proof__mark { width: 40px; height: 30px; margin-bottom: 22px; color: #8f73ff; }
.medusa-proof__card blockquote { margin: 0 0 22px; }
.medusa-proof__card blockquote p { margin: 0; font: 300 clamp(14px, 1.05vw, 17px)/1.55 var(--_font-default); color: #d6dcea; }
.medusa-proof__project { align-self: flex-start; margin-top: auto; padding: 9px 14px; font: 400 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.medusa-proof__card figcaption { padding-top: 22px; }
.medusa-proof__card figcaption strong { display: block; margin-bottom: 6px; font: 400 clamp(18px, 1.4vw, 22px)/1.1 var(--_font-default); letter-spacing: -.02em; color: #f1f3f9; }
.medusa-proof__card figcaption span { font: 300 13px/1.4 var(--_font-default); color: #8f9ab0; }
/* Controls under the reel: previous / next move one card; pause stops the drift. */
.medusa-proof__controls { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 24px; }
.medusa-proof__arrow { display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 1px solid #e0e5ef2e; border-radius: 50%; background: linear-gradient(145deg, #222c4a8c, #0c122273); color: #f1f3f9; cursor: pointer; transition: border-color .3s; }
.medusa-proof__arrow svg { width: 18px; height: 18px; }
.medusa-proof__arrow:hover { border-color: #e0e5ef66; }
.medusa-proof__pause { margin-left: 6px; padding: 9px 16px; font: 400 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.medusa-proof a:focus-visible, .medusa-proof button:focus-visible { outline: 2px solid #a3b8d2; outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .medusa-proof:not(.is-driven) .medusa-proof__track { animation: medusa-proof-drift 70s linear infinite; }
  .medusa-proof__reel:hover .medusa-proof__track, .medusa-proof__reel:focus-within .medusa-proof__track, .medusa-proof.is-paused .medusa-proof__track { animation-play-state: paused; }
  /* The track holds the cards twice: moving by half its width (plus one gap) loops seamlessly. */
  @keyframes medusa-proof-drift { to { transform: translateX(calc(-50% - var(--gap) / 2)); } }
}
@media (prefers-reduced-motion: reduce) {
  .medusa-proof__reel { overflow-x: auto; }
  .medusa-proof:not(.is-driven) .medusa-proof__card[aria-hidden="true"], .medusa-proof__pause { display: none; }
  .medusa-proof.is-driven .medusa-proof__reel { overflow: visible; }
}
@media (max-width: 991px) {
  .medusa-proof { grid-template-columns: minmax(0, 1fr); padding-right: 0; }
  .medusa-proof__intro { padding-right: 2.2rem; }
}
@media (max-width: 767px) {
  .medusa-proof { padding-left: 2.2rem; }
  .medusa-proof__card { width: 80vw; }
}
