.work-intro{padding:62px var(--gutter) 66px}
.work-kicker{font-size:11px;line-height:1.5;color:var(--gray);margin:0 0 20px}
.work-intro h1{font-family:Jakarta,Arial,sans-serif;font-size:clamp(64px,7vw,108px);font-weight:500;letter-spacing:-.06em;line-height:1;margin:0}
.work-intro-copy{font-size:17px;line-height:1.7;color:var(--gray);max-width:550px;margin:25px 0 0}
.work-page .direction-nav [aria-current="page"]{border-bottom:1px solid currentColor}
.work-index{background:#15161a;color:#f4f1eb;padding:56px var(--gutter) 62px}
.work-index-heading{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin-bottom:28px}
.work-index-heading h2{font-family:Jakarta,Arial,sans-serif;font-size:30px;line-height:1.15;letter-spacing:-.04em;font-weight:500;margin:0}
.work-index-heading>p{font-size:11px;line-height:1.5;color:#b9bbc4;margin:0;flex-shrink:0}
.work-index-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:start}
.work-index-card{position:relative;display:grid;width:100%;min-width:0;min-height:430px;aspect-ratio:.93;background:#23252b;border-radius:12px;isolation:isolate}
.work-index-lakers{grid-column:span 5;aspect-ratio:1.02}
.work-index-rob-thomas{grid-column:span 3;aspect-ratio:.71}
.work-index-giants{grid-column:span 4;aspect-ratio:.89}
.work-index-card:after{content:"";position:absolute;inset:0;z-index:1;background:rgba(4,5,9,.62);border-radius:12px;opacity:0;pointer-events:none;transition:opacity .25s}
.work-index-media{grid-area:1/1;position:relative;width:100%;height:100%;overflow:hidden;border-radius:12px;background:#23252b}
.work-index-media img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
.lakers-index-crop img{position:absolute;left:0;top:-32.3%;width:auto;height:132.3%;max-width:none;object-fit:initial}
.rob-thomas-index-crop img{position:absolute;left:0;transform:translateX(-32.5521%);top:-66.67%;width:auto;height:238.14%;max-width:none;object-fit:initial}
.work-index-copy{grid-area:1/1;position:relative;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;padding:28px;min-width:0;border-radius:12px;background:linear-gradient(180deg,transparent 16%,rgba(8,10,15,.18) 35%,rgba(8,10,15,.91) 100%)}
.work-index-logo{position:absolute;left:50%;top:31%;transform:translate(-50%,-50%);z-index:3;opacity:0;pointer-events:none;transition:opacity .25s}
.work-index-logo img{display:block;width:100%;height:auto;max-height:115px;object-fit:contain}
.lakers-index-logo{width:145px;max-width:42%}
.rob-thomas-index-logo{width:220px;max-width:74%}
.giants-index-logo{width:88px;max-width:30%}
.work-index-copy h3{font-family:Jakarta,Arial,sans-serif;font-size:30px;font-weight:550;line-height:1.1;letter-spacing:-.04em;max-width:260px;margin:0 0 13px}
.work-index-roles{display:flex;flex-wrap:wrap;gap:3px 10px;list-style:none;color:#e1e2e8;font-size:11px;line-height:1.6;margin:0 0 22px;padding:0}
.work-index-action{display:flex;align-items:center;justify-content:space-between;gap:18px;font-size:12px;line-height:1.4;min-height:38px;border-bottom:1px solid #ffffff70;padding-bottom:8px}
.work-index-action>span{display:grid;place-items:center;width:28px;height:28px;border:1px solid #ffffff85;border-radius:50%;font-size:17px;line-height:1;transition:background .2s,color .2s}
.work-index-card:is(:hover,:focus-visible):after,.work-index-card:is(:hover,:focus-visible) .work-index-logo{opacity:1}
.work-index-card:is(:hover,:focus-visible) .work-index-action>span{background:#f4f1eb;color:#15161a;border-color:#f4f1eb}
.work-index-card:focus-visible{outline:3px solid #65a3fb;outline-offset:6px}
.work-index-contact{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-top:37px;margin-top:42px;border-top:1px solid #4b4e59}
.work-index-contact p{font-family:Jakarta,Arial,sans-serif;font-size:25px;font-weight:450;line-height:1.2;letter-spacing:-.03em;margin:0}
.work-index-contact a{display:inline-flex;align-items:center;justify-content:space-between;gap:32px;min-height:44px;font-size:13px;border-bottom:1px solid #b9bbc4}
.work-index-contact a:focus-visible{outline:3px solid #65a3fb;outline-offset:6px}
@media(max-width:1100px) and (min-width:761px){.work-index-grid{gap:20px}.work-index-copy{padding:24px}.work-index-copy h3{font-size:27px}.work-index-roles{font-size:10px}.work-index-card{min-height:420px}}
@media(max-width:760px){.work-intro{padding:39px var(--gutter) 44px}.work-kicker{font-size:10px;margin-bottom:17px}.work-intro h1{font-size:64px}.work-intro-copy{font-size:15px;line-height:1.7;margin-top:21px}.work-index{padding:38px var(--gutter) 44px}.work-index-heading{align-items:flex-start;gap:15px;margin-bottom:25px}.work-index-heading h2{font-size:25px;max-width:220px}.work-index-heading>p{font-size:10px;padding-top:4px}.work-index-grid{grid-template-columns:1fr;gap:26px}.work-index-card{grid-column:auto;min-height:420px;aspect-ratio:.85}.work-index-copy{padding:26px}.work-index-copy h3{font-size:30px}.work-index-contact{align-items:flex-start;flex-direction:column;gap:20px;padding-top:29px;margin-top:32px}.work-index-contact p{font-size:25px}}
@media(max-width:380px){.work-index-heading h2{font-size:23px}.work-index-copy{padding:23px}.work-index-copy h3{font-size:28px}.work-index-roles{font-size:10px}}
@media(hover:none),(pointer:coarse){.work-index-logo{opacity:1}.work-index-card:after{opacity:.5}}