/* Work grid — editorial (Ogilvy-style) layout. Image is the card. */
#wkGrid.og{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:20px;grid-auto-flow:row dense;margin-top:36px}
#wkGrid.og .wk-card{grid-column:span 4;position:relative;display:block;height:360px;padding:0!important;margin:0;border:0!important;border-radius:6px!important;overflow:hidden;background:#0B0B12!important;box-shadow:none!important;transform:none!important;animation:wkIn .5s ease both;isolation:isolate;text-decoration:none;color:#fff}
#wkGrid.og .wk-card::before,#wkGrid.og .wk-card::after{display:none!important}
#wkGrid.og .og-W{grid-column:span 8;height:540px}
#wkGrid.og .og-T{height:540px}
#wkGrid.og .wk-card.hide{display:none!important}

/* media fills the tile */
#wkGrid.og .wk-media{position:absolute!important;inset:0!important;display:block;aspect-ratio:auto!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;animation:none!important;transform:none!important;overflow:hidden}
#wkGrid.og .wk-media::before,#wkGrid.og .wk-media::after{display:none!important}
#wkGrid.og .wk-media>img,#wkGrid.og .wk-media>video{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important;border-radius:0!important;box-shadow:none!important;filter:none!important;padding:0!important;transform:scale(1.001);transition:transform 1.4s cubic-bezier(.2,.7,.2,1)!important}
#wkGrid.og .wk-card:hover .wk-media>img,#wkGrid.og .wk-card:hover .wk-media>video,#wkGrid.og .wk-card:focus-visible .wk-media>img{transform:scale(1.06)}

/* readable caption over imagery */
#wkGrid.og .wk-card:not(:has(.og-type))::after{content:"";display:block!important;position:absolute;inset:auto 0 0 0;height:55%;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(8,7,20,0) 0%,rgba(8,7,20,.72) 100%);transition:opacity .5s ease}
#wkGrid.og .og-cap{position:absolute;left:0;right:0;bottom:0;z-index:4;padding:26px 28px;display:flex;flex-direction:column;gap:6px;color:#fff}
#wkGrid.og .og-cap small{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.82}
#wkGrid.og .og-cap b{font-size:clamp(22px,2vw,30px);font-weight:700;letter-spacing:-.02em;line-height:1.1}
#wkGrid.og .og-W .og-cap b,#wkGrid.og .og-T .og-cap b{font-size:clamp(26px,2.6vw,38px)}
#wkGrid.og .og-rule{display:block;height:3px;width:0;border-radius:3px;background:#B8E62E;box-shadow:0 0 12px rgba(184,230,46,.7);transition:width .6s cubic-bezier(.2,.7,.2,1);margin-top:6px}
#wkGrid.og .wk-card:hover .og-rule,#wkGrid.og .wk-card:focus-visible .og-rule{width:72px}

/* brand-color type tiles */
#wkGrid.og .og-type{background:var(--bg)!important;display:flex!important;align-items:center;justify-content:center;padding:40px 36px 90px}
#wkGrid.og .og-line{color:var(--fg);font-size:clamp(28px,2.8vw,46px);font-weight:800;letter-spacing:-.035em;line-height:1.02;text-align:center;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
#wkGrid.og .wk-card:hover .og-line{transform:scale(1.04)}
#wkGrid.og .wk-card:has(.og-type) .og-cap{color:var(--fg)}

/* play badge */
#wkGrid.og .og-play{position:absolute;z-index:3;top:22px;right:22px;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.18);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.4);transition:transform .4s ease,background .4s ease}
#wkGrid.og .og-play svg{width:20px;height:20px;fill:#fff;margin-left:3px}
#wkGrid.og .wk-card:hover .og-play{transform:scale(1.1);background:#B8E62E}
#wkGrid.og .wk-card:hover .og-play svg{fill:#12102E}

/* sparkles stay inside the tile, above the image */
#wkGrid.og .wk-media .spk{z-index:5}

#wkGrid.og .wk-card:focus-visible{outline:3px solid #B8E62E;outline-offset:3px}

@media (max-width:980px){
  #wkGrid.og{gap:14px}
  #wkGrid.og .wk-card{grid-column:span 6;height:320px}
  #wkGrid.og .og-W{grid-column:span 12;height:420px}
  #wkGrid.og .og-T{height:440px}
}
@media (max-width:600px){
  #wkGrid.og{grid-template-columns:1fr;gap:12px}
  #wkGrid.og .wk-card,#wkGrid.og .og-W,#wkGrid.og .og-T{grid-column:auto;height:auto}
  #wkGrid.og .wk-card{aspect-ratio:4/3}
  #wkGrid.og .og-T{aspect-ratio:4/5}
  #wkGrid.og .og-W{aspect-ratio:16/11}
  #wkGrid.og .og-cap{padding:20px}
}
@media (prefers-reduced-motion:reduce){#wkGrid.og .wk-media>img,#wkGrid.og .og-line{transition:none!important}}
