/* Client case study pages (/work/<client>) and the case study grid on /work. Loaded after site.css. 2026-09-28 */

/* top strip: case study tab + previous/next */
.cs-top{background:var(--g-ink);color:var(--g-on-dark);padding:26px 0 0}
.cs-top .g-crumbs{margin:0 0 18px}
.cs-top__row{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.cs-tab{display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--g-text);font:600 .9rem/1 var(--g-font);padding:14px 22px 14px 18px;border-radius:12px 12px 0 0}
.cs-tab svg{width:16px;height:16px;fill:var(--g-blue)}
.cs-pn{display:flex;gap:18px;padding:0 0 12px;font-size:.86rem;font-weight:600}
.cs-pn a{color:var(--g-on-dark)!important;text-decoration:none!important;display:inline-flex;align-items:center;gap:6px}
.cs-pn a:hover{color:var(--g-blue-soft)!important}
.cs-pn svg{width:10px;height:10px;fill:var(--g-blue-soft)}

/* hero */
.cs-hero2{padding:36px 0 64px}
.cs-hero2__grid{display:grid;gap:36px}
.cs-logo{display:block;height:auto;width:auto;max-width:100%;margin:0 0 26px}
.cs-meta{display:grid;grid-template-columns:1fr 1fr;gap:14px 24px;margin:0 0 26px;padding:0}
.cs-meta dt{font:700 .7rem/1.2 var(--g-font);letter-spacing:.14em;text-transform:uppercase;color:var(--g-text);margin:0 0 3px}
.cs-meta dd{margin:0;font-size:.9rem;color:var(--g-muted)}
.cs-meta dd a{color:var(--g-blue-text);font-weight:600}
.cs-meta__svc{grid-column:1/-1}
.cs-meta__svc ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.cs-meta__svc li{font-size:.78rem;font-weight:600;padding:4px 10px;border-radius:99px;background:var(--g-paper2);border:1px solid var(--g-line);color:var(--g-text)}
.cs-hero2 h1{margin:0 0 16px;font:800 clamp(1.6rem,5.4vw,2.3rem)/1.12 var(--g-font);letter-spacing:-.02em;color:var(--g-text)}
.cs-hero2 .cs-story p{margin:0 0 14px;color:var(--g-muted);font-size:1.02rem;line-height:1.7}
.cs-hero2 .cs-story p:first-child{color:var(--g-text);font-weight:500}
.cs-creative{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -20px;padding:0 20px 6px;scrollbar-width:thin}
.cs-creative img{flex:0 0 72%;width:72%;height:auto;scroll-snap-align:start;border-radius:var(--g-r);object-fit:cover;aspect-ratio:1/1;box-shadow:0 24px 48px -30px rgba(11,12,22,.5)}
@media(min-width:900px){
  .cs-hero2{padding:52px 0 96px}
  .cs-hero2__grid{grid-template-columns:1.05fr .95fr;gap:64px;align-items:start}
  .cs-creative{flex-direction:column;overflow:visible;margin:0;padding:0;gap:22px}
  .cs-creative img{flex:none;width:100%;aspect-ratio:auto}
  .cs-meta{grid-template-columns:1fr 1fr}
}

/* section heading with brand underline */
.cs-hl{display:inline;font:800 clamp(1.7rem,5vw,2.5rem)/1.15 var(--g-font);letter-spacing:-.02em;text-transform:uppercase;
  background:linear-gradient(transparent 62%,rgba(51,85,255,.28) 62%,rgba(51,85,255,.28) 92%,transparent 92%)}
.cs-hlwrap{margin:0 0 36px}

