/* ==========================================================================
   cases.html — page-specific rules (tokens only, no new colours)
   ========================================================================== */

/* One .grid per case. The aside (label, outlined number, meta list) sits in
   column 1 and spans the first two rows — client name + lead, then the three
   stat cards — so a tall column 1 never pushes the stats down. */
.case { position: relative; }
.case__grid { row-gap: 60px; }
.case__aside { grid-column: 1; grid-row: 1 / 3; display: flex; flex-direction: column; align-items: flex-start; }
.case__num { margin-top: 40px; margin-left: -3px; }
.case__meta { width: 100%; margin-top: 44px; }
.case__meta > dt, .case__meta > dd { padding: 12px 0; font-size: 14px; }
.case__head { grid-column: 2 / -1; }
.case__lead { margin-top: 40px; }
.case__quote .quote__text { margin: 0; max-width: 670px; }   /* blockquote: drop the UA 40px margin */
.case__tags { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.case__tags .h4 { color: var(--ink-75); }

/* Dark variant: quote author + caption on black */
.case--dark .case__tags .h4 { color: var(--white-50); }
.case--dark .quote__author { color: var(--white-60); }
.case--dark .quote__author b { color: var(--white); }

/* Tag links (hero index + "services used") — invert on hover */
a.tag { transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
a.tag:hover { background: var(--black); color: var(--white); }
.page-hero a.tag:hover, .case--dark a.tag:hover { background: var(--white); color: var(--black); }

/* Hero: jump links to each case */
.case-index { grid-column: 2 / -1; }

/* "Also trusted by" wall spans the full canvas */
.trusted-wall { margin-top: 60px; }

@media (max-width: 1023px) {
  .case__grid { row-gap: 40px; }
  .case__aside { grid-column: 1 / -1; grid-row: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
  .case__aside .label { grid-column: 1 / -1; }
  .case__num { grid-column: 1; margin-top: 24px; }
  .case__meta { grid-column: 2; margin-top: 24px; }
  .case__head { grid-column: 1 / -1; }
  .case__quote { grid-column: 1 / -1; }
  .case__tags { grid-column: 1 / -1; }
  .case-index { grid-column: 1 / -1; }
  .trusted-wall { margin-top: 48px; }
}

@media (max-width: 639px) {
  .case__grid { row-gap: 32px; }
  .case__aside { display: flex; flex-direction: column; }
  .case__num { margin-top: 20px; margin-left: -2px; }
  .case__meta { margin-top: 20px; }
  .case__meta > dt { padding-bottom: 2px; }
  .case__meta > dd { padding-bottom: 12px; }
  .case__lead { margin-top: 24px; }
  .trusted-wall { margin-top: 40px; }
}