.project-grid { align-items: stretch; }
.project-card { display: flex; flex-direction: column; min-width: 0; padding: 21px; background: #fff; transition: transform .2s ease, box-shadow .2s ease; }
.project-card:hover { transform: translateY(-5px); box-shadow: 0 22px 45px #101c381a; }
.project-card:focus-visible { outline: 3px solid #175cff; outline-offset: 4px; }
.project-preview { overflow: hidden; aspect-ratio: 16 / 10; background: #101c38; }
.project-preview img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .35s ease; }
.project-card:hover .project-preview { transform: none; }
.project-card:hover .project-preview img { transform: scale(1.035); }
.project-details { display: flex; justify-content: space-between; gap: 15px; padding: 22px 3px 15px; flex: 1; }
.project-category { color: #175cff; font-size: 10px; font-weight: 700; letter-spacing: 1.3px; }
.project-details h3 { margin: 7px 0 7px; color: #101c38; font: 600 clamp(23px, 2.4vw, 32px)/1.2 var(--heading); letter-spacing: -1px; }
.project-details p { max-width: 380px; margin: 0; color: #63708a; font-size: 14px; line-height: 1.6; }
.project-arrow { display: grid; flex: 0 0 38px; place-items: center; align-self: start; width: 38px; height: 38px; border: 1px solid #d9e1ef; border-radius: 50%; color: #175cff; font-size: 22px; transition: background .2s, color .2s; }
.project-card:hover .project-arrow { background: #175cff; color: white; }
.project-url { padding: 14px 3px 1px; border-top: 1px solid #e2e9f4; color: #63708a; font-size: 12px; overflow-wrap: anywhere; }
@media (max-width: 600px) { .project-card { padding: 13px; } .project-details { padding-top: 19px; } .project-details h3 { font-size: 25px; } }
@media (prefers-reduced-motion: reduce) { .project-card, .project-preview img, .project-arrow { transition: none; } }