/* buildcontrol — Page-specific styles. */
.cs2-hero{background:linear-gradient(160deg,#11396E,#0B488D);color:#fff;padding:64px 0 56px;text-align:center}
.cs2-hero .eyebrow{display:inline-flex;font-family:var(--f-header);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#10C9D0;margin-bottom:14px}
.cs2-hero h1{font-family:var(--f-header);font-weight:700;font-size:40px;line-height:1.14;letter-spacing:-.02em;max-width:640px;margin:0 auto}
.cs2-hero p{font-size:16px;line-height:1.6;color:#CDDCEF;max-width:560px;margin:16px auto 0}

.cs2-list{background:var(--screen-bg-alt);padding:48px 0 74px}
.cs2-wrap{max-width:940px;margin:0 auto;display:grid;gap:22px}
.cs2-card{display:grid;grid-template-columns:200px 1fr;background:#fff;border:1px solid var(--n-150);border-radius:18px;
  overflow:hidden;box-shadow:0 4px 20px rgba(17,57,103,.06);transition:transform .22s,box-shadow .22s;text-decoration:none}
.cs2-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(17,57,103,.12)}
@media(max-width:640px){.cs2-card{grid-template-columns:1fr}}
.cs2-side{background:linear-gradient(155deg,#0E2E56 0%,#113967 45%,#1F58AE 100%);padding:32px 24px;color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;position:relative;overflow:hidden}
.cs2-side:after{content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,.10) 1px,transparent 1px);background-size:14px 14px;
  opacity:.5;pointer-events:none;mask-image:linear-gradient(135deg,#000,transparent 70%);-webkit-mask-image:linear-gradient(135deg,#000,transparent 70%)}
.cs2-side.alt{background:linear-gradient(155deg,#0D4266 0%,#14507F 45%,#0E8FA8 100%)}
.cs2-side:before{content:"";position:absolute;top:-40px;right:-40px;width:150px;height:150px;border-radius:50%;
  background:radial-gradient(circle,rgba(45,107,200,.5),transparent 70%)}
.cs2-side .glow2{position:absolute;bottom:-40px;left:-30px;width:120px;height:120px;border-radius:50%;
  background:radial-gradient(circle,rgba(16,201,208,.22),transparent 70%);pointer-events:none}
@media(max-width:640px){.cs2-side{flex-direction:row;align-items:center;justify-content:center;text-align:left;gap:14px;padding:20px 22px}.cs2-side .toplab{display:none}.cs2-side .ic{margin:0}}
.cs2-side .toplab{position:relative;font-family:var(--f-header);font-weight:600;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:16px}
.cs2-side .ic{position:relative;width:52px;height:52px;border-radius:14px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.12);display:grid;place-items:center;
  margin:0 auto 15px;box-shadow:0 6px 16px rgba(0,0,0,.18)}
@media(max-width:640px){.cs2-side .ic{margin-bottom:0}}
.cs2-side .ic svg{width:26px;height:26px;fill:#fff}
.cs2-side .who{position:relative}
.cs2-side .who b{font-family:var(--f-header);font-weight:700;font-size:16px;display:block;line-height:1.25;margin-bottom:3px}
.cs2-side .who span{font-size:12.5px;color:rgba(255,255,255,.78);display:inline-flex;align-items:center;justify-content:center;gap:5px}
.cs2-side .who span:before{content:"";width:5px;height:5px;border-radius:50%;background:#10C9D0}
.cs2-main{padding:26px 28px;display:flex;flex-direction:column}
.cs2-main .eyebrow{font-family:var(--f-header);font-weight:600;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#1F58AE;margin-bottom:9px}
.cs2-main h3{font-family:var(--f-header);font-weight:700;font-size:20px;line-height:1.3;color:var(--navy-900);margin-bottom:9px;letter-spacing:-.01em}
.cs2-main .chal{font-size:14.5px;line-height:1.55;color:var(--n-600);margin-bottom:16px}
.cs2-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:auto}
.cs2-tags{display:flex;gap:6px;flex-wrap:wrap}
.cs2-tags span{font-size:11px;font-weight:600;padding:4px 10px;border-radius:9999px;background:#E4EEFB;color:#1F58AE}
.cs2-out{font-family:var(--f-header);font-weight:700;font-size:13px;color:#399C36;background:#E8F5E8;padding:4px 11px;border-radius:9999px}
.cs2-go{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-family:var(--f-header);font-weight:600;font-size:14px;color:#1F58AE}
.cs2-go svg{width:15px;height:15px;fill:currentColor}
.cs2-note{max-width:940px;margin:26px auto 0;text-align:center;font-size:12.5px;color:var(--n-500)}

/* Client logo in place of the generic glyph on a case study card.
   Both marks sit directly on the blue gradient, knocked back to white. A white
   tile behind them read as a sticker stuck onto the panel. */
.cs2-side .ic.logo{display:block;width:auto;height:auto;padding:0;margin:0 auto 15px;
  background:none;border:none;box-shadow:none;border-radius:0}
/* Capped in pixels, not percentages: the box is a grid container, and a
   percentage max-height there does not resolve, so the mark scaled to its
   max-width and overran the company name beneath it. */
.cs2-side .ic.logo img{max-height:46px;max-width:150px;width:auto;height:auto;
  display:block;margin:0 auto;opacity:.95}
/* Kich ships as a red wordmark on transparency. brightness(0) turns every
   visible pixel black, invert(1) then makes it white - alpha is untouched,
   so only the colour flattens. */
.cs2-side .ic.logo img[src*="kich"]{filter:brightness(0) invert(1)}
@media(max-width:640px){
  .cs2-side .ic.logo{margin:0;flex:none}
  .cs2-side .ic.logo img{max-height:34px;max-width:112px}
}