/* ── Perspectives feature rows ──────────────────────────────────── */
  .persp-feature { padding: 0; }
  .persp-feature .persp-row {
    display: block;
    text-decoration: none;
    color: inherit;
    padding: 0;
    border: 0 !important;
    background: transparent !important;
    transition: opacity 0.2s;
  }
  .persp-feature .persp-row:hover { opacity: 0.92; }
  .persp-feature .persp-row:hover .persp-title { color: var(--accent); }
  .persp-inner {
    max-width: var(--w);
    margin: 0 auto;
    padding: clamp(48px, 6vw, 88px) clamp(24px, 4vw, 64px);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 5vw, 80px);
    align-items: center;
  }
  .persp-image {
    position: relative;
    aspect-ratio: 8 / 5;
    overflow: hidden;
    border-radius: 4px;
  }
  .persp-img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .persp-copy .persp-meta {
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--tone-muted);
    font-weight: 700;
    margin: 0 0 20px;
  }
  .persp-copy .persp-meta .dot { margin: 0 8px; opacity: .5; }
  .persp-copy .persp-title {
    font-family: var(--sans);
    font-optical-sizing: auto;
    font-weight: 620;
    font-size: clamp(24px, 2.6vw, 32px);
    letter-spacing: -.015em;
    line-height: 1.2;
    color: var(--tone-text);
    margin: 0 0 20px;
    /* Specificity here (.persp-copy .persp-title) beats the .cm/.cm-head
       entrance rule, so the color transition has to be layered alongside
       the entrance transition rather than replacing it — otherwise the
       title snaps in instantly instead of fading/blurring in with the
       rest of the row. */
    transition:
      color 0.25s,
      opacity 2s cubic-bezier(.16,1,.3,1),
      transform 2.2s cubic-bezier(.16,1,.3,1),
      filter 2s cubic-bezier(.16,1,.3,1);
    transition-delay:
      0s,
      calc(var(--i, 0) * 195ms),
      calc(var(--i, 0) * 195ms),
      calc(var(--i, 0) * 195ms);
  }
  .persp-copy .persp-summary {
    font-family: var(--sans);
    font-size: clamp(15px, 1.15vw, 17px);
    line-height: 1.62;
    color: var(--tone-text-secondary);
    margin: 0 0 24px;
    max-width: 44ch;
  }
  .persp-copy .persp-cta {
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .persp-copy .persp-cta span { transition: transform 0.25s; }
  .persp-feature .persp-row:hover .persp-cta span { transform: translateX(4px); }

  /* Row tones (per-row background + typography tokens).
     Selector is compound (.persp-row.persp-tone-*) and background is
     !important so it reliably beats the base .persp-feature .persp-row
     { background: transparent !important } rule above ­— previously the
     warm (cream) tone lost that fight, leaving its dark ink text sitting
     directly on the page's black background with no contrast. */
  .persp-row.persp-tone-deep {
    background: #0a0c11 !important;
    --tone-text: #ecedf1; --tone-text-secondary: rgba(236,237,241,0.72); --tone-muted: rgba(236,237,241,0.5);
  }
  .persp-row.persp-tone-warm {
    background: #f4f0e8 !important;
    --tone-text: #14171f; --tone-text-secondary: rgba(20,23,31,0.72); --tone-muted: rgba(20,23,31,0.5);
  }
  .persp-row.persp-tone-blue {
    background: #0d1a2e !important;
    --tone-text: #ecf1fa; --tone-text-secondary: rgba(236,241,250,0.75); --tone-muted: rgba(236,241,250,0.55);
  }

  /* Alternating image side (odd = image left, even = image right) */
  .persp-row.img-right .persp-inner { direction: rtl; }
  .persp-row.img-right .persp-inner > * { direction: ltr; }

  @media (max-width: 820px) {
    .persp-inner { grid-template-columns: 1fr; gap: 28px; padding: 48px 24px; }
    .persp-row.img-right .persp-inner { direction: ltr; }
    .persp-row.img-right .persp-image { order: -1; }
  }