#workGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.work-project { position: relative; display: flex; flex-direction: column; padding: 2px; border-radius: 8px; background: linear-gradient(120deg, #249b90, #65baff, #cedae4, #249b90); background-size: 300% 300%; color: #142b37; text-decoration: none; isolation: isolate; transition: transform .25s ease, box-shadow .25s ease; animation: work-border 9s ease infinite; min-width: 0; }
@property --work-glow-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.work-project::before, .work-project::after { content: ''; position: absolute; inset: -2px; border-radius: 10px; pointer-events: none; z-index: -1; background: conic-gradient(from var(--work-glow-angle), #249b90, #65baff, #c8fff0, #249b90, #65baff, #249b90); animation: work-glow-orbit 6s linear infinite; }
.work-project::after { inset: -4px; filter: blur(13px); opacity: .5; transition: opacity .25s ease, filter .25s ease; }
.work-project:hover, .work-project:focus-visible { transform: translateY(-6px); box-shadow: 0 18px 38px rgba(25, 111, 113, .2); }
.work-project:hover::after, .work-project:focus-visible::after { opacity: .85; filter: blur(18px); }
.work-project:focus-visible { outline: 2px solid #106f68; outline-offset: 7px; }
@keyframes work-glow-orbit { to { --work-glow-angle: 360deg; } }
.work-brand { height: 230px; background: #f0f5f6; border-radius: 6px 6px 0 0; display: grid; place-items: center; padding: 32px; overflow: hidden; }
.work-brand img { display: block; max-width: 100%; width: auto; max-height: 166px; object-fit: contain; transition: transform .3s ease; }
.work-project:hover .work-brand img { transform: scale(1.06); }
.work-copy { background: #fff; padding: 28px; flex: 1; display: flex; flex-direction: column; border-radius: 0 0 6px 6px; }
.work-category { color: #14766d; font-size: 12px; font-weight: 700; text-transform: uppercase; }
.work-copy h3 { color: #142b37; font-size: 30px; line-height: 1.2; letter-spacing: 0; margin: 12px 0; overflow-wrap: anywhere; }
.work-copy p { color: #435563; font-size: 16px; line-height: 1.7; margin: 0 0 26px; overflow-wrap: anywhere; }
.work-visit { color: #106f68; font-weight: 700; padding-top: 18px; border-top: 1px solid #dbe5e8; margin-top: auto; }
.work-initials { font-size: 52px; color: #14766d; font-weight: 700; }
@keyframes work-border { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@media(max-width: 750px) { #workGrid { grid-template-columns: 1fr; } .work-brand { height: 200px; } .work-copy { padding: 22px; } }
@media(prefers-reduced-motion: reduce) { .work-project, .work-project::before, .work-project::after { animation: none; } .work-project, .work-project::after, .work-brand img { transition: none; } .work-project:hover { transform: none; } }