/* Circle360 case studies - Setu-style layout (csx) */
.csx{background:var(--off-white,#faf9f8);padding:32px 32px 0}
.csx-wrap{max-width:1200px;margin:0 auto}
.csx-banner{position:relative;width:100%;aspect-ratio:1289/529;overflow:hidden;background:var(--warm-gray,#f5f3f0)}
.csx-banner>img{width:100%;height:100%;object-fit:cover;display:block}
.csx-banner--logo>img{object-fit:contain;padding:8% 30%;background:#fff}
.csx-banner::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.18) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,0) 50%,rgba(0,0,0,.62) 100%);pointer-events:none}
.csx-back{position:absolute;top:28px;left:32px;z-index:2;color:#fff;font-size:30px;line-height:1;text-decoration:none;transition:transform .3s}
.csx-back:hover{transform:translateX(-6px);color:#fff}
.csx-banner-text{position:absolute;left:48px;right:48px;bottom:36px;z-index:2;color:#fff}
.csx-tag{display:block;font-family:Poppins,sans-serif;font-size:14px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;opacity:.92;margin-bottom:8px}
.csx-title{font-family:Poppins,sans-serif;font-weight:700;font-size:clamp(28px,3.4vw,44px);line-height:1.15;margin:0;color:#fff}
.csx-rule{display:block;width:40px;height:2px;background:var(--dark,#1a1919);margin-bottom:28px}
.csx-deliv{background:#fff;padding:56px 32px;margin:0 -32px}
.csx-deliv ul{list-style:none;margin:0 auto;padding:0;max-width:1100px;display:flex;flex-wrap:wrap;justify-content:center;gap:32px 56px}
.csx-deliv li{display:flex;flex-direction:column;align-items:center;gap:14px;width:140px;text-align:center}
.csx-ico{width:96px;height:96px;border:1px solid var(--dark,#1a1919);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:40px;color:var(--dark,#1a1919);transition:background .3s,color .3s,border-color .3s}
.csx-deliv li:hover .csx-ico{background:var(--pink,#e30044);border-color:var(--pink,#e30044);color:#fff}
.csx-deliv li span:last-child{font-family:Poppins,sans-serif;font-size:13px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--dark,#1a1919);line-height:1.4}
.csx-gallery{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:72px 0}
.csx-gallery figure{margin:0;overflow:hidden;aspect-ratio:16/9;background:var(--warm-gray,#f5f3f0)}
.csx-gallery figure img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.csx-gallery figure:hover img{transform:scale(1.04)}
.csx-gallery--odd figure:first-child{grid-column:1/-1;aspect-ratio:1289/529}
/* listing */
.csx-list{padding:72px 32px 96px;background:#fff}
.csx-grid{list-style:none;margin:0 auto;padding:0;max-width:1100px;display:grid;grid-template-columns:1fr 1fr;gap:40px 64px}
.csx-grid li.csx-off{display:none}
.csx-grid li:nth-child(even of :not(.csx-off)){transform:translateY(96px)}
.csx-grid-end{height:96px}
.csx-card{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;color:#fff;text-decoration:none;background:var(--dark,#1a1919)}
.csx-card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s ease}
.csx-card--logo img{object-fit:contain;background:#fff;padding:14% 24%}
.csx-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.72) 100%);transition:background .35s}
.csx-card:hover img{transform:scale(1.06)}
.csx-card:hover::after{background:linear-gradient(180deg,rgba(0,0,0,.15) 0%,rgba(0,0,0,.8) 100%)}
.csx-card-text{position:absolute;left:28px;right:28px;bottom:24px;z-index:2;transition:transform .35s}
.csx-card:hover .csx-card-text{transform:translateY(-26px)}
.csx-card-tag{display:block;font-family:Poppins,sans-serif;font-size:12px;letter-spacing:.06em;text-transform:uppercase;opacity:.9;margin-bottom:6px}
.csx-card-title{display:block;font-family:Poppins,sans-serif;font-size:21px;font-weight:600;line-height:1.3}
.csx-card-sub{display:block;font-family:"Open Sans",sans-serif;font-size:14px;opacity:.85;margin-top:4px}
.csx-card-cta{position:absolute;left:28px;bottom:20px;z-index:2;font-family:Poppins,sans-serif;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;opacity:0;transform:translateY(10px);transition:opacity .35s,transform .35s;color:#fff}
.csx-card:hover .csx-card-cta{opacity:1;transform:none}
.csx-empty{text-align:center;color:var(--gray-text,#7a7674);font-family:"Open Sans",sans-serif;display:none;margin-top:24px}
@media (max-width:900px){
 .csx{padding:16px 16px 0}
 .csx-banner{aspect-ratio:4/3}
 .csx-banner--logo>img{padding:12% 18%}
 .csx-back{top:16px;left:16px;font-size:26px}
 .csx-banner-text{left:20px;right:20px;bottom:20px}
 .csx-intro{grid-template-columns:1fr;gap:32px;padding:44px 4px 48px}
 .csx-logo{order:-1;justify-content:flex-start}
 .csx-logo img{max-width:140px;max-height:90px}
 .csx-copy p{font-size:16px}
 .csx-deliv{margin:0 -16px;padding:40px 16px}
 .csx-deliv ul{gap:28px 20px}
 .csx-deliv li{width:120px}
 .csx-ico{width:76px;height:76px;font-size:32px}
 .csx-gallery{grid-template-columns:1fr;gap:16px;padding:44px 0}
 .csx-gallery--odd figure:first-child{aspect-ratio:16/9}
 .csx-list{padding:48px 16px 64px}
 .csx-grid{grid-template-columns:1fr;gap:24px}
 .csx-grid li:nth-child(even of :not(.csx-off)){transform:none}
 .csx-grid-end{display:none}
 .csx-card-cta{opacity:1;transform:none}
 .csx-card-text{transform:translateY(-26px)}
 .csx-card:hover .csx-card-text{transform:translateY(-26px)}
}

/* filter (pill style) */
.csx-filter{max-width:1200px;margin:0 auto 56px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px}
.csx-filter-label{font-family:Poppins,sans-serif;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gray-text,#7a7674);margin-right:4px}
.csx-pill{position:relative;display:inline-flex;align-items:center}
.csx-pill select{appearance:none;-webkit-appearance:none;font-family:Poppins,sans-serif;font-size:14px;font-weight:500;color:var(--dark,#1a1919);background:#fff;border:1px solid var(--gray-mid,#e8e4df);border-radius:999px;padding:12px 44px 12px 22px;cursor:pointer;min-width:190px;transition:border-color .25s,box-shadow .25s,background .25s}
.csx-pill select:hover{border-color:var(--pink,#e30044)}
.csx-pill select:focus{outline:none;border-color:var(--pink,#e30044);box-shadow:0 0 0 4px var(--pink-soft,rgba(227,0,68,.06))}
.csx-pill.is-set select{background:var(--pink-soft,rgba(227,0,68,.06));border-color:var(--pink,#e30044);color:var(--pink,#e30044)}
.csx-pill i{position:absolute;right:18px;pointer-events:none;color:var(--pink,#e30044);font-size:16px}
.csx-reset{font-family:Poppins,sans-serif;font-size:13px;font-weight:500;color:var(--gray-text,#7a7674);background:none;border:0;cursor:pointer;padding:8px 6px;display:none;align-items:center;gap:4px}
.csx-reset.show{display:inline-flex}
.csx-reset:hover{color:var(--pink,#e30044)}
/* softer logo fallbacks */
.csx-card--logo{background:#fff;border:1px solid var(--gray-mid,#e8e4df)}
.csx-card--logo::after{background:linear-gradient(180deg,rgba(255,255,255,0) 55%,rgba(26,25,25,.78) 100%)}
.csx-banner--logo::after{background:linear-gradient(180deg,rgba(255,255,255,0) 55%,rgba(26,25,25,.7) 100%)}
@media (max-width:900px){
 .csx-filter{gap:10px;margin-bottom:36px}
 .csx-filter-label{width:100%;text-align:center;margin:0}
 .csx-pill,.csx-pill select{width:100%}
}

/* intro v2: meta panel + lead */
.csx-intro{display:grid;grid-template-columns:300px 1fr;gap:72px;align-items:start;padding:80px 48px 64px}
.csx-meta{position:sticky;top:130px;display:grid;gap:28px}
.csx-meta-logo{display:flex;align-items:center;justify-content:center;aspect-ratio:3/2;background:#fff;border:1px solid var(--gray-mid,#e8e4df);border-radius:20px;padding:28px}
.csx-meta-logo img{max-width:100%;max-height:100%;object-fit:contain}
.csx-meta dl{margin:0;display:grid;gap:0;border-top:1px solid var(--gray-mid,#e8e4df)}
.csx-meta dl div{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--gray-mid,#e8e4df)}
.csx-meta dt{font-family:Poppins,sans-serif;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gray-text,#7a7674)}
.csx-meta dd{margin:0;font-family:Poppins,sans-serif;font-size:14px;font-weight:600;color:var(--dark,#1a1919);text-align:right;font-variant-numeric:tabular-nums}
.csx-lead p{font-family:Poppins,sans-serif;font-size:clamp(22px,2.3vw,32px);font-weight:500;line-height:1.45;letter-spacing:-.01em;color:var(--dark,#1a1919);margin:0;text-wrap:pretty}
.csx-lead p::first-letter{color:var(--pink,#e30044)}
.csx-feature{margin:0 0 72px;overflow:hidden;aspect-ratio:16/8;background:var(--warm-gray,#f5f3f0)}
.csx-feature img{width:100%;height:100%;object-fit:cover;display:block}
.csx-body{display:grid;grid-template-columns:1fr 1fr;gap:56px;padding:0 48px 80px}
.csx-body--one{grid-template-columns:minmax(0,760px);justify-content:end}
.csx-body p{font-family:"Open Sans",sans-serif;font-size:17px;line-height:1.8;color:var(--dark-mid,#2c2b2b);margin:0}
.csx-body p:first-child{padding-top:0}
.csx-body strong,.csx-lead strong{font-weight:700;color:var(--dark,#1a1919);background:linear-gradient(transparent 62%,var(--pink-mid,rgba(227,0,68,.12)) 62%);padding:0 2px}
.csx-gallery--n3{grid-template-columns:repeat(3,1fr)}
.csx-gallery--n3 figure{aspect-ratio:4/5}
.csx-gallery--n3.csx-gallery--odd figure:first-child{grid-column:auto;aspect-ratio:4/5}
/* next project card (static) */
.csx-next{background:var(--off-white,#faf9f8);margin:0 -32px;padding:24px 32px 96px}
.csx-next-in{max-width:1200px;margin:0 auto;display:grid;gap:20px}
.csx-next-card{display:grid;grid-template-columns:5fr 7fr;min-height:380px;background:#fff;border:1px solid var(--gray-mid,#e8e4df);border-radius:28px;overflow:hidden;text-decoration:none;color:var(--dark,#1a1919);transition:box-shadow .35s,border-color .35s}
.csx-next-card:hover{box-shadow:0 24px 60px rgba(26,25,25,.10);border-color:transparent;color:var(--dark,#1a1919)}
.csx-next-text{display:flex;flex-direction:column;justify-content:center;gap:14px;padding:48px}
.csx-next-label{font-family:Poppins,sans-serif;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--pink,#e30044)}
.csx-next-label em{font-style:normal;color:var(--gray-text,#7a7674);margin-left:8px;font-variant-numeric:tabular-nums}
.csx-next-name{font-family:Poppins,sans-serif;font-weight:800;font-size:clamp(34px,4vw,56px);line-height:1.05;letter-spacing:-.02em;text-wrap:balance;transition:color .3s}
.csx-next-card:hover .csx-next-name{color:var(--pink,#e30044)}
.csx-next-tag{font-family:"Open Sans",sans-serif;font-size:15px;color:var(--gray-text,#7a7674)}
.csx-next-btn{margin-top:14px;align-self:flex-start;display:inline-flex;align-items:center;gap:10px;font-family:Poppins,sans-serif;font-size:14px;font-weight:600;color:#fff;background:var(--pink,#e30044);border-radius:999px;padding:13px 22px;transition:background .3s}
.csx-next-btn i{transition:transform .3s}
.csx-next-card:hover .csx-next-btn{background:var(--pink-hover,#c20b42)}
.csx-next-card:hover .csx-next-btn i{transform:translateX(4px)}
.csx-next-media{position:relative;overflow:hidden;background:var(--warm-gray,#f5f3f0)}
.csx-next-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.csx-next-media--logo{background:#fff;border-left:1px solid var(--gray-mid,#e8e4df)}
.csx-next-media--logo img{object-fit:contain;padding:18% 22%}
.csx-next-card:hover .csx-next-media img{transform:scale(1.04)}
.csx-next-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px}
.csx-next-foot a{display:inline-flex;align-items:center;gap:8px;font-family:Poppins,sans-serif;font-size:14px;font-weight:500;color:var(--gray-text,#7a7674);text-decoration:none;padding:6px 2px;transition:color .25s}
.csx-next-foot a:hover{color:var(--pink,#e30044)}
@media (prefers-reduced-motion:reduce){.csx-next-media img,.csx-next-btn i{transition:none}}
@media (max-width:900px){
 .csx-intro{grid-template-columns:1fr;gap:32px;padding:44px 4px 40px}
 .csx-meta{position:static;grid-template-columns:120px 1fr;align-items:center;gap:20px}
 .csx-meta-logo{padding:14px;border-radius:14px}
 .csx-feature{margin-bottom:40px;aspect-ratio:4/3}
 .csx-body,.csx-body--one{grid-template-columns:1fr;gap:20px;padding:0 4px 48px}
 .csx-body p{font-size:16px}
 .csx-gallery--n3{grid-template-columns:1fr}
 .csx-gallery--n3 figure,.csx-gallery--n3.csx-gallery--odd figure:first-child{aspect-ratio:16/10}
}
@media (max-width:900px){
 .csx-next{margin:0 -16px;padding:16px 16px 64px}
 .csx-next-card{grid-template-columns:1fr;min-height:0;border-radius:20px}
 .csx-next-media{order:-1;aspect-ratio:16/10}
 .csx-next-media--logo{border-left:0;border-bottom:1px solid var(--gray-mid,#e8e4df)}
 .csx-next-text{padding:28px 24px 32px;gap:10px}
}

/* show work images in full (no cropping) */
.csx-banner{aspect-ratio:auto}
.csx-banner>img{height:auto;object-fit:contain}
.csx-banner--logo{aspect-ratio:1289/529}
.csx-banner--logo>img{height:100%}
.csx-feature{aspect-ratio:auto;background:none}
.csx-feature img{height:auto}
.csx-gallery{align-items:start}
.csx-gallery figure,.csx-gallery--odd figure:first-child,.csx-gallery--n3 figure,.csx-gallery--n3.csx-gallery--odd figure:first-child{aspect-ratio:auto;background:none}
.csx-gallery figure img{height:auto}
.csx-gallery figure:hover img{transform:none}
.csx-next-media img{object-fit:contain;padding:20px}
.csx-next-media--logo img{padding:18% 22%}
.csx-next-card:hover .csx-next-media img{transform:scale(1.02)}

/* gallery: equal tiles, whole image visible */
.csx-gallery{align-items:stretch}
.csx-gallery figure,.csx-gallery--odd figure:first-child,.csx-gallery--n3 figure,.csx-gallery--n3.csx-gallery--odd figure:first-child{aspect-ratio:4/3;display:flex;align-items:center;justify-content:center}
.csx-gallery figure img{width:100%;height:100%;object-fit:contain}

/* rich case study blocks */
.csx-sub{display:block;margin-top:8px;font-family:Poppins,sans-serif;font-size:clamp(15px,1.4vw,19px);font-weight:500;color:#fff;opacity:.9}
.csx-label{display:inline-flex;align-items:center;gap:10px;font-family:Poppins,sans-serif;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--pink,#e30044);margin-bottom:16px}
.csx-label::before{content:"";width:24px;height:2px;background:var(--pink,#e30044)}
.csx-body--blocks{grid-template-columns:1fr 1fr;padding-top:8px}
.csx-block{display:flex;flex-direction:column}
.csx-block p,.csx-block li{font-family:"Open Sans",sans-serif;font-size:17px;line-height:1.8;color:var(--dark-mid,#2c2b2b)}
.csx-block ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.csx-block li{position:relative;padding-left:22px;line-height:1.6}
.csx-block li::before{content:"";position:absolute;left:0;top:.65em;width:8px;height:8px;border-radius:50%;background:var(--pink,#e30044)}
.csx-quote{margin:0 48px 88px;padding:44px 0 0;border-top:1px solid var(--gray-mid,#e8e4df);position:relative}
.csx-quote::before{content:"\201C";position:absolute;top:18px;left:0;font-family:Poppins,sans-serif;font-size:96px;line-height:1;color:var(--pink,#e30044)}
.csx-quote p{margin:0;padding-left:72px;font-family:Poppins,sans-serif;font-size:clamp(22px,2.4vw,32px);font-weight:500;line-height:1.4;letter-spacing:-.01em;color:var(--dark,#1a1919);max-width:900px;text-wrap:pretty}
.csx-quote cite{display:block;padding-left:72px;margin-top:18px;font-style:normal;font-family:Poppins,sans-serif;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--gray-text,#7a7674)}
.csx-steps{padding:80px 48px 8px}
.csx-steps ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 56px;counter-reset:st}
.csx-steps li{counter-increment:st;display:grid;grid-template-columns:56px 1fr;gap:4px 8px;padding:26px 0;border-top:1px solid var(--gray-mid,#e8e4df)}
.csx-steps li::before{content:counter(st,decimal-leading-zero);grid-row:span 2;font-family:Poppins,sans-serif;font-size:14px;font-weight:600;color:var(--pink,#e30044);padding-top:4px;font-variant-numeric:tabular-nums}
.csx-steps h3{margin:0;font-family:Poppins,sans-serif;font-size:19px;font-weight:700;color:var(--dark,#1a1919)}
.csx-steps p{margin:0;font-family:"Open Sans",sans-serif;font-size:15.5px;line-height:1.7;color:var(--gray-text,#7a7674)}
.csx-faq{padding:8px 48px 88px;display:flex;flex-direction:column}
.csx-faq details{border-bottom:1px solid var(--gray-mid,#e8e4df)}
.csx-faq details:first-of-type{border-top:1px solid var(--gray-mid,#e8e4df)}
.csx-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;font-family:Poppins,sans-serif;font-size:18px;font-weight:600;color:var(--dark,#1a1919);transition:color .25s}
.csx-faq summary::-webkit-details-marker{display:none}
.csx-faq summary:hover{color:var(--pink,#e30044)}
.csx-faq summary i{flex:0 0 36px;height:36px;border-radius:50%;border:1px solid var(--gray-mid,#e8e4df);display:inline-flex;align-items:center;justify-content:center;color:var(--pink,#e30044);font-size:16px;transition:transform .3s,background .3s,color .3s}
.csx-faq details[open] summary i{transform:rotate(45deg);background:var(--pink,#e30044);color:#fff;border-color:var(--pink,#e30044)}
.csx-faq-a{padding:0 56px 24px 0}
.csx-faq-a p{margin:0;font-family:"Open Sans",sans-serif;font-size:16px;line-height:1.8;color:var(--dark-mid,#2c2b2b)}
.csx-gallery+.csx-faq{padding-top:0}
@media (max-width:900px){
 .csx-body--blocks{grid-template-columns:1fr;gap:36px}
 .csx-block p,.csx-block li{font-size:16px}
 .csx-quote{margin:0 4px 56px;padding-top:56px}
 .csx-quote::before{top:8px;font-size:72px}
 .csx-quote p,.csx-quote cite{padding-left:0}
 .csx-steps{padding:52px 4px 0}
 .csx-steps ol{grid-template-columns:1fr}
 .csx-steps li{grid-template-columns:44px 1fr}
 .csx-faq{padding:0 4px 56px}
 .csx-faq summary{font-size:16px}
 .csx-faq-a{padding-right:0}
}

.csx-gallery--sq4{grid-template-columns:repeat(4,1fr);gap:20px}
.csx-gallery.csx-gallery--sq4 figure{aspect-ratio:1/1}
@media (max-width:900px){.csx-gallery--sq4{grid-template-columns:1fr 1fr;gap:12px}}