/* ONEKEY BIZ — case-study grid, category filter, and prev/next nav */

/* category filter chips */
.case-filter{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:0 auto 36px;max-width:920px}
.fchip{font-family:'Space Grotesk','Noto Sans SC',sans-serif;font-size:13.5px;font-weight:600;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 18px;cursor:pointer;transition:.18s}
.fchip:hover{border-color:#D9CFBF}
.fchip.on{background:linear-gradient(145deg,var(--orange-2),var(--orange-deep));color:#fff;border-color:transparent;
  box-shadow:0 8px 20px rgba(210,97,26,.28)}

/* case-studies sidebar filter — matches the services catalog look */
.catalog .cat-top{min-height:20px}
.catalog .cat-count b{color:var(--ink);font-weight:700}
@media(max-width:860px){
  .catalog{grid-template-columns:1fr;gap:16px}
  .cat-side{position:static}
  .cat-side .filt{display:inline-flex;width:auto;margin:0 8px 8px 0}
  .cat-side h4{margin-bottom:6px}
}

/* case cards grid */
.case-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.catalog .case-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
@media(max-width:760px){.case-grid{grid-template-columns:1fr}}
.ccard{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:28px 26px;color:inherit;transition:transform .25s,box-shadow .25s,border-color .25s}
.ccard:hover{transform:translateY(-6px);box-shadow:0 26px 60px rgba(20,20,30,.10);border-color:#FFD9BF}
.ccard .cc-logo{height:60px;display:flex;align-items:center;margin-bottom:18px}
.ccard .cc-logo img{max-height:56px;max-width:220px;object-fit:contain}
.ccard .cc-tag{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--orange-deep)}
.ccard h3{font-family:'Space Grotesk','Noto Sans SC',sans-serif;font-size:20px;font-weight:600;line-height:1.32;margin:9px 0 10px;letter-spacing:-.01em}
.ccard p{font-size:14px;color:var(--ink-2);line-height:1.6;flex:1}
.ccard .cc-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:15px}
.ccard .cc-chip{font-size:11px;font-weight:600;color:var(--orange-deep);background:#FFF2E8;border:1px solid #FFE0C9;border-radius:999px;padding:4px 11px;white-space:nowrap}
.ccard .cc-more{margin-top:15px;font-size:13.5px;font-weight:600;color:var(--orange-deep)}

/* prev / next / all nav inside an article */
.case-nav{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:stretch}
.case-nav.two{grid-template-columns:auto 1fr}
.cnav-btn{display:flex;flex-direction:column;justify-content:center;gap:4px;background:var(--card);border:1px solid var(--line);
  border-radius:16px;padding:16px 20px;color:inherit;transition:.22s;min-width:0}
.cnav-btn:hover{border-color:#FFD9BF;box-shadow:0 16px 38px rgba(20,20,30,.08)}
.cnav-btn.next{text-align:right;align-items:flex-end}
.cnav-btn .cnav-k{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--orange-deep)}
.cnav-btn .cnav-t{font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.35;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cnav-all{display:flex;align-items:center;font-size:13px;font-weight:600;color:var(--ink-2);white-space:nowrap;padding:0 6px}
.cnav-all:hover{color:var(--orange-deep)}
@media(max-width:680px){
  .case-nav{grid-template-columns:1fr 1fr}
  .cnav-all{grid-column:1 / -1;order:3;justify-content:center}
}

/* homepage: centred view-all link under the case cards */
.cases-viewall{text-align:center;margin-top:30px}
.cases-viewall a{font-size:14.5px;font-weight:600;color:var(--orange-deep)}

/* ============================================================
   Shared case-study components: process timeline, grade ladder, FAQ
   (used across all case pages — added v=4)
   ============================================================ */

/* --- process timeline --- */
.tline{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;position:relative}
.tline.steps3{grid-template-columns:repeat(3,1fr)}
.tline.steps5{grid-template-columns:repeat(5,1fr)}
.tstep{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:24px 22px;position:relative}
.tstep .day{display:inline-flex;align-items:center;gap:7px;font-family:'Space Grotesk','Noto Sans SC',sans-serif;font-weight:700;
  font-size:12.5px;letter-spacing:.03em;color:#fff;padding:6px 12px;border-radius:999px;margin-bottom:14px;
  background:linear-gradient(145deg,#2b6fb0,#173b6f)}
.tstep.hot .day{background:linear-gradient(145deg,var(--orange-2),var(--orange-deep))}
.tstep h3{font-size:16px;font-weight:600;margin-bottom:8px}
.tstep p{font-size:13.5px;color:var(--ink-2);line-height:1.6}
.tstep .arrow{position:absolute;right:-13px;top:44px;font-size:20px;color:#c9d4e2;z-index:2}
@media(max-width:860px){
  .tline,.tline.steps3,.tline.steps5{grid-template-columns:1fr}
  .tstep .arrow{right:auto;left:38px;top:auto;bottom:-15px;transform:rotate(90deg)}
}

/* --- CIDB grade ladder (G1 → G7) --- */
.ladder{display:flex;align-items:flex-end;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:8px}
.rung{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  background:var(--card);border:1px solid var(--line);border-radius:12px;color:var(--ink-2);
  font-family:'Space Grotesk',sans-serif;font-weight:700;width:74px;padding:12px 0}
.rung.g1{height:66px}.rung.g2{height:78px}.rung.g3{height:90px}.rung.g4{height:104px}
.rung.g5{height:118px}.rung.g6{height:132px}.rung.g7{height:146px}
.rung.top{border:none;color:#fff;background:linear-gradient(160deg,var(--orange-2),var(--orange-deep));
  box-shadow:0 18px 40px rgba(210,97,26,.30);position:relative;width:104px}
.rung.top.g1{height:96px}.rung.top.g2{height:104px}.rung.top.g3{height:114px}.rung.top.g4{height:126px}
.rung.top.g5{height:138px}.rung.top.g6{height:150px}.rung.top.g7{height:158px}
.rung.top .peak{position:absolute;top:-16px;left:50%;transform:translateX(-50%);font-size:20px}
.rung .gv{font-size:19px}.rung.top .gv{font-size:26px}
/* .on highlights the achieved grade at ANY rung — keeps its natural ascending height so grades above read as headroom */
.rung.on{border:none;color:#fff;width:92px;background:linear-gradient(160deg,var(--orange-2),var(--orange-deep));
  box-shadow:0 16px 36px rgba(210,97,26,.30);position:relative}
.rung.on .peak{position:absolute;top:-16px;left:50%;transform:translateX(-50%);font-size:20px}
.rung.on .gv{font-size:24px}
.rung .cap{font-family:'Inter','Noto Sans SC',sans-serif;font-weight:600;font-size:9.5px;letter-spacing:.04em;
  margin-top:5px;opacity:.85;text-transform:uppercase}
.ladder-note{text-align:center;max-width:660px;margin:22px auto 0;font-size:14px;color:var(--ink-2);line-height:1.7}
@media(max-width:560px){.rung{width:40px}.rung.top{width:60px}.rung .cap{display:none}}

/* --- FAQ accordion (paired with FAQPage JSON-LD for SEO + AI answer engines) --- */
.faqwrap{max-width:840px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.faq-item{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:.2s}
.faq-item[open]{border-color:#FFD9BF;box-shadow:0 14px 34px rgba(20,20,30,.06)}
.faq-item summary{list-style:none;cursor:pointer;padding:20px 24px;
  font-family:'Space Grotesk','Noto Sans SC',sans-serif;font-size:16px;font-weight:600;color:var(--ink);
  display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-size:24px;font-weight:400;line-height:1;color:var(--orange-deep);transition:.2s;flex-shrink:0}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item .faq-a{padding:0 24px 22px;font-size:14.5px;line-height:1.72;color:var(--ink-2)}
.faq-item .faq-a b{color:var(--ink)}