.work-main { padding-block: 40px 100px; }
.work-page-heading { padding-block: 0 46px; }
.back-link { display: block; width: fit-content; font-size: 14px; color: var(--muted); margin-bottom: 42px; }
.work-page-heading .section-label { color: var(--accent); margin-bottom: 18px; }
.work-page-heading h1 { font-size: clamp(40px, 5vw, 64px); line-height: 1.1; font-weight: 600; letter-spacing: -.05em; }
.work-page-heading h1 em { color: var(--accent); }
.work-page-heading > p:last-child { margin-top: 20px; font-size: 16px; line-height: 1.7; color: var(--muted); }
.all-work-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.work-item { display: flex; flex-direction: column; background: var(--dark); color: white; border-radius: 24px; padding: 32px; min-width: 0; }
.work-item-top { display: flex; justify-content: space-between; gap: 20px; font-size: 12px; line-height: 1.6; color: var(--accent); }
.work-item-top > span:last-child { font-size: 24px; }
.work-item h2 { font-size: 30px; line-height: 1.2; letter-spacing: -.035em; margin-top: 35px; }
.work-item > p { color: #ccc; font-size: 16px; line-height: 1.7; margin-top: 18px; }
.work-item .project-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 24px; }
.work-item .project-tags span { border: 1px solid #555; border-radius: 24px; padding: 7px 11px; font-size: 12px; color: #ccc; }
.work-item-link { display: flex; justify-content: space-between; margin-top: 30px; padding-top: 20px; border-top: 1px solid #444; font-size: 14px; }
.work-item:hover .work-item-link { color: var(--accent); }
@media(max-width:700px) { .all-work-grid { grid-template-columns: 1fr; gap: 18px; } .work-item { padding: 25px; } .work-main { padding-bottom: 60px; } }
/* One featured case study, followed by nine compact visual cards. */
.work-highlight { display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: 40px; padding: 38px; margin-bottom: 26px; background: var(--dark); color: #fff; border-radius: 26px; }
.work-highlight-copy .section-label { color: var(--accent); }
.work-highlight-copy h2 { margin-top: 26px; font-size: clamp(32px, 3vw, 44px); line-height: 1.15; }
.work-highlight-copy h2 em { color: var(--accent); }
.work-highlight-copy > p:not(.section-label) { margin-top: 20px; font-size: 16px; line-height: 1.7; color: #ccc; }
.work-highlight-copy .button { margin-top: 28px; }
.work-highlight-image { display: block; padding: 9px; background: #fff; border-radius: 16px; overflow: hidden; }
.work-highlight-image img { width: 100%; height: auto; border-radius: 9px; }
.work-item { padding: 24px; }
.work-item-image { margin-top: 20px; border-radius: 12px; overflow: hidden; background: #fff; }
.work-item-image img { width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: contain; }
.work-item-image > span { display: block; padding: 8px 12px; color: #555; font-size: 12px; background: #fff; }
.work-item h2 { margin-top: 24px; font-size: 28px; }
.work-item > p { margin-top: 12px; line-height: 1.6; }
.work-item .project-tags { display: none; }
.work-item-link { margin-top: 22px; }
@media(max-width:900px) { .work-highlight { grid-template-columns: 1fr; gap: 28px; padding: 28px; } .work-highlight-copy > p:not(.section-label) { max-width: 38ch; } }
@media(max-width:700px) { .work-item { padding: 20px; } .work-highlight { padding: 24px; } .work-item h2 { font-size: 25px; } }