/* Cases page */
.cp { background:#fff; color:var(--ink-900); font-family:var(--font-sans); min-height:100vh;}
.cp-nav { max-width:100%; padding:18px 48px;}
.cp-nav a { cursor:pointer;}
.cp-active { color:var(--accent-600) !important; font-weight:500;}

.cp-hero { padding:88px 48px 56px; border-bottom:1px solid var(--ink-200); background:var(--bg); position:relative; overflow:hidden;}
.cp-hero::before {
  content:''; position:absolute; inset:0;
  background-image:
    linear-gradient(to right, oklch(0.92 0.01 270 / 0.4) 1px, transparent 1px),
    linear-gradient(to bottom, oklch(0.92 0.01 270 / 0.4) 1px, transparent 1px),
    radial-gradient(circle at 90% 20%, oklch(0.88 0.09 276 / 0.35) 0%, transparent 55%);
  background-size:44px 44px, 44px 44px, 100% 100%;
  pointer-events:none;
  mask-image:radial-gradient(ellipse at center, #000 40%, transparent 90%);
}
.cp-hero-inner { max-width:1200px; margin:0 auto; position:relative;}
.cp-crumb { font-size:12px; color:var(--ink-500); letter-spacing:0.04em; margin-bottom:24px; display:flex; gap:8px; align-items:center;}
.cp-crumb a { color:var(--ink-500);}
.cp-crumb a:hover { color:var(--accent-600);}
.cp-crumb-sep { color:var(--ink-300);}
.cp-h1 { font-size:88px; font-weight:700; letter-spacing:-0.04em; line-height:1; margin:0 0 24px;}
.cp-lede { font-size:19px; line-height:1.55; color:var(--ink-600); max-width:62ch; margin:0 0 40px;}
.cp-meta { display:flex; gap:40px; flex-wrap:wrap; padding-top:28px; border-top:1px solid var(--ink-200); font-size:12px; color:var(--ink-500); letter-spacing:0.08em;}
.cp-meta strong { color:var(--ink-900); font-size:28px; font-weight:700; letter-spacing:-0.025em; margin-right:8px; font-family:var(--font-sans);}
.cp-meta span { display:inline-flex; align-items:baseline; gap:0;}

.cp-filters { padding:24px 48px; border-bottom:1px solid var(--ink-200); position:sticky; top:62px; background:rgba(255,255,255,0.92); backdrop-filter:blur(10px); z-index:5;}
.cp-filters-inner { max-width:1200px; margin:0 auto; display:flex; align-items:center; gap:24px; flex-wrap:wrap;}
.cp-filter-label { font-size:10.5px; color:var(--ink-400); letter-spacing:0.1em;}
.cp-filter-row { display:flex; gap:6px; flex-wrap:wrap;}
.cp-pill { font-family:inherit; font-size:13px; font-weight:500; padding:7px 14px; border-radius:999px; border:1px solid var(--ink-200); background:#fff; color:var(--ink-700); cursor:pointer; transition:all .12s;}
.cp-pill:hover { background:var(--ink-50);}
.cp-pill-on { background:var(--ink-900); color:#fff; border-color:var(--ink-900);}
.cp-count { font-size:11px; color:var(--ink-500); letter-spacing:0.08em; margin-left:auto;}

.cp-list-wrap { padding:64px 48px; max-width:1200px; margin:0 auto;}
.cp-list { display:flex; flex-direction:column; gap:56px;}
.cp-case { display:grid; grid-template-columns:420px 1fr; gap:48px; padding-bottom:56px; border-bottom:1px solid var(--ink-200);}
.cp-case:last-child { border-bottom:0; padding-bottom:0;}

.case-thumb-svg { aspect-ratio:3/2; border-radius:14px; overflow:hidden; border:1px solid var(--ink-200); position:relative;}
.case-thumb-overlay { position:absolute; left:18px; bottom:14px; font-size:11px; color:#fff; background:rgba(0,0,0,0.35); padding:4px 10px; border-radius:999px; backdrop-filter:blur(6px);}

.cp-case-r { display:flex; flex-direction:column; gap:14px; padding-top:4px;}
.cp-case-head { display:flex; justify-content:space-between; align-items:center;}
.cp-case-num { font-size:11px; color:var(--ink-500); letter-spacing:0.1em;}
.cp-case-year { font-size:11px; color:var(--ink-400); letter-spacing:0.08em;}
.cp-case-area { font-size:11px; color:var(--accent-700); letter-spacing:0.08em; text-transform:uppercase; margin-top:4px;}
.cp-case-title { font-size:36px; font-weight:600; letter-spacing:-0.025em; line-height:1.08; margin:0;}
.cp-case-brief { font-size:16px; line-height:1.6; color:var(--ink-600); margin:0; max-width:62ch;}
.cp-case-outcome { display:grid; grid-template-columns:96px 1fr; gap:20px; padding:16px 0; border-top:1px solid var(--ink-200); border-bottom:1px solid var(--ink-200); margin-top:6px;}
.cp-case-outcome-label { font-size:10.5px; color:var(--ink-500); letter-spacing:0.1em; padding-top:3px;}
.cp-case-outcome > div:last-child { font-size:15px; color:var(--ink-800); line-height:1.55;}
.cp-case-tags { display:flex; gap:6px; flex-wrap:wrap; margin-top:6px;}
.cp-case-tags span { font-size:11px; color:var(--ink-700); padding:4px 10px; border-radius:999px; background:var(--ink-50); border:1px solid var(--ink-200);}

.cp-bottom { padding:96px 48px; background:var(--bg); border-top:1px solid var(--ink-200); text-align:center;}
.cp-bottom-inner { max-width:720px; margin:0 auto;}
.cp-bottom h2 { font-size:48px; font-weight:700; letter-spacing:-0.035em; margin:0 0 14px;}
.cp-bottom p { font-size:17px; color:var(--ink-600); margin:0 0 32px; line-height:1.55;}

@media (max-width: 900px) {
  .cp-case { grid-template-columns:1fr;}
  .cp-h1 { font-size:56px;}
}

/* Tablets */
@media (max-width: 1024px) {
  .cp-nav { padding:14px 24px;}
  .cp-hero { padding:64px 24px 40px;}
  .cp-filters { padding:18px 24px; top:54px;}
  .cp-list-wrap { padding:48px 24px;}
  .cp-bottom { padding:72px 24px;}
}

/* Mobile phones */
@media (max-width: 680px) {
  .cp-nav { padding:12px 16px;}
  .cp-hero { padding:44px 20px 32px;}
  .cp-crumb { font-size:11px; margin-bottom:16px; flex-wrap:wrap;}
  .cp-h1 { font-size:40px; line-height:1.05; letter-spacing:-0.03em; margin:0 0 16px;}
  .cp-lede { font-size:15.5px; line-height:1.55; margin:0 0 28px;}
  .cp-meta {
    gap:18px 28px;
    padding-top:20px;
    font-size:10.5px;
  }
  .cp-meta strong { font-size:22px;}

  .cp-filters { padding:14px 20px; top:52px;}
  .cp-filters-inner { gap:14px;}
  .cp-filter-label { font-size:10px;}
  .cp-pill { font-size:12px; padding:6px 11px;}
  .cp-count { font-size:10.5px; width:100%; margin-left:0; order:10;}

  .cp-list-wrap { padding:40px 20px;}
  .cp-list { gap:40px;}
  .cp-case {
    grid-template-columns:1fr;
    gap:20px;
    padding-bottom:40px;
  }
  .case-thumb-svg { border-radius:10px;}
  .case-thumb-overlay { font-size:10.5px; left:12px; bottom:10px;}
  .cp-case-title { font-size:26px; line-height:1.15;}
  .cp-case-brief { font-size:15px;}
  .cp-case-outcome {
    grid-template-columns:1fr;
    gap:6px;
    padding:14px 0;
  }
  .cp-case-outcome > div:last-child { font-size:14.5px;}
  .cp-case-tags span { font-size:10.5px;}

  .cp-bottom { padding:56px 20px;}
  .cp-bottom h2 { font-size:32px; letter-spacing:-0.028em;}
  .cp-bottom p { font-size:15px;}
}