/* ============================================================================
   Brand Elite - Case Studies page (/case-studies, LOCKED 30 Sep 2026, option 1 "Mission Grid").
   Loads after css/about.css + css/ai-dm.css. Prefix csp- (Home owns .cs-*). Markup: case-studies.php + includes/cs-parts.php.
   Grid: 2 cards per row from 1180px, 1 below. Only the heading and the "Read Case Study" button are links (not the whole card). Card: photo left + results right from 700px; photo on top on phones.
   ============================================================================ */

/* service filter: extra room above it (Lohith 30 Sep 2026: looked congested) */
.csp-filter{display:flex;flex-wrap:wrap;gap:10px;margin:clamp(20px,2.4vw,36px) 0 clamp(28px,3vw,40px)}
.csp-filter button{min-height:44px;padding:0 20px;border-radius:999px;border:1px solid rgba(16,25,40,.12);background:#fff;color:var(--navy);font:inherit;font-size:var(--fs-body);font-weight:500;cursor:pointer;transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.csp-filter button:hover{border-color:#f46a10;color:#c2410c}
.csp-filter button[aria-pressed=true]{background:var(--grad);border-color:transparent;color:#fff}
.csp-filter button:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
.csp-sr{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.csp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2vw,28px)}
.csp-grid .is-off{display:none}
@media (max-width:1179.98px){.csp-grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- the case card (DESIGN.md 6j) ---------- */
.csp-card{position:relative;display:grid;grid-template-columns:clamp(160px,34%,340px) minmax(0,1fr);background:#fff;border:1px solid rgba(16,25,40,.06);border-radius:26px;overflow:hidden;box-shadow:0 26px 44px -18px rgba(30,64,130,.28),0 4px 10px rgba(30,64,130,.06);transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.csp-ph{position:relative;display:block;overflow:hidden;background:#dfe8f5;min-height:100%}
.csp-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.csp-rib{position:absolute;left:14px;top:14px;display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:rgba(16,25,40,.74);color:#fff;font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.csp-rib b{color:#f78913}

.csp-b{display:flex;flex-direction:column;gap:14px;padding:clamp(20px,2vw,30px)}
.csp-ind{display:flex;align-items:center;gap:10px;font-size:var(--fs-label);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#c2410c}
.csp-ind .sv-ic{width:20px;height:20px}
.ab .csp-b h3{margin:0;font-size:calc(var(--fs-h3) + 2px);line-height:1.25;color:var(--navy)}   /* +2px: Lohith 30 Sep 2026 */
.csp-b h3 a{color:inherit;text-decoration:none;transition:color .3s var(--ease)}
.csp-b h3 a:focus-visible{outline:2px solid var(--navy);outline-offset:3px;border-radius:4px}   /* only the heading + button are links (Lohith 30 Sep 2026) */
.csp-rl{display:block;width:40px;height:3px;border-radius:2px;background:var(--grad);margin-top:-4px}

/* 2 results with icons */
.csp-mini{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
.csp-mini li{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:8px;padding:12px 14px;border-radius:16px;border:1px solid rgba(16,25,40,.08);background:#fff}
.csp-mini li>span:last-child{display:contents}   /* icon + number on one row, the label below at full width */
.csp-mi{flex:none;display:flex;color:#f46a10}
.csp-mi .sv-ic{width:24px;height:24px;stroke-width:1.9}
.csp-mini b{display:block;font-size:22px;line-height:1.1;color:var(--navy)}
.csp-mini small{display:block;grid-column:1/-1;margin-top:4px;font-size:var(--fs-label);line-height:1.3;color:var(--text-body)}

/* the key result (green, the Case Studies result colour) */
.csp-key{display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:18px;background:linear-gradient(135deg,#effaf3,#f6fbf8);border:1px solid rgba(21,154,77,.16)}
.csp-ki{flex:none;display:flex;color:#159a4d}
.csp-ki .sv-ic{width:34px;height:34px;stroke-width:1.7}
.csp-num{font-size:clamp(36px,3vw,48px);font-weight:700;letter-spacing:-.03em;line-height:1;color:#159a4d;white-space:nowrap}
.csp-kl{display:flex;flex-direction:column;font-weight:600;line-height:1.3;color:var(--navy)}
.csp-kl small{font-size:var(--fs-label);font-weight:500;color:var(--text-body)}

.csp-tags{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.csp-tags li{display:inline-flex;align-items:center;min-height:30px;padding:0 12px;border-radius:999px;background:#eef3fa;color:var(--text-body);font-size:var(--fs-label);font-weight:600}
.csp-cta{margin-top:auto;padding-top:4px}

@media (hover:hover){
  .csp-card:hover{transform:translateY(-6px);box-shadow:0 34px 56px -20px rgba(30,64,130,.36),0 6px 14px rgba(30,64,130,.08)}
  .csp-b h3 a:hover{color:#c2410c}   /* the heading reacts to its own hover only: the rest of the card is not a link */
  .csp-card:hover .csp-ph img{transform:scale(1.025)}
}
@media (prefers-reduced-motion:reduce){.csp-card:hover{transform:none}.csp-card:hover .csp-ph img{transform:none}}

/* phones: photo on top */
@media (max-width:699.98px){
  .csp-card{grid-template-columns:minmax(0,1fr)}
  .csp-ph{aspect-ratio:16/10;min-height:0}
}
@media (max-width:340px){.csp-mini{grid-template-columns:minmax(0,1fr)}}

/* ---------- "And many more industries" (the hub card, laid out wide: globe left, words right) ---------- */
.csp-more{flex-direction:row;align-items:center;gap:clamp(16px,2.4vw,40px);min-height:100%}
.csp-more .aidm-globe{width:clamp(96px,9vw,140px);margin:30px}
.csp-more-t{position:relative;z-index:1}
@media (max-width:699.98px){.csp-more{flex-direction:column;align-items:flex-start}.csp-more .aidm-globe{width:96px;margin:30px 0 30px 30px}}