.work-page { background: #f5f7f9; }
.innerbar { position: relative; }
.work-hero { padding: 110px clamp(24px,7vw,110px) 70px; background: #4b4d52; color: #fff; }
.work-hero h1 { font-size: clamp(64px,10vw,128px); text-transform: uppercase; letter-spacing: -.04em; }
.work-hero > p:not(.kicker) { max-width: 650px; color: #d8dde1; font-size: 18px; }
.work-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 40px; }
.work-tabs a { padding: 12px 17px; border: 1px solid #788087; font-size: 13px; font-weight: 600; }
.work-tabs a:hover { background: #73afe0; border-color: #73afe0; }
.work-categories { padding: 35px clamp(24px,7vw,110px) 100px; }
.work-categories article { scroll-margin-top: 30px; min-height: 190px; display: grid; grid-template-columns: 70px 1fr auto; gap: 30px; align-items: center; border-bottom: 1px solid var(--line); }
.work-categories article > span { color: #73afe0; font: 700 17px "Barlow Condensed"; }
.work-categories h2 { font-size: clamp(34px,4vw,56px); text-transform: uppercase; }
.work-categories article div p { color: var(--muted); margin: 8px 0 0; }
.soon { padding: 10px 14px; border: 1px solid var(--line); color: #747980; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.work-categories article.has-project { grid-template-columns: 70px .7fr 1.3fr; padding: 35px 0; align-items: start; }
.project-list { display: grid; gap: 14px; width: 100%; }
.project-link { display: grid; grid-template-columns: 190px 1fr; align-items: center; gap: 22px; background: #fff; box-shadow: 0 10px 35px rgba(31,42,51,.09); overflow: hidden; }
.project-link img { width: 100%; height: 135px; object-fit: cover; }
.project-link span { padding-right: 20px; color: #70747a; font-size: 14px; }
.project-link b, .project-link i { display: block; }
.project-link b { color: #4b4d52; font: 700 25px "Barlow Condensed"; text-transform: uppercase; }
.project-link i { margin-top: 15px; color: #559bd2; font-style: normal; font-size: 12px; font-weight: 700; text-transform: uppercase; }
.work-contact { padding: 90px 24px; text-align: center; background: #e8edf1; }
.work-contact h2 { margin-bottom: 30px; font-size: clamp(45px,6vw,76px); text-transform: uppercase; }
.work-contact .button { color: #fff; }
@media (max-width: 720px) { .work-hero { padding-top: 75px; } .work-categories article, .work-categories article.has-project { grid-template-columns: 42px 1fr; padding: 35px 0; } .soon { grid-column: 2; justify-self: start; margin: 0; } .project-list { grid-column: 1 / -1; } .project-link { grid-template-columns: 130px 1fr; } .project-link img { height: 125px; } }