.hub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .hub-card {
    position: relative; background: #fff; border: 1px solid var(--line);
    display: flex; flex-direction: column; transition: all var(--trans-fast); overflow: hidden;
  }
  .hub-card:hover { border-color: var(--navy); box-shadow: 0 18px 44px -18px rgba(0,26,61,.2); transform: translateY(-4px); }
  .hub-card .imgwrap { height: 210px; display: flex; align-items: center; justify-content: center; padding: 0; background: var(--bg-soft); overflow: hidden; }
  .hub-card .imgwrap img { max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
  .hub-card .body { padding: 22px 24px 26px; }
  .hub-card h3 { font-size: 19px; font-weight: 500; margin-bottom: 6px; }
  .hub-card p { font-size: 14px; color: var(--body); margin-bottom: 14px; }
  .hub-card .go { color: var(--navy); font-weight: 500; font-size: 14px; }
  .hub-card .go::after { content: " →"; transition: margin .2s; }
  .hub-card:hover .go::after { margin-left: 4px; }
  .hub-card.all { background: var(--navy); border-color: var(--navy); }
  .hub-card.all .imgwrap { background: transparent; }
  .hub-card.all .imgwrap img { mix-blend-mode: normal; object-fit: cover; height: 100%; width: 100%; opacity: .85; }
  .hub-card.all h3, .hub-card.all .go { color: #fff; }
  .hub-card.all p { color: rgba(255,255,255,.75); }
  @media (max-width: 1024px) { .hub-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 680px) { .hub-grid { grid-template-columns: 1fr; } }