/* ==========================================================================
   SELECTED WORK — letterhead cards
   Each card opens with the company's own logo standing free on the page,
   no plate behind it, over a hairline. Hover: the logo lifts 2px, the title
   turns green, the arrow link widens its gap. Cards are keyboard operable
   (anchor with role=button) and open the deep-dive dialog.
   ========================================================================== */

.work-section { background: var(--bg-white); padding: var(--space-section) 0; }

.case-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-block) var(--space-4xl); }
@media (min-width: 768px) { .case-grid { grid-template-columns: repeat(2, 1fr); } }

.case-card { display: flex; flex-direction: column; color: inherit; cursor: pointer; text-align: left; border-radius: var(--radius-sm); }
.case-card:focus-visible { outline: 2px solid var(--brand-green-sage); outline-offset: 8px; }
@media (min-width: 768px) { .case-card--wide { grid-column: 1 / -1; } }

/* ---- Logo row ---- */
.case-logo {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg);
  min-height: clamp(96px, 10vw, 136px);
  padding-block: var(--space-sm);
  margin-bottom: var(--space-lg);
  border-bottom: 1px solid var(--rule-strong);
}
/* Two columns: every card is a subgrid over five rows, so logo boxes, titles,
   summaries, tags and links line up across the pair even when one logo row wraps. */
@media (min-width: 768px) {
  .case-grid { row-gap: 0; }
  .case-card { display: grid; grid-template-rows: subgrid; grid-row: span 5; align-content: start; padding-bottom: var(--space-block); }
  .case-card .case-go { justify-self: start; align-self: start; }
  .case-card .tag-row { align-self: start; }
}
.case-logo-mark { display: flex; align-items: center; gap: var(--space-sm); min-width: 0; transition: transform var(--motion-move) var(--ease); }
.case-card:hover .case-logo-mark, .case-card:focus-visible .case-logo-mark { transform: translateY(-2px); }
.case-logo img { display: block; width: auto; max-width: 100%; }
.case-logo-meta { flex: none; font-size: var(--text-2xs); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-muted); text-align: right; line-height: var(--leading-ui); }
.case-logo-meta .live::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: #3FA35B; vertical-align: 1px; }

/* Optical sizing, per mark: equal visual weight rather than equal height */
.logo-kytes { height: 44px; }
.logo-kytes-word { font-family: var(--font-serif); font-size: 2rem; line-height: 1; letter-spacing: -0.01em; color: #0E2235; }
.logo-copytrade { height: 42px; }
.logo-gs { height: 50px; }
.logo-sibc { height: 62px; }
.case-logo-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-xl); }
.logo-cq { height: 18px; }
.logo-vtad { height: 30px; }
.logo-bdfj { height: 18px; }
.logo-itf { height: 30px; }
.logo-img { height: 18px; }
@media (max-width: 767.98px) {
  .logo-kytes { height: 38px; } .logo-kytes-word { font-size: 1.75rem; }
  .logo-copytrade { height: 34px; } .logo-gs { height: 42px; } .logo-sibc { height: 52px; }
  .case-logo-row { gap: var(--space-xs) var(--space-md); }
  .logo-cq, .logo-bdfj { height: 15px; } .logo-vtad, .logo-itf { height: 24px; } .logo-img { height: 15px; }
}

/* ---- Text ---- */
.case-card h3 { margin-bottom: var(--space-sm); transition: color var(--motion-state) var(--ease); }
.case-card:hover h3, .case-card:focus-visible h3 { color: var(--brand-green-accent); }
.case-summary { max-width: 36rem; margin-bottom: var(--space-md); font-size: var(--text-base); color: var(--ink-secondary); }
.case-card--wide .case-summary { max-width: var(--measure); }
.case-card .tag-row { margin-bottom: var(--space-sm); }
.case-go { display: inline-flex; align-items: center; gap: var(--space-xs); margin-top: var(--space-xs); font-size: var(--text-sm); font-weight: 600; color: var(--brand-green-accent); transition: gap var(--motion-move) var(--ease), color var(--motion-state) var(--ease); }
.case-go svg { width: 17px; height: 17px; }
.case-card:hover .case-go, .case-card:focus-visible .case-go { gap: var(--space-sm); color: var(--ink-primary); }

/* ---- Deep-dive dialog content ---- */
.case-dialog-head { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-md); padding-right: var(--space-4xl); }
.case-dialog-year { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-muted); }
.case-dialog h2 { font-size: var(--type-subsection); margin-bottom: var(--space-xs); }
@media (min-width: 768px) { .case-dialog h2 { font-size: var(--text-5xl); } }
.case-dialog-role { margin-bottom: var(--space-xl); font-size: var(--text-sm); font-weight: 600; color: var(--brand-green-sage); }
.case-dialog-overview { padding: var(--space-md) var(--space-lg); margin-bottom: var(--space-xl); border-left: 3px solid var(--brand-green-deep); background: var(--bg-warm); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.case-dialog-overview p { font-size: var(--text-lg); color: var(--ink-secondary); }
.case-dialog h4 { margin-bottom: var(--space-sm); font-size: var(--text-2xs); font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-muted); }
.case-dialog-list { list-style: none; display: grid; gap: var(--space-sm); margin-bottom: var(--space-xl); }
.case-dialog-list li { display: flex; gap: var(--space-sm); font-size: var(--text-base); color: var(--ink-secondary); }
.case-dialog-list li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 8px; border-radius: 50%; background: var(--brand-green-sage); }
.case-dialog .tag-row { margin-bottom: var(--space-2xl); }
.case-dialog-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

/* ---- Phones: the logo stands over its meta line, the dialog head clears the close button ---- */
@media (max-width: 767.98px) {
  .case-logo { flex-direction: column; align-items: flex-start; gap: var(--space-sm); min-height: 0; padding-block: var(--space-xs) var(--space-md); }
  .case-logo-meta { flex: none; text-align: left; }
  .case-dialog-head { flex-wrap: wrap; gap: var(--space-xs) var(--space-sm); padding-right: 52px; }
  .case-dialog-year { flex: 1 0 100%; }
}