/* ================================================================
   WORK PAGE (work.html)
   All case studies and projects, filterable by service and industry,
   plus video work and links to the industry pages. Reuses .div-hero
   (division.css) and .media-cta (style.css).
   ================================================================ */
.work-page .media-cta__scrim{ background: rgba(0,0,0,.6); }
.wk{ background: #fff; color: #000; }
.wk__inner{ max-width: var(--maxw); margin: 0 auto; padding: 72px var(--gap) 90px; }
.wk .eyebrow{ color: #000; font-weight: 300; font-size: 14px; letter-spacing: 0; line-height: 14px; }
.wk h2{ margin-top: 16px; font-size: clamp(32px, 3.34vw, 48px); font-weight: 500; letter-spacing: -.042em; line-height: 1.04; }
.wk__intro{ margin-top: 12px; max-width: 560px; font-size: 16px; line-height: 24px; color: #444; }

/* Filters */
.wk__filters{ display: flex; flex-direction: column; gap: 14px; padding-bottom: 32px; border-bottom: 1px solid #e5e5e5; }
.wk__row{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.wk__label{ width: 80px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #777; }
.wk-filter{ padding: 8px 14px; border: 1px solid #d9d9d9; background: #fff; color: #000; font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; transition: border-color .2s ease, background .2s ease; }
.wk-filter:hover{ border-color: #000; }
.wk-filter.is-active{ background: #000; color: #fff; border-color: #000; box-shadow: inset 0 -3px 0 var(--c, #fff); }
.wk-filter:focus-visible{ outline: 2px solid #000; outline-offset: 2px; }
.wk__empty{ margin-top: 32px; font-size: 16px; color: #555; }

/* Cards */
.wk__grid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 24px; margin-top: 40px; }
.wk-card{ display: flex; flex-direction: column; }
.wk-card[hidden]{ display: none; }
.wk-card__img{ display: block; aspect-ratio: 349 / 380; overflow: hidden; background: #eee; }
.wk-card__img img{ width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
a.wk-card:hover .wk-card__img img{ transform: scale(1.04); }
.wk-card__chips{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.wk-chip{ padding: 3px 8px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; border-left: 4px solid var(--c); background: #f2f2f2; }
.wk-chip--ind{ border-left: 0; background: transparent; border: 1px solid #d9d9d9; }
.wk-card h3{ margin-top: 10px; font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.wk-card p{ margin-top: 4px; font-size: 14px; line-height: 20px; color: #555; }

/* Video work */
.wk--video{ background: #000; color: #fff; }
.wk--video .eyebrow{ color: #fff; }
.wk--video .wk__intro{ color: rgba(255,255,255,.75); }

/* Video carousel: the track holds the clips twice and slides left by exactly one set, so it
   loops without a jump. Hovering or focusing a tile pauses it. */
.vid-rail{ margin-top: 40px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); }
.vid-rail__track{ display: flex; gap: 16px; width: max-content; animation: vidRail 60s linear infinite; }
.vid-rail:hover .vid-rail__track, .vid-rail:focus-within .vid-rail__track{ animation-play-state: paused; }
@keyframes vidRail{ to{ transform: translateX(calc(-50% - 8px)); } }
.vid-tile{ position: relative; flex: none; width: clamp(180px, 19vw, 260px); aspect-ratio: 9 / 16; padding: 0; border: 0; background: #111; cursor: pointer; overflow: hidden; }
.vid-tile video{ display: block; width: 100%; height: 100%; object-fit: cover; }
.vid-tile:focus-visible{ outline: 2px solid #fff; outline-offset: 3px; }
/* Sound badge: muted by default; "on" when the tile is the one playing with sound */
.vid-tile__sound{ position: absolute; right: 10px; bottom: 10px; width: 34px; height: 34px; border-radius: 50%; background: rgba(0,0,0,.6) center / 18px no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M11 5 6 9H2v6h4l5 4V5z'/%3E%3Cpath d='m23 9-6 6M17 9l6 6'/%3E%3C/svg%3E"); transition: background-color .2s ease; }
.vid-tile.is-sound .vid-tile__sound{ background-color: var(--svc-media); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M11 5 6 9H2v6h4l5 4V5z'/%3E%3Cpath d='M15.5 8.5a5 5 0 0 1 0 7M19 5a10 10 0 0 1 0 14'/%3E%3C/svg%3E"); }
@media (prefers-reduced-motion: reduce){
  .vid-rail{ overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .vid-rail__track{ animation: none; }
}


@media (max-width: 1000px){
  .wk__inner{ padding: 56px var(--gap) 60px; }
  .wk__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .wk__label{ width: 100%; }
  .wk__grid{ grid-template-columns: 1fr 1fr; gap: 28px 14px; }
}
@media (prefers-reduced-motion: reduce){ .wk-card__img img{ transition: none; } }