/* strategy rows */
.cs-strat{padding:72px 0}
.cs-row{display:grid;gap:22px;align-items:center;padding:0 0 48px}
.cs-row:last-child{padding-bottom:0}
.cs-row h3{margin:0 0 10px;font:700 1.25rem/1.3 var(--g-font)}
.cs-row h3 span{color:var(--g-blue)}
.cs-row p{margin:0 0 12px;color:var(--g-muted);line-height:1.7}
.cs-row a.g-link{font-size:.92rem}
.cs-fig{margin:0;min-width:0}
.cs-fig--photo img{display:block;width:100%;height:auto;border-radius:var(--g-r);box-shadow:0 24px 48px -30px rgba(11,12,22,.5);max-height:520px;object-fit:cover}
.cs-browser{border-radius:12px;overflow:hidden;border:1px solid var(--g-line);background:#fff;box-shadow:0 24px 48px -28px rgba(11,12,22,.35)}
.cs-browser::before{content:"";display:block;height:24px;background-color:#eceef4;background-image:radial-gradient(circle at 14px 12px,#ff5f57 4px,transparent 5px),radial-gradient(circle at 30px 12px,#febc2e 4px,transparent 5px),radial-gradient(circle at 46px 12px,#28c840 4px,transparent 5px);border-bottom:1px solid var(--g-line)}
.cs-browser img,.cs-phone img{display:block;width:100%;height:auto}
.cs-phone{border:8px solid var(--g-ink);border-radius:30px;overflow:hidden;background:var(--g-ink);box-shadow:0 24px 48px -28px rgba(11,12,22,.45);max-width:280px;margin:0 auto}
.cs-phone img{border-radius:22px}
@media(min-width:900px){
  .cs-strat{padding:100px 0}
  .cs-row{grid-template-columns:1fr 1fr;gap:64px;padding-bottom:80px}
  .cs-row--flip .cs-row__txt{order:2}
}

/* phones strip */
.cs-phones{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.cs-phones .cs-phone{max-width:none}
.cs-phones figcaption{font-size:.84rem;color:var(--g-muted);margin-top:10px;text-align:center}
.cs-phones figure{margin:0}
@media(min-width:760px){.cs-phones{grid-template-columns:repeat(3,1fr);gap:28px;max-width:900px;margin:0 auto}}

/* dark results band with circular stat badges */
.cs-band{background:var(--g-ink);color:var(--g-on-dark);padding:0 0 72px;margin-top:110px}
.cs-badges{display:grid;grid-template-columns:1fr;gap:18px;justify-items:center;transform:translateY(-90px);margin-bottom:-50px}
.cs-badge{width:190px;height:190px;border-radius:50%;background:var(--g-blue);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:18px;box-shadow:0 0 0 8px rgba(51,85,255,.18),0 24px 40px -20px rgba(0,0,0,.6)}
.cs-badge b{font:800 2.3rem/1 var(--g-font);letter-spacing:-.03em;margin:0 0 8px}
.cs-badge span{font-size:.84rem;line-height:1.3;color:#e3e8ff;max-width:13ch}
@media(min-width:760px){.cs-badges{grid-template-columns:repeat(3,1fr)}.cs-badge{width:220px;height:220px}.cs-badge b{font-size:2.7rem}}
.cs-ba{display:grid;gap:40px}
.cs-ba h2{margin:0 0 20px;font:800 1.6rem/1.1 var(--g-font);letter-spacing:-.01em;text-transform:uppercase;color:var(--g-blue-soft)}
.cs-ba ul{list-style:none;margin:0;padding:0}
.cs-ba li{position:relative;padding:0 0 0 20px;margin:0 0 16px;line-height:1.55;color:var(--g-on-dark)}
.cs-ba li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--g-blue)}
.cs-ba li b{color:#fff}
.cs-ba li small{display:block;color:var(--g-on-dark-muted);font-size:.78rem;margin-top:3px}
.cs-ba__note{margin:26px 0 0;font-size:.84rem;color:var(--g-on-dark-muted);max-width:60em}
@media(min-width:900px){.cs-ba{grid-template-columns:1fr 1fr;gap:64px}.cs-band{padding-bottom:96px}}

/* services box */
.cs-svcbox{border:2px solid var(--g-blue);border-radius:var(--g-r);padding:26px 22px;display:grid;gap:26px}
.cs-svcbox a.cs-svc3{display:grid;grid-template-columns:40px 1fr;gap:4px 14px;color:var(--g-text)!important;text-decoration:none!important}
.cs-svc3 i{grid-row:span 2;width:40px;height:40px;border-radius:50%;background:var(--g-blue);display:grid;place-items:center}
.cs-svc3 svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cs-svc3 b{font-weight:700;font-size:1rem}
.cs-svc3 span{font-size:.9rem;color:var(--g-muted);line-height:1.55}
.cs-svc3:hover b{color:var(--g-blue-text)}
@media(min-width:900px){.cs-svcbox{grid-template-columns:repeat(3,1fr);padding:34px 32px;gap:32px}}

/* like what you see band */
.cs-like{background:radial-gradient(120% 140% at 0% 0%,#2a3cff 0%,#1a2270 38%,var(--g-ink) 80%);color:#fff;padding:72px 0}
.cs-like__in{display:grid;gap:22px;align-items:center}
.cs-like h2{margin:0;font:800 italic clamp(2rem,6vw,3.2rem)/1.05 var(--g-font);letter-spacing:-.02em;text-transform:uppercase}
.cs-like h2::before{content:"";display:block;width:84px;height:5px;background:#fff;margin:0 0 18px;border-radius:3px}
.cs-like p{margin:0;color:#d6dbff;max-width:34em}
.cs-like .g-btn{background:#fff;color:var(--g-ink)!important;box-shadow:none}
.cs-like .g-btn--ghost{background:transparent!important;color:#fff!important;border:1px solid rgba(255,255,255,.5)}
.cs-like__acts{display:flex;flex-wrap:wrap;gap:12px}
.cs-like__alt{display:block;margin-top:14px;font-size:.9rem;color:#d6dbff}
.cs-like__alt a{color:#fff}
@media(min-width:900px){.cs-like{padding:104px 0}.cs-like__in{grid-template-columns:1.1fr 1fr;gap:56px}}

/* /work case study grid */
.cs-grid{display:grid;gap:14px;grid-template-columns:1fr}
.cs-tile{position:relative;display:block;aspect-ratio:1/1;border-radius:var(--g-r);overflow:hidden;color:#fff!important;text-decoration:none!important;background:var(--g-ink)}
.cs-tile>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.cs-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,12,22,.35),rgba(11,12,22,.72));transition:background .3s}
.cs-tile:hover>img{transform:scale(1.05)}
.cs-tile:hover::after{background:linear-gradient(180deg,rgba(51,85,255,.45),rgba(11,12,22,.8))}
.cs-tile__logo{position:absolute;z-index:1;left:50%;top:46%;transform:translate(-50%,-50%);width:62%;display:flex;justify-content:center}
.cs-tile__logo img{max-width:100%;max-height:120px;width:auto;height:auto}
.cs-tile__logo--white img{filter:brightness(0) invert(1)}
.cs-tile__cap{position:absolute;z-index:1;left:20px;right:20px;bottom:18px;display:flex;justify-content:space-between;align-items:flex-end;gap:10px}
.cs-tile__cap b{font:700 1.05rem/1.2 var(--g-font)}
.cs-tile__cap span{font-size:.8rem;color:#d6dbff;text-align:right}
.cs-tile__more{position:absolute;z-index:1;top:16px;right:16px;font-size:.78rem;font-weight:700;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);padding:5px 11px;border-radius:99px}
@media(min-width:640px){.cs-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.cs-grid{grid-template-columns:repeat(3,1fr);gap:16px}}
.cs-more{margin-top:28px;display:grid;gap:14px}
@media(min-width:900px){.cs-more{grid-template-columns:1fr 1fr}}

/* view website, real posts, count-up (added 2026-09-28 pm) */
.cs-visit{margin:-8px 0 30px}
.cs-row--wide{grid-template-columns:1fr!important}
.cs-row--wide .cs-row__txt{max-width:46em;order:0!important}
.cs-posts{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -20px;padding:4px 20px 8px;scrollbar-width:thin}
.cs-post{flex:0 0 74%;scroll-snap-align:start;margin:0;background:#fff;border:1px solid var(--g-line);border-radius:var(--g-r);overflow:hidden;box-shadow:0 20px 40px -30px rgba(11,12,22,.5)}
.cs-post__hd{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 14px;font-size:.8rem}
.cs-post__hd b{font-weight:700}
.cs-post__hd span{color:var(--g-muted)}
.cs-post img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.cs-post figcaption{padding:12px 14px 16px;font-size:.88rem;line-height:1.5;color:var(--g-text)}
@media(min-width:760px){.cs-posts{display:grid;grid-template-columns:repeat(3,1fr);overflow:visible;margin:0;padding:0;gap:20px}.cs-post{flex:none}}
@media(max-width:759px){
  .cs-band{margin-top:70px}
  .cs-badges{grid-template-columns:repeat(3,1fr);gap:8px;transform:translateY(-54px);margin-bottom:-24px}
  .cs-badge{width:104px;height:104px;padding:8px;box-shadow:0 0 0 5px rgba(51,85,255,.18),0 16px 30px -18px rgba(0,0,0,.6)}
  .cs-badge b{font-size:1.2rem;margin-bottom:4px}
  .cs-badge span{font-size:.66rem;max-width:11ch}
}

/* client quote (only when a real written quote exists) */
.cs-quote{margin:0;background:var(--g-paper2);border-left:5px solid var(--g-blue);border-radius:var(--g-r);padding:28px 24px}
.cs-quote p{margin:0 0 14px;font:600 clamp(1.1rem,3.6vw,1.45rem)/1.5 var(--g-font);color:var(--g-text)}
.cs-quote footer{color:var(--g-muted);font-size:.9rem}
.cs-quote .g-stars{margin:0 0 12px}
@media(min-width:900px){.cs-quote{padding:40px 48px}}
/* 4 case study tiles: 2 across, then 4 across on wide screens */
@media(min-width:1024px){.cs-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1200px){.cs-grid{grid-template-columns:repeat(4,1fr)}}
/* screenshot grid inside a strategy row (e.g. CRM screens) */
.cs-shots{display:grid;gap:18px}
.cs-shots figcaption{font-size:.82rem;color:var(--g-muted);margin-top:8px}
@media(min-width:760px){.cs-shots{grid-template-columns:1fr 1fr;gap:24px}}

/* ===== v3 layout (2026-09-28 late): tighter hero, one image per section, short results, mobile-first ===== */
.cs-top .g-crumbs a{display:inline-block;padding:12px 0}
.cs-top .g-crumbs{margin:0 0 6px}
.cs-pn{padding:0 0 4px}
.cs-pn a{min-height:44px;padding:0 6px}
.cs-hero2{padding:28px 0 56px}
.cs-hero2__grid{display:grid;gap:32px}
.cs-hero2 .cs-logo{margin:0 0 18px;max-height:64px;width:auto}
.cs-hero2 h1{font-size:clamp(1.75rem,6.4vw,2.6rem);line-height:1.1;max-width:22ch;margin:0 0 16px}
.cs-hero2 .cs-story p{font-size:1.05rem;margin:0 0 12px}
.cs-hero2 .cs-meta{margin:22px 0 18px}
.cs-meta dd{font-size:1rem}
.cs-meta__svc li{font-size:.85rem}
.cs-visit{margin:0}
.cs-creative2{display:grid;gap:22px;min-width:0}
.cs-mock{position:relative;padding:0 14% 12% 0}
.cs-mock .cs-phone{position:absolute;right:0;bottom:0;width:30%;max-width:none;margin:0;border-width:5px;border-radius:20px;box-shadow:0 20px 40px -18px rgba(11,12,22,.55)}
.cs-mock .cs-phone img{border-radius:15px}
.cs-photo{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:center 35%;border-radius:var(--g-r);box-shadow:0 24px 48px -30px rgba(11,12,22,.5)}
@media(min-width:900px){
  .cs-hero2{padding:48px 0 96px}
  .cs-hero2__grid{grid-template-columns:1fr 1.05fr;gap:64px;align-items:start}
  .cs-hero2 .cs-logo{max-height:88px}
}
/* strategy: one image, short text */
.cs-row p{font-size:1.05rem}
.cs-more{display:inline-flex;align-items:center;min-height:44px}
.cs-phone--solo{max-width:300px}
.cs-post figcaption{font-size:1rem}
@media(min-width:900px){.cs-row{gap:72px}.cs-row__txt{max-width:30em}}
/* results band */
.cs-ba li{font-size:1.05rem;margin:0 0 12px}
.cs-ba__note{font-size:.9rem}
.cs-src{margin:30px 0 0;border-top:1px solid var(--g-line-dark);padding-top:6px;color:var(--g-on-dark-muted);font-size:.85rem}
.cs-src summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:600;color:var(--g-on-dark)}
.cs-src p{margin:6px 0 10px}
.cs-src ul{margin:0;padding:0 0 0 18px}
.cs-src li{margin:0 0 6px;line-height:1.5}
.cs-src b{color:var(--g-on-dark)}
.cs-badge span{font-size:.92rem}
.cs-svc3 span{font-size:1rem}
@media(max-width:759px){
  .cs-band{margin-top:0;padding-top:48px}
  .cs-badges{grid-template-columns:1fr;gap:14px;transform:none;margin:0 0 36px}
  .cs-badge{width:100%;height:auto;border-radius:18px;flex-direction:row;justify-content:flex-start;gap:16px;padding:18px 20px;text-align:left;box-shadow:none}
  .cs-badge b{font-size:2.1rem;margin:0;min-width:4.2ch}
  .cs-badge span{font-size:1rem;max-width:none;color:#e3e8ff}
}
.cs-visit .g-btn{min-height:44px}
.cs-like__alt a{display:inline-block;padding:12px 0}
.cs-ba__note{font-size:1rem}
.cs-photo{object-position:center 18%}
/* 5 case study tiles (added 2026-09-29): tablet 2+2+1 wide, desktop 3 then 2 centered */
@media(min-width:640px) and (max-width:1023px){.cs-grid>.cs-tile:nth-child(5):last-child{grid-column:1/-1;aspect-ratio:2/1}}
@media(min-width:1024px){.cs-grid{grid-template-columns:repeat(6,1fr)}.cs-grid>.cs-tile{grid-column:span 2}.cs-grid>.cs-tile:nth-child(4):nth-last-child(2){grid-column:2/span 2}}