/* references.css: Screen 4, top part. Client logos between thin yellow lines, then quotes in white. */
.references-section { background: var(--black); color: var(--white); padding: var(--space-7) var(--space-6) var(--space-7); }
.logo-band { max-width: 1200px; margin: 0 auto; border-top: var(--line-thin) solid var(--yellow); border-bottom: var(--line-thin) solid var(--yellow); height: 180px; position: relative; }
.logo-band p { position: absolute; top: var(--space-3); left: 0; margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--yellow); }
.logo-band img { position: absolute; left: 50%; top: 55%; transform: translate(-50%, -50%); max-height: 96px; max-width: 220px; width: auto; opacity: 0; transition: opacity 1.4s var(--ease-slow); }
.logo-band img.is-on { opacity: 1; }
.quotes { max-width: 1200px; margin: var(--space-7) auto 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.quote { margin: 0; }
.quote blockquote { margin: 0; font-size: 19px; line-height: 1.55; color: var(--white); }
.quote blockquote::before { content: "“"; display: block; font: 800 88px/.6 var(--font-accent); color: var(--yellow); margin-bottom: var(--space-2); }
.quote figcaption { margin-top: var(--space-4); font-size: 15px; line-height: 1.5; color: #cfcfcf; }
.quote figcaption strong { color: var(--white); }
@media (max-width: 760px) {
  .references-section { padding: var(--space-6) var(--space-3) var(--space-6) calc(var(--rail) + var(--space-3)); }
  .logo-band { height: 150px; }
  .logo-band img { max-height: 76px; max-width: 160px; }
  .quotes { grid-template-columns: 1fr; gap: var(--space-6); }
  .quote blockquote { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) { .logo-band img { transition: none; } }

/* Yellow version (Nora, 5 Nov): black text, black lines, logos shown in black */
.references-section { background: var(--yellow); color: var(--black); }
.logo-band { border-color: var(--black); }
.logo-band p { color: var(--black); }
.logo-band img { filter: invert(1); }
.quote blockquote { color: var(--black); }
.quote blockquote::before { color: var(--black); }
.quote figcaption { color: #3a2f00; }
.quote figcaption strong { color: var(--black); }

/* References v2, from Nora's Figma "now / references" (1440 × 900, 9 Nov). 1 Figma px = var(--u) on desktop. */
.rf { background: var(--yellow); color: var(--black); padding: var(--space-6) var(--space-3) var(--space-7) calc(var(--rail) + var(--space-3)); }
.rf-band { border-top: 1px solid var(--black); border-bottom: 1px solid var(--black); padding: 16px 0 24px; }
.rf-label { font: 700 12px/1.2 var(--font-heading); letter-spacing: .12em; text-transform: uppercase; margin: 0 0 16px; }
.rf-logos { display: flex; gap: 32px; align-items: center; }
.rf-logo { width: 140px; height: 100px; display: flex; align-items: center; justify-content: center; }
.rf-logo img { max-width: 100%; max-height: 100%; object-fit: contain; filter: invert(1); }
.rf-quotes { display: grid; grid-template-columns: 1fr; gap: 40px; margin-top: 40px; }
.rf-quote { margin: 0; position: relative; }
.rf-mark { display: block; font: 700 28px/1 var(--font-heading); height: 24px; }
.rf-quote blockquote { margin: 24px 0 0; font: 400 18px/1.6 var(--font-body); }
.rf-quote blockquote p { margin: 0 0 1.6em; }
.rf-quote blockquote p:last-child { margin-bottom: 0; }
.rf-quote figcaption { margin-top: 24px; font-size: 14px; line-height: 1.6; position: relative; }
.rf-name { font-weight: 700; color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.rf-name:hover, .rf-name:focus-visible { text-decoration-thickness: 2px; }
/* LinkedIn card: under the source line, never over the quote */
.rf-card { position: absolute; left: 0; top: calc(100% + 10px); display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  border: 1px solid var(--black); border-radius: 10px; background: var(--yellow); color: var(--black); text-decoration: none;
  font-size: 13px; line-height: 1.35; white-space: nowrap; opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity .25s ease, transform .3s var(--ease-soft, ease); z-index: 3; }
.rf-card svg { width: 22px; height: 22px; flex: none; }
.rf-quote.show-card .rf-card { opacity: 1; transform: none; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .rf-card { transition: none; } }
@media (min-width: 761px) {
  .rf.is-figma { position: relative; display: block !important; height: 100svh; min-height: 0 !important; padding: 0 !important; overflow: visible; }
  .rf.is-figma .rf-band { position: absolute; left: calc(120 * var(--u)); right: calc(120 * var(--u)); top: calc(160 * var(--u)); height: calc(140 * var(--u));
    padding: 0; box-sizing: border-box; width: auto; }
  .rf.is-figma .rf-label { position: absolute; left: 0; top: calc(22 * var(--u)); margin: 0; font-size: calc(12 * var(--u)); }
  .rf.is-figma .rf-logos { position: absolute; inset: 0; display: block; }
  .rf.is-figma .rf-logo { position: absolute; top: calc(16 * var(--u)); width: calc(140 * var(--u)); height: calc(100 * var(--u)); }
  .rf.is-figma .rf-logo:nth-child(1) { left: calc(420 * var(--u)); }
  .rf.is-figma .rf-logo:nth-child(2) { left: calc(843 * var(--u)); }
  .rf.is-figma .rf-quotes { position: absolute; left: calc(120 * var(--u)); top: calc(380 * var(--u)); margin: 0; width: auto;
    display: grid; grid-template-columns: repeat(3, calc(360 * var(--u))); column-gap: calc(61.5 * var(--u)); align-items: start; }
  .rf.is-figma .rf-mark { font-size: calc(28 * var(--u)); height: calc(24 * var(--u)); }
  .rf.is-figma .rf-quote blockquote { margin-top: calc(24 * var(--u)); font-size: calc(18 * var(--u)); }
  .rf.is-figma .rf-quote figcaption { margin-top: calc(24 * var(--u)); font-size: calc(14 * var(--u)); }
}
/* Balance on wide screens (Nora, 9 Nov): the quotes and logos use the full width between the
   margins, in three equal columns; the logos line up with the 2nd and 3rd quote column (as in Figma). */
@media (min-width: 761px) {
  .rf.is-figma .rf-quotes { right: calc(120 * var(--u)); grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rf.is-figma .rf-logo:nth-child(1) { left: calc((100% - 123 * var(--u)) / 3 + 61.5 * var(--u)); }
  .rf.is-figma .rf-logo:nth-child(2) { left: calc((100% - 123 * var(--u)) / 3 * 2 + 123 * var(--u)); }
}