/* ── Social proof / customer quotes ────────────────────────────────────────
   Black panel with orange corner brackets, an orange blocky quote mark, a bold
   customer quote, the company name, and circular prev/next nav buttons whose
   arrows are built from five small squares.                                   */

.social-proof {
  background: var(--almost-black);
  padding: 100px 38px;
}

.social-proof__inner {
  position: relative;
  max-width: var(--col-width);
  margin: 0 auto;
  padding: 66px 56px 60px;
  text-align: center;
  /* Fixed height: quote pinned to the top, nav buttons to the bottom. */
  height: 520px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Orange corner brackets — same size/thickness as the site brackets
   (--bracket / --bracket-w), inset from the panel edges. */
.social-proof__corner {
  position: absolute;
  width: var(--bracket);
  height: var(--bracket);
}
.social-proof__corner--tl { top: 40px; left: 48px;  border-top: var(--bracket-w) solid var(--orange); border-left:  var(--bracket-w) solid var(--orange); }
.social-proof__corner--tr { top: 40px; right: 48px; border-top: var(--bracket-w) solid var(--orange); border-right: var(--bracket-w) solid var(--orange); }
.social-proof__corner--bl { bottom: 40px; left: 48px;  border-bottom: var(--bracket-w) solid var(--orange); border-left:  var(--bracket-w) solid var(--orange); }
.social-proof__corner--br { bottom: 40px; right: 48px; border-bottom: var(--bracket-w) solid var(--orange); border-right: var(--bracket-w) solid var(--orange); }

.social-proof__quote-mark {
  display: block;
  margin: 0 auto 28px;
}

.social-proof__quote {
  font-family: var(--font-sans);
  font-size: 30px;
  font-weight: 300;
  color: var(--white);
  line-height: 1.36;
  letter-spacing: -0.01em;
  max-width: 760px;
  margin: 0 auto;
}

.social-proof__company {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 30px;
}

/* Customer logo shown in place of the company name (white wordmark on the
   black panel). The 30px gap above comes from .social-proof__company. */
.social-proof__logo {
  display: block;
  height: 34px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
  margin: 0 auto;
  opacity: 0.9;
}
/* Audi's square Revolut lockup needs more height to read at a comparable size. */
.social-proof__logo--audi { height: 58px; }

.social-proof__nav {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: auto;   /* push buttons to the bottom of the fixed-height panel */
  padding-top: 34px;  /* min gap above buttons when the quote is tall */
}

.sp-arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  border: none;
  transition: transform 0.15s ease;
}
.sp-arrow:hover { transform: translateY(-1px); }
.sp-arrow:active { transform: translateY(0); }

.sp-arrow--prev { background: var(--white); }
.sp-arrow--next { background: #000; border: 1px solid rgba(255, 255, 255, 0.6); }

/* Mobile: keep a FIXED panel height (like desktop) so cycling between a short
   and a long quote doesn't resize the panel. The height is stepped down across
   a few bands because the longest quote (AUDI) wraps to more lines as the column
   narrows — each band is sized to fit that quote at the band's narrowest width,
   so every quote shares the height at any given viewport. Quote pins to the top,
   nav to the bottom (margin-top:auto), as on desktop. */
@media (max-width: 720px) {
  .social-proof { padding: 64px 20px; }
  .social-proof__inner { padding: 48px 26px 44px; height: 470px; }
  .social-proof__quote { font-size: 22px; }
}

@media (max-width: 520px) {
  .social-proof__inner { height: 530px; }
}

@media (max-width: 359px) {
  .social-proof__inner { height: 620px; }
}