/* Works route: light case-study listing with a film hero, featured cases, count band, filterable grid and closing band. */
#grid{--wk-ink:#0d1110;--wk-muted:#4d5856;--wk-teal:#007a6a;--wk-soft:#f3f5f4;--wk-line:#dfe4e2;background:#fff;color:var(--wk-ink)}
#grid .wk-wrap{width:min(1184px,100%);margin-inline:auto}
#grid :where(h1,h2,h3,p,figure,ul){margin:0}
#grid .hb-btn{font-family:inherit}
#grid .wk-block{margin-top:clamp(56px,8vw,104px)}
#grid .wk-kicker{font-size:var(--fs-xs);font-weight:700;letter-spacing:.16em;line-height:1.6;color:var(--wk-teal)}
#grid .wk-title{font-size:var(--fs-h2);font-weight:700;line-height:1.3;letter-spacing:-.01em}
#grid .wk-bar::after{content:"";display:block;width:min(300px,60%);height:3px;margin-top:20px;background:var(--accent)}
#grid .wk-center{text-align:center}
#grid .wk-center.wk-bar::after{margin-inline:auto}
#grid .wk-lede{max-width:760px;margin:16px auto 0;font-size:var(--fs-lg);font-style:normal;line-height:1.85;color:var(--wk-muted)}
#grid .grid-back{color:var(--wk-teal)}

/* Hero */
#grid .wk-hero{position:relative;display:grid;gap:26px;padding:28px 22px;overflow:hidden;isolation:isolate;background:#0b100f;color:#f4f2ef}
#grid .wk-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(0,0,0,.9),rgba(0,0,0,.55)),url("case-jianan.webp") center/cover;filter:grayscale(1) blur(10px);transform:scale(1.08)}
#grid .wk-hero .grid-back{color:var(--accent)}
#grid .wk-hero .wk-kicker{margin-top:6px;color:var(--accent)}
#grid .wk-hero #grid-title{margin-top:10px;font-size:var(--fs-h1);font-weight:700;line-height:1.3;letter-spacing:.02em}
#grid .wk-hero-sub{max-width:30em;margin-top:16px;font-size:var(--fs-lg);font-style:normal;line-height:1.85;color:#d3dad7}
#grid .wk-hero .hb-btn{margin-top:26px}
#grid .wk-film{position:relative;margin:0;aspect-ratio:16/9;border:1px solid rgba(244,242,239,.28);background:#000}
#grid .wk-film video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
#grid .wk-film .hb-reel-controls{z-index:2}
#grid .wk-film.is-portrait{justify-self:center;width:min(100%,calc((100svh - var(--site-header-h,120px) - var(--hb-nav-h,0px) - 24px)*9/16));aspect-ratio:9/16}

/* Featured cases */
#grid .wk-featured ul{display:grid;gap:44px;margin-top:44px;padding:0;list-style:none}
#grid .wk-featured li{display:grid;justify-items:center;gap:12px;text-align:center}
#grid .wk-featured img{display:block;width:100%;height:auto;aspect-ratio:7/5;object-fit:cover;object-position:top}
#grid .wk-featured h3{margin-top:8px;font-size:var(--fs-h2);font-weight:700}
#grid .wk-featured li p{max-width:26em;font-size:var(--fs-base);line-height:1.75;color:var(--wk-muted)}
#grid .wk-featured .hb-btn{margin-top:8px}

/* Count band */
#grid .wk-count{display:grid;justify-items:center;gap:16px;padding:clamp(56px,8vw,96px) 24px;background:#000 repeating-radial-gradient(circle at 80% -20%,rgba(0,217,186,.09) 0 1px,transparent 1px 22px);color:#f4f2ef;text-align:center}
#grid .wk-count .wk-kicker{color:var(--accent)}
#grid .wk-count strong{font-size:var(--fs-h1);font-weight:800;line-height:1.05;color:transparent;-webkit-text-stroke:2px #f4f2ef}
#grid .wk-count h2{font-size:var(--fs-h2);font-weight:700}

/* Filterable grid */
#grid .rows{max-width:1184px;margin-top:40px;gap:44px 28px}
#grid .grid-card{color:var(--wk-ink)}
#grid .grid-card figure{border-radius:0;aspect-ratio:16/10;background:var(--wk-soft)}
#grid .grid-card .grid-number{border-radius:0;background:rgba(11,16,15,.86)}
#grid .grid-card .grid-kicker{display:block;margin-top:16px;font-size:var(--fs-xs);font-weight:700;letter-spacing:.14em;color:var(--wk-teal)}
#grid .grid-card .grid-caption{padding-top:6px;font-size:var(--fs-xl);font-weight:700}
#grid .grid-card .grid-caption span:last-child{color:var(--wk-teal)}
#grid .grid-card small{margin-top:4px;font-size:var(--fs-sm);color:var(--wk-muted)}

/* Closing band */
#grid .wk-cta{display:grid;justify-items:center;gap:14px;padding:clamp(56px,8vw,96px) 24px;background:linear-gradient(120deg,#00e2c1,#00a88f);color:#001b16;text-align:center}
#grid .wk-cta p{font-size:var(--fs-sm);font-weight:700;letter-spacing:.16em;color:#00352d}
#grid .wk-cta h2{font-size:var(--fs-h2);font-weight:700;line-height:1.3}
#grid .wk-cta .hb-btn{margin-top:10px}

@media(hover:hover) and (pointer:fine){
  #grid .grid-card:hover .grid-caption>span:first-child{color:var(--wk-teal)}
  #grid .wk-featured .hb-btn:hover{color:var(--wk-teal)}
  #grid .wk-cta .hb-btn:hover{background:transparent;border-color:#001b16;color:#001b16}
}
@media(min-width:700px){
  html:not([data-view="mobile"]) #grid .wk-featured ul{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
  html:not([data-view="mobile"]) #grid .rows{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(min-width:960px){
  html:not([data-view="mobile"]) #grid .wk-hero{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:48px;min-height:460px;padding:56px 48px}
  html:not([data-view="mobile"]) #grid .rows{grid-template-columns:repeat(3,minmax(0,1fr))}
}