/* ============================================================
   UNIFIED CASE STUDY DESIGN SYSTEM  (prefix: cs-)
   Shared by every case-study detail page. Blend of the
   connectstudents (cs-) system + payment-solutions stats/
   onboarding + asset-management refinements.
   Scope everything under .cs-study.
   ============================================================ */
.cs-study{
   --cs-bg:#05060d; --cs-bg2:#040f22;
   --cs-panel:rgba(255,255,255,.035); --cs-panel2:rgba(255,255,255,.06);
   --cs-border:rgba(255,255,255,.09); --cs-border2:rgba(255,255,255,.16);
   --cs-ink:#F0F0F6; --cs-muted:#8B93A6;
   --cs-blue:#0989FF; --cs-brand:#2563EB; --cs-green:#219874;
   --cs-amber:#FFC542; --cs-red:#E82D04; --cs-slate:#AAB9C5;
   --cs-magenta:#c026d3; --cs-primary:#436FF5; --cs-primary-ink:#ffffff;
   --cs-glow:0 20px 60px -22px rgba(37,99,235,.55);
   --cs-grid:rgba(140,150,200,0.05);
   --cs-g1:rgba(139,123,255,.10); --cs-g2:rgba(34,211,238,.08); --cs-gc:rgba(139,123,255,.10);
   background:var(--cs-bg); color:var(--cs-ink);
   font-family:var(--tp-ff-body); position:relative; overflow:hidden; z-index:0;
}
/* kill the navy black-bg-3 behind any case study so no blue can peek through */
.porfolio-details__overview-wrapper:has(.cs-study){background:#05060d !important;}
html[tp-theme="tp-theme-light"] .porfolio-details__overview-wrapper:has(.cs-study){background:#f4f7fc !important;}
/* ai-exploration background: drifting grid (no candlesticks) + violet/cyan glows + cursor glow */
.cs-study::before{
   content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.62;
   background-image:
      linear-gradient(to right, var(--cs-grid) 1px, transparent 1px),
      linear-gradient(to bottom, var(--cs-grid) 1px, transparent 1px);
   background-size:66px 66px;
   animation:cs-grid-drift 30s linear infinite;
}
@keyframes cs-grid-drift{from{background-position:0 0,0 0;}to{background-position:66px 0,0 0;}}
.cs-study .cs-glow{position:absolute;inset:0;z-index:0;pointer-events:none;transition:background .18s;}
@media (prefers-reduced-motion:reduce){.cs-study::before{animation:none;}}
.cs-study *{box-sizing:border-box;}
.cs-study h1,.cs-study h2,.cs-study h3,.cs-study h4,.cs-study h5,.cs-study h6{color:var(--cs-ink);}
.cs-serif{font-family:var(--tp-ff-heading),'EB Garamond',serif;font-weight:500;}
.cs-wrap{max-width:1240px;margin:0 auto;padding:0 24px;position:relative;z-index:2;}
/* keep content clear of the fixed left social rail while it is visible (>=900px)
   but the wrap still hugs the viewport edge (< max-width + rail clearance) */
@media (min-width:900px) and (max-width:1420px){ .cs-wrap{padding-left:104px;} }
.cs-section{padding:100px 0;position:relative;}
.cs-section.tight{padding:70px 0;}
.cs-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.26em;
   text-transform:uppercase;color:var(--cs-blue);font-weight:600;}
.cs-eyebrow::before{content:"";width:30px;height:1px;background:linear-gradient(90deg,transparent,var(--cs-blue));}
.cs-h2{font-size:clamp(30px,4vw,50px);line-height:1.05;margin:16px 0 0;font-weight:500;}
.cs-lead{color:var(--cs-muted);font-size:17px;line-height:1.75;max-width:none;}
.cs-head{margin-bottom:54px;max-width:none;}

/* background flourish */
.cs-orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.4;z-index:0;pointer-events:none;}
.cs-orb.a{width:460px;height:460px;background:radial-gradient(circle,var(--cs-brand),transparent 70%);top:-100px;right:-120px;}
.cs-orb.b{width:420px;height:420px;background:radial-gradient(circle,var(--cs-blue),transparent 70%);bottom:10%;left:-140px;opacity:.3;}

/* reveal */
.cs-study.cs-anim .cs-rv{opacity:0;transform:translateY(34px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);}
.cs-study.cs-anim .cs-rv.in{opacity:1;transform:none;}
.cs-study .cs-rv[data-d="1"]{transition-delay:.07s;}
.cs-study .cs-rv[data-d="2"]{transition-delay:.14s;}
.cs-study .cs-rv[data-d="3"]{transition-delay:.21s;}
.cs-study .cs-rv[data-d="4"]{transition-delay:.28s;}
.cs-study .cs-rv[data-d="5"]{transition-delay:.35s;}

/* ===== INTRO ===== */
.cs-intro{border-top:1px solid var(--cs-border);}
.cs-intro__grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:44px;}
.cs-note{background:var(--cs-panel);border:1px solid var(--cs-border);border-radius:20px;padding:34px;transition:.4s;position:relative;overflow:hidden;}
.cs-note:hover{border-color:var(--cs-border2);transform:translateY(-5px);}
.cs-note__tag{display:inline-flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;margin-bottom:16px;}
.cs-note.prob .cs-note__tag{color:var(--cs-red);}
.cs-note.sol .cs-note__tag{color:var(--cs-green);}
.cs-note h3{font-size:22px;margin:0 0 12px;}
.cs-note p{color:var(--cs-muted);font-size:15.5px;line-height:1.7;margin:0;}

/* meta strip */
.cs-meta{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px;}
.cs-meta__i{background:var(--cs-panel);border:1px solid var(--cs-border);border-radius:14px;padding:12px 18px;transition:.4s;}
.cs-meta__i:hover{border-color:var(--cs-brand);transform:translateY(-4px);box-shadow:var(--cs-glow);}
.cs-meta__k{display:block;font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--cs-muted);margin-bottom:5px;}
.cs-meta__v{font-weight:600;font-size:15px;}

/* ===== STATS / IMPACT (from ps-) ===== */
.cs-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:44px;}
.cs-stats.c3{grid-template-columns:repeat(3,1fr);}
.cs-stats.c2{grid-template-columns:repeat(2,1fr);}
.cs-stat{background:linear-gradient(160deg,var(--cs-panel2),var(--cs-panel));border:1px solid var(--cs-border);border-radius:20px;padding:32px 26px;position:relative;overflow:hidden;transition:.45s;}
.cs-stat:hover{transform:translateY(-6px);border-color:var(--cs-border2);box-shadow:var(--cs-glow);}
.cs-stat::after{content:"";position:absolute;right:-40px;bottom:-40px;width:130px;height:130px;border-radius:50%;background:radial-gradient(circle,rgba(37,99,235,.25),transparent 70%);opacity:0;transition:.5s;}
.cs-stat:hover::after{opacity:1;}
.cs-stat .num{font-family:var(--tp-ff-heading),serif;font-size:52px;line-height:1;background:linear-gradient(120deg,#fff,var(--cs-blue));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.cs-stat .lbl{color:var(--cs-muted);font-size:14px;line-height:1.5;margin-top:12px;}

/* ===== FACTOR / CARD GRIDS ===== */
.cs-cards{display:grid;gap:20px;}
.cs-cards.c3{grid-template-columns:repeat(3,1fr);}
.cs-cards.c4{grid-template-columns:repeat(4,1fr);}
.cs-cards.c2{grid-template-columns:repeat(2,1fr);}
.cs-card{background:var(--cs-panel);border:1px solid var(--cs-border);border-radius:20px;padding:30px;position:relative;overflow:hidden;transition:.45s;}
.cs-card::after{content:"";position:absolute;right:-50px;bottom:-50px;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,rgba(37,99,235,.25),transparent 70%);opacity:0;transition:.5s;}
.cs-card:hover{transform:translateY(-6px);border-color:var(--cs-border2);}
.cs-card:hover::after{opacity:1;}
.cs-card__ico{width:54px;height:54px;border-radius:15px;display:flex;align-items:center;justify-content:center;font-size:22px;background:var(--cs-panel2);border:1px solid var(--cs-border);margin-bottom:20px;position:relative;z-index:1;}
.cs-card h4{font-size:18px;margin:0 0 10px;position:relative;z-index:1;}
.cs-card p{color:var(--cs-muted);font-size:14.5px;line-height:1.65;margin:0;position:relative;z-index:1;}
.cs-card .n{position:absolute;top:22px;right:26px;font-family:var(--tp-ff-heading),serif;font-size:34px;color:var(--cs-border2);z-index:1;}
.cs-card .stat{font-family:var(--tp-ff-heading),serif;font-size:30px;color:var(--cs-blue);margin-bottom:4px;position:relative;z-index:1;}
/* problem cards (red accent) */
.cs-prob .cs-card{border-left:3px solid transparent;}
.cs-prob .cs-card:hover{border-left-color:var(--cs-red);}
.cs-prob .cs-card__ico{color:var(--cs-red);}

/* pillars (strategy) */
.cs-pillar{background:linear-gradient(160deg,var(--cs-panel2),var(--cs-panel));border:1px solid var(--cs-border);border-radius:22px;padding:36px 32px;transition:.45s;position:relative;overflow:hidden;}
.cs-pillar:hover{transform:translateY(-7px);border-color:var(--cs-brand);box-shadow:var(--cs-glow);}
.cs-pillar__ico{width:60px;height:60px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:24px;color:#fff;margin-bottom:22px;}
.cs-pillar h3{font-size:21px;margin:0 0 12px;}
.cs-pillar p{color:var(--cs-muted);font-size:15px;line-height:1.7;margin:0;}

/* grouped two-column blocks */
.cs-groups{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.cs-group{background:var(--cs-panel);border:1px solid var(--cs-border);border-radius:22px;padding:34px;}
.cs-group__h{display:flex;align-items:center;gap:14px;margin-bottom:24px;}
.cs-group__h .ic{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;color:#fff;}
.cs-group__h h3{font-size:20px;margin:0;}
.cs-list{list-style:none;margin:0;padding:0;}
.cs-list li{position:relative;padding:14px 0 14px 30px;border-top:1px solid var(--cs-border);color:var(--cs-muted);font-size:15px;line-height:1.6;}
.cs-list li:first-child{border-top:0;}
.cs-list li strong{color:var(--cs-ink);font-weight:600;}
.cs-list li::before{content:"";position:absolute;left:0;top:20px;width:9px;height:9px;border-radius:50%;background:var(--cs-brand);box-shadow:0 0 0 4px rgba(37,99,235,.14);}

/* ===== DESIGN PROCESS STEPPER ===== */
.cs-proc__rail{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:34px;}
.cs-proc__tab{flex:1;min-width:140px;text-align:left;background:var(--cs-panel);border:1px solid var(--cs-border);border-radius:16px;padding:18px;cursor:pointer;transition:.4s;color:var(--cs-ink);}
.cs-proc__tab:hover{transform:translateY(-4px);border-color:var(--cs-border2);}
.cs-proc__tab.on{background:linear-gradient(150deg,rgba(37,99,235,.2),rgba(9,137,255,.08));border-color:var(--cs-brand);}
.cs-proc__tab .s{font-family:var(--tp-ff-heading),serif;font-size:15px;color:var(--cs-blue);}
.cs-proc__tab .t{font-weight:600;font-size:17px;margin-top:6px;}
.cs-proc__tab .bar{height:3px;border-radius:3px;background:var(--cs-border);margin-top:12px;overflow:hidden;}
.cs-proc__tab .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cs-brand),var(--cs-green));transition:width .5s;}
.cs-proc__tab.on .bar i{width:100%;}
.cs-proc__body{background:var(--cs-panel);border:1px solid var(--cs-border);border-radius:22px;padding:44px;display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:center;min-height:210px;}
.cs-proc__big{font-family:var(--tp-ff-heading),serif;font-size:110px;line-height:.8;color:transparent;-webkit-text-stroke:1.5px var(--cs-border2);}
.cs-proc__pane{display:none;animation:csFade .5s ease;}
.cs-proc__pane.on{display:block;}
.cs-proc__pane h3{font-size:26px;margin:0 0 10px;}
.cs-proc__pane p{color:var(--cs-muted);font-size:16px;margin:0 0 18px;}
.cs-chips{display:flex;flex-wrap:wrap;gap:9px;}
.cs-chips span{font-size:13px;padding:8px 15px;border-radius:30px;background:var(--cs-panel2);border:1px solid var(--cs-border);}
@keyframes csFade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ===== ONBOARDING / HORIZONTAL FLOW (from ps-) ===== */
.cs-onb{background:linear-gradient(150deg,var(--cs-panel2),var(--cs-panel));border:1px solid var(--cs-border);border-radius:24px;padding:40px;}
.cs-onb__flow{display:flex;align-items:stretch;gap:0;position:relative;}
.cs-onb__step{flex:1;text-align:center;position:relative;padding:0 10px;}
.cs-onb__step:not(:last-child)::after{content:"";position:absolute;top:26px;left:60%;width:80%;height:2px;background:var(--cs-border);z-index:0;}
.cs-onb__step.done:not(:last-child)::after{background:linear-gradient(90deg,var(--cs-blue),var(--cs-magenta));}
.cs-onb__num{width:54px;height:54px;border-radius:50%;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px;background:var(--cs-bg2);border:1px solid var(--cs-border);color:var(--cs-muted);position:relative;z-index:1;transition:.5s;}
.cs-onb__step.done .cs-onb__num{background:linear-gradient(135deg,var(--cs-brand),var(--cs-blue));border-color:transparent;color:#fff;box-shadow:var(--cs-glow);transform:scale(1.06);}
.cs-onb__t{font-weight:600;font-size:15px;margin-bottom:4px;}
.cs-onb__c{font-size:12.5px;color:var(--cs-muted);}

/* ===== AUDIENCE ===== */
.cs-aud{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.cs-aud__c{background:linear-gradient(160deg,var(--cs-panel2),var(--cs-panel));border:1px solid var(--cs-border);border-radius:20px;padding:34px 30px;text-align:center;transition:.45s;}
.cs-aud__c:hover{transform:translateY(-6px);border-color:var(--cs-brand);box-shadow:var(--cs-glow);}
.cs-aud__c .ic{width:66px;height:66px;border-radius:50%;margin:0 auto 18px;display:flex;align-items:center;justify-content:center;font-size:26px;color:#fff;background:linear-gradient(135deg,var(--cs-brand),var(--cs-blue));}
.cs-aud__c h4{font-size:20px;margin:0 0 6px;}
.cs-aud__c p{color:var(--cs-muted);font-size:14px;margin:0;}

/* ===== TABS (shared for persona / empathy / journey) ===== */
.cs-tabs{display:inline-flex;flex-wrap:wrap;gap:8px;background:var(--cs-panel);border:1px solid var(--cs-border);border-radius:50px;padding:6px;margin-bottom:34px;}
.cs-tabs button{border:0;background:transparent;color:var(--cs-muted);font-weight:600;font-size:14.5px;padding:11px 24px;border-radius:50px;cursor:pointer;transition:.35s;}
.cs-tabs button.on{color:#fff;background:linear-gradient(120deg,var(--cs-brand),var(--cs-blue));box-shadow:var(--cs-glow);}

/* ===== PERSONA (profile UI) ===== */
.cs-pp__chips{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:34px;}
.cs-pp__chip{display:flex;align-items:center;gap:12px;background:var(--cs-panel);border:1px solid var(--cs-border);border-radius:50px;padding:7px 22px 7px 7px;cursor:pointer;transition:.4s;}
.cs-pp__chip:hover{border-color:var(--cs-border2);transform:translateY(-2px);}
.cs-pp__chip.on{border-color:transparent;box-shadow:var(--cs-glow);}
.cs-pp__chip .av{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--tp-ff-heading),serif;font-size:20px;color:#fff;flex-shrink:0;}
.cs-pp__chip .nm{font-weight:700;font-size:15px;line-height:1.15;}
.cs-pp__chip .rl{font-size:12px;color:var(--cs-muted);}
.cs-pp__chip.on .rl{color:rgba(255,255,255,.75);}
.cs-pp__stage{animation:csFade .5s ease;}
.cs-pp__hero{position:relative;border:1px solid var(--cs-border);border-radius:24px;overflow:hidden;background:var(--cs-panel);margin-bottom:20px;}
.cs-pp__banner{height:110px;position:relative;}
.cs-pp__banner::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 160% at 15% 130%,rgba(255,255,255,.28),transparent 55%);}
.cs-pp__hero-in{padding:0 34px 30px;position:relative;}
.cs-pp__topline{display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:flex-end;}
.cs-pp__avatar{width:120px;height:120px;border-radius:30px;display:flex;align-items:center;justify-content:center;font-family:var(--tp-ff-heading),serif;font-size:50px;color:#fff;margin-top:-58px;border:4px solid var(--cs-bg);box-shadow:0 22px 44px -18px rgba(0,0,0,.7);}
.cs-pp__name{font-size:30px;margin:0;line-height:1;}
.cs-pp__rolerow{display:flex;align-items:center;gap:14px;margin-top:12px;flex-wrap:wrap;}
.cs-pp__role{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:#fff;padding:6px 15px;border-radius:30px;}
.cs-pp__fact{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;color:var(--cs-muted);}
.cs-pp__fact svg{width:15px;height:15px;color:var(--cs-blue);}
.cs-pp__quote{position:relative;margin-top:24px;padding:24px 28px 24px 62px;background:var(--cs-bg2);border:1px solid var(--cs-border);border-radius:18px;font-family:var(--tp-ff-heading),serif;font-size:18px;line-height:1.55;color:var(--cs-ink);font-style:italic;}
.cs-pp__quote svg{position:absolute;left:22px;top:22px;width:26px;height:26px;color:var(--cs-brand);opacity:.6;}
.cs-pp__tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px;}
.cs-pp__tag{background:var(--cs-panel2);border:1px solid var(--cs-border);border-radius:11px;padding:8px 14px;}
.cs-pp__tag .k{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--cs-muted);}
.cs-pp__tag .v{font-size:13.5px;font-weight:600;margin-top:2px;}
.cs-pp__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.cs-pp__insight{background:var(--cs-panel);border:1px solid var(--cs-border);border-top:3px solid var(--acc,var(--cs-brand));border-radius:16px;padding:26px;transition:.4s;}
.cs-pp__insight:hover{transform:translateY(-5px);border-color:var(--cs-border2);}
.cs-pp__insight h4{font-size:15.5px;margin:0 0 16px;display:flex;align-items:center;gap:12px;}
.cs-pp__insight .ic{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;color:#fff;background:var(--acc,var(--cs-brand));}
.cs-pp__insight .ic svg{width:18px;height:18px;}
.cs-pp__insight ul{list-style:none;margin:0;padding:0;}
.cs-pp__insight li{position:relative;padding:9px 0 9px 25px;color:var(--cs-muted);font-size:14px;line-height:1.55;}
.cs-pp__insight li svg{position:absolute;left:0;top:11px;width:15px;height:15px;color:var(--acc,var(--cs-brand));}
.cs-pp__about{grid-column:1/-1;background:linear-gradient(150deg,var(--cs-panel2),var(--cs-panel));border:1px solid var(--cs-border);border-radius:16px;padding:26px;display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center;}
.cs-pp__about .ic{width:54px;height:54px;border-radius:15px;background:linear-gradient(135deg,var(--cs-brand),var(--cs-blue));display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;}
.cs-pp__about .ic svg{width:24px;height:24px;}
.cs-pp__about p{margin:0;color:var(--cs-muted);font-size:15px;line-height:1.7;}

/* ===== EMPATHY MAP ===== */
.cs-emp{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.cs-emp__q{background:var(--cs-panel);border:1px solid var(--cs-border);border-radius:18px;padding:26px;transition:.4s;}
.cs-emp__q:hover{transform:translateY(-4px);border-color:var(--cs-border2);}
.cs-emp__q h4{font-size:16px;margin:0 0 14px;display:flex;align-items:center;gap:10px;}
.cs-emp__q .badge{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;}
.cs-emp__q ul{list-style:none;margin:0;padding:0;}
.cs-emp__q li{position:relative;padding:7px 0 7px 20px;color:var(--cs-muted);font-size:14px;line-height:1.5;}
.cs-emp__q li::before{content:"";position:absolute;left:0;top:14px;width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.5;}
.cs-emp__panel{display:none;}
.cs-emp__panel.on{display:block;animation:csFade .5s ease;}

/* ===== JOURNEY MAP ===== */
.cs-jr__panel{display:none;}
.cs-jr__panel.on{display:block;animation:csFade .5s ease;}
.cs-jr__stages{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:24px;}
.cs-jr__stage{background:var(--cs-panel);border:1px solid var(--cs-border);border-radius:12px;padding:12px 18px;cursor:pointer;font-weight:600;font-size:14px;color:var(--cs-muted);transition:.35s;display:flex;align-items:center;gap:10px;}
.cs-jr__stage .dot{width:10px;height:10px;border-radius:50%;background:var(--cs-border2);transition:.35s;}
.cs-jr__stage.on{color:#fff;border-color:var(--cs-brand);background:linear-gradient(120deg,rgba(37,99,235,.22),transparent);}
.cs-jr__stage.on .dot{background:var(--cs-brand);box-shadow:0 0 0 4px rgba(37,99,235,.2);}
.cs-jr__track{height:2px;background:var(--cs-border);border-radius:2px;margin:-14px 0 24px;position:relative;overflow:hidden;}
.cs-jr__track i{position:absolute;left:0;top:0;height:100%;background:linear-gradient(90deg,var(--cs-brand),var(--cs-green));transition:width .5s;}
.cs-jr__detail{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.cs-jr__cell{background:var(--cs-panel);border:1px solid var(--cs-border);border-radius:16px;padding:22px;}
.cs-jr__cell.wide{grid-column:span 3;background:linear-gradient(150deg,rgba(33,152,116,.12),var(--cs-panel));border-color:rgba(33,152,116,.3);}
.cs-jr__cell h5{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--cs-blue);margin:0 0 12px;}
.cs-jr__cell.wide h5{color:var(--cs-green);}
.cs-jr__cell ul{list-style:none;margin:0;padding:0;}
.cs-jr__cell li{position:relative;padding:6px 0 6px 18px;color:var(--cs-muted);font-size:13.5px;line-height:1.5;}
.cs-jr__cell li::before{content:"";position:absolute;left:0;top:13px;width:6px;height:6px;border-radius:50%;background:var(--cs-brand);}
.cs-jr__stagepane{display:none;}
.cs-jr__stagepane.on{display:block;animation:csFade .45s ease;}
.cs-jr__emotion{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14px;margin-top:2px;}

/* ===== USER FLOWS ===== */
.cs-flows{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.cs-flow{background:var(--cs-panel);border:1px solid var(--cs-border);border-radius:20px;padding:30px;}
.cs-flow__h{display:flex;align-items:center;gap:12px;margin-bottom:22px;}
.cs-flow__h .ic{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:18px;color:#fff;}
.cs-flow__h h4{margin:0;font-size:18px;}
.cs-step{position:relative;padding:0 0 22px 34px;}
.cs-step:last-child{padding-bottom:0;}
.cs-step::before{content:"";position:absolute;left:11px;top:6px;bottom:-6px;width:2px;background:linear-gradient(var(--cs-brand),transparent);}
.cs-step:last-child::before{display:none;}
.cs-step .num{position:absolute;left:0;top:0;width:24px;height:24px;border-radius:50%;background:var(--cs-panel2);border:1px solid var(--cs-brand);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--cs-blue);}
.cs-step p{margin:0;font-size:14.5px;color:var(--cs-ink);line-height:1.5;}

/* ===== INFORMATION ARCHITECTURE (module explorer) ===== */
.cs-iax__rootwrap{text-align:center;margin-bottom:8px;}
.cs-iax__root{display:inline-flex;align-items:center;gap:12px;background:linear-gradient(120deg,var(--cs-brand),var(--cs-blue));color:#fff;font-weight:700;padding:14px 28px;border-radius:14px;box-shadow:var(--cs-glow);}
.cs-iax__root svg{width:20px;height:20px;}
.cs-iax__stem{width:2px;height:34px;margin:0 auto;background:linear-gradient(var(--cs-brand),transparent);}
.cs-iax{display:grid;grid-template-columns:300px 1fr;gap:20px;background:var(--cs-panel);border:1px solid var(--cs-border);border-radius:24px;padding:20px;}
.cs-iax__menu{display:flex;flex-direction:column;gap:9px;}
.cs-iax__item{display:flex;align-items:center;gap:14px;padding:15px;border-radius:14px;border:1px solid var(--cs-border);background:var(--cs-bg2);cursor:pointer;transition:.35s;text-align:left;color:var(--cs-ink);}
.cs-iax__item:hover{border-color:var(--cs-border2);transform:translateX(3px);}
.cs-iax__item.on{background:linear-gradient(120deg,rgba(37,99,235,.22),transparent);border-color:var(--cs-brand);}
.cs-iax__item .ic{width:44px;height:44px;border-radius:12px;background:var(--cs-panel2);border:1px solid var(--cs-border);color:var(--cs-blue);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:.35s;}
.cs-iax__item .ic svg{width:19px;height:19px;}
.cs-iax__item.on .ic{background:linear-gradient(135deg,var(--cs-brand),var(--cs-blue));color:#fff;border-color:transparent;}
.cs-iax__item .tt{font-weight:600;font-size:15px;}
.cs-iax__item .ct{font-size:12px;color:var(--cs-muted);margin-top:2px;}
.cs-iax__item .go{margin-left:auto;opacity:0;transform:translateX(-6px);transition:.3s;color:var(--cs-brand);}
.cs-iax__item .go svg{width:16px;height:16px;}
.cs-iax__item.on .go{opacity:1;transform:none;}
.cs-iax__detail{background:var(--cs-bg2);border:1px solid var(--cs-border);border-radius:18px;padding:30px;min-height:340px;}
.cs-iax__pane{display:none;}
.cs-iax__pane.on{display:block;animation:csFade .45s ease;}
.cs-iax__dhead{display:flex;align-items:center;gap:16px;margin-bottom:8px;}
.cs-iax__dhead .ic{width:52px;height:52px;border-radius:14px;background:linear-gradient(135deg,var(--cs-brand),var(--cs-blue));color:#fff;display:flex;align-items:center;justify-content:center;}
.cs-iax__dhead .ic svg{width:24px;height:24px;}
.cs-iax__dhead h3{margin:0;font-size:22px;}
.cs-iax__desc{color:var(--cs-muted);font-size:14.5px;line-height:1.6;margin:0 0 24px;}
.cs-iax__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.cs-iax__cols.one{grid-template-columns:1fr;}
.cs-iax__col{background:var(--cs-panel);border:1px solid var(--cs-border);border-radius:14px;padding:20px;}
.cs-iax__col .role{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--cs-blue);margin-bottom:14px;display:flex;align-items:center;gap:9px;}
.cs-iax__col .role svg{width:15px;height:15px;}
.cs-iax__col ul{list-style:none;margin:0;padding:0;}
.cs-iax__col li{position:relative;padding:8px 0 8px 23px;font-size:13.5px;color:var(--cs-muted);line-height:1.5;}
.cs-iax__col li svg{position:absolute;left:0;top:10px;width:13px;height:13px;color:var(--cs-brand);}

/* ===== WIREFRAMES ===== */
.cs-wf__toggle{display:inline-flex;gap:6px;background:var(--cs-panel);border:1px solid var(--cs-border);border-radius:50px;padding:6px;margin-bottom:30px;flex-wrap:wrap;}
.cs-wf__toggle button{border:0;background:transparent;color:var(--cs-muted);font-weight:600;font-size:14px;padding:11px 26px;border-radius:50px;cursor:pointer;transition:.35s;}
.cs-wf__toggle button.on{color:#fff;background:linear-gradient(120deg,var(--cs-brand),var(--cs-blue));}
.cs-frame{background:#f4f5fb;border:1px solid var(--cs-border2);border-radius:22px;padding:26px;box-shadow:0 40px 90px -40px rgba(0,0,0,.75);position:relative;overflow:hidden;}
.cs-frame__bar{display:flex;gap:7px;margin-bottom:18px;}
.cs-frame__bar span{width:11px;height:11px;border-radius:50%;background:#d3d7e6;}
.cs-frame__bar span:nth-child(1){background:#ff5f57;}.cs-frame__bar span:nth-child(2){background:#febc2e;}.cs-frame__bar span:nth-child(3){background:#28c840;}
.cs-wf__img{display:none;}
.cs-wf__img.on{display:block;animation:csFade .5s ease;}
.cs-wf__img img{display:block;width:100%;height:auto;border-radius:10px;}

/* ===== DESIGN SYSTEM ===== */
.cs-ds{display:grid;grid-template-columns:1.1fr .9fr;gap:26px;}
.cs-ds__card{background:var(--cs-panel);border:1px solid var(--cs-border);border-radius:22px;padding:34px;}
.cs-ds__card h3{font-size:20px;margin:0 0 24px;display:flex;align-items:center;gap:10px;}
.cs-swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.cs-sw{border-radius:14px;overflow:hidden;border:1px solid var(--cs-border);transition:.4s;cursor:pointer;position:relative;}
.cs-sw:hover{transform:translateY(-5px) scale(1.03);box-shadow:0 16px 30px -14px rgba(0,0,0,.6);}
.cs-sw__chip{height:78px;position:relative;}
.cs-sw__copy{position:absolute;top:10px;right:10px;font-size:10px;background:rgba(0,0,0,.4);color:#fff;padding:4px 9px;border-radius:20px;opacity:0;transition:.3s;}
.cs-sw:hover .cs-sw__copy{opacity:1;}
.cs-sw.copied .cs-sw__copy{opacity:1;background:var(--cs-green);}
.cs-sw__meta{padding:10px 12px;background:var(--cs-bg2);}
.cs-sw__name{font-size:12.5px;font-weight:600;}
.cs-sw__hex{font-size:11px;color:var(--cs-muted);font-family:monospace;margin-top:2px;text-transform:uppercase;}
.cs-type__row{padding:16px 0;border-top:1px solid var(--cs-border);display:flex;align-items:baseline;justify-content:space-between;gap:16px;}
.cs-type__row:first-of-type{border-top:0;}
.cs-type__aa{font-family:'Manrope','DM Sans',sans-serif;color:var(--cs-ink);line-height:1;}
.cs-type__lbl{font-size:12.5px;color:var(--cs-muted);}
.cs-type__name{font-size:20px;font-weight:700;color:var(--cs-ink);font-family:'Manrope','DM Sans',sans-serif;margin-bottom:14px;}

/* ===== MOCKUPS ===== */
.cs-mock{background:linear-gradient(180deg,#eef1fb,#f7f8fd);border:1px solid var(--cs-border2);border-radius:26px;padding:20px;box-shadow:0 50px 100px -45px rgba(37,99,235,.6);}
.cs-mock img{display:block;width:100%;height:auto;border-radius:14px;}
.cs-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.cs-gallery.c2{grid-template-columns:repeat(2,1fr);}
.cs-gcard{background:linear-gradient(180deg,#eef1fb,#f7f8fd);border:1px solid var(--cs-border2);border-radius:20px;padding:14px;box-shadow:0 30px 70px -40px rgba(37,99,235,.5);transition:.45s;overflow:hidden;}
.cs-gcard:hover{transform:translateY(-8px);box-shadow:0 46px 90px -40px rgba(37,99,235,.75);}
.cs-gcard img{display:block;width:100%;height:auto;border-radius:12px;}

/* ===== LIGHTBOX (click to zoom final designs / hi-fi screens) ===== */
.cs-lb-img{cursor:zoom-in;position:relative;}
.cs-gcard,.cs-mock,.cs-frame{position:relative;}
.cs-lb-hint{position:absolute;top:12px;right:12px;z-index:3;width:38px;height:38px;border-radius:50%;
   display:flex;align-items:center;justify-content:center;background:rgba(15,18,32,.55);color:#fff;
   backdrop-filter:blur(6px);opacity:0;transform:scale(.85);transition:.35s;pointer-events:none;}
.cs-lb-hint svg{width:18px;height:18px;}
.cs-gcard:hover .cs-lb-hint,.cs-mock:hover .cs-lb-hint,.cs-frame:hover .cs-lb-hint,.mcx-slide:hover .cs-lb-hint{opacity:1;transform:scale(1);}
.mcx-slide .cs-lb-hint{top:14px;right:14px;}
.cs-lb{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;
   background:rgba(4,7,16,.9);backdrop-filter:blur(10px);padding:3vw;opacity:0;transition:opacity .3s;}
.cs-lb.on{display:flex;}
.cs-lb.show{opacity:1;}
.cs-lb__stage{position:relative;max-width:92vw;max-height:88vh;display:flex;align-items:center;justify-content:center;}
.cs-lb__img{max-width:92vw;max-height:82vh;width:auto;height:auto;border-radius:12px;box-shadow:0 40px 120px -30px rgba(0,0,0,.9);
   animation:csLbIn .35s cubic-bezier(.2,.7,.2,1);background:#fff;}
@keyframes csLbIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
.cs-lb__btn{position:absolute;top:50%;transform:translateY(-50%);width:56px;height:56px;border-radius:50%;border:1px solid rgba(255,255,255,.2);
   background:rgba(255,255,255,.08);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.3s;z-index:2;}
.cs-lb__btn:hover{background:var(--cs-brand,#2563EB);border-color:transparent;transform:translateY(-50%) scale(1.08);}
.cs-lb__btn svg{width:24px;height:24px;}
.cs-lb__btn.prev{left:-4px;} .cs-lb__btn.next{right:-4px;}
.cs-lb__close{position:fixed;top:22px;right:26px;width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.2);
   background:rgba(255,255,255,.08);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.3s;}
.cs-lb__close:hover{background:var(--cs-red,#E82D04);border-color:transparent;transform:rotate(90deg);}
.cs-lb__close svg{width:22px;height:22px;}
.cs-lb__count{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);color:#fff;font-size:14px;font-weight:600;
   letter-spacing:.08em;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);padding:8px 18px;border-radius:30px;}
@media (max-width:600px){.cs-lb__btn{width:44px;height:44px;} .cs-lb__btn.prev{left:2px;} .cs-lb__btn.next{right:2px;}}

/* ===== CLOSING ===== */
.cs-close{text-align:center;border:1px solid var(--cs-border);border-radius:28px;padding:70px 30px;background:radial-gradient(circle at 50% 0%,rgba(37,99,235,.2),transparent 60%),var(--cs-bg2);position:relative;overflow:hidden;}
.cs-close h2{font-size:clamp(28px,4vw,50px);margin:0 0 16px;}
.cs-close p{color:var(--cs-muted);max-width:540px;margin:0 auto 30px;font-size:16px;}
.cs-btn{display:inline-flex;align-items:center;gap:12px;background:var(--cs-primary);color:var(--cs-primary-ink);padding:17px 38px;border-radius:50px;font-weight:700;text-decoration:none;transition:.4s;box-shadow:0 18px 42px -16px rgba(23,73,222,.55);}
.cs-btn:hover{transform:translateY(-4px);color:var(--cs-primary-ink);box-shadow:0 26px 55px -14px rgba(23,73,222,.75);}
.cs-btn i{transition:transform .4s;}
.cs-btn:hover i{transform:translate(4px,-4px);}

/* ===== RESPONSIVE ===== */
@media (max-width:1024px){
   .cs-intro__grid,.cs-groups,.cs-ds{grid-template-columns:1fr;}
   .cs-cards.c4,.cs-stats{grid-template-columns:repeat(2,1fr);}
   .cs-cards.c3,.cs-aud,.cs-flows,.cs-gallery{grid-template-columns:1fr;}
   .cs-pp__grid{grid-template-columns:1fr;}
   .cs-iax{grid-template-columns:1fr;}
   .cs-iax__menu{flex-direction:row;overflow-x:auto;}
   .cs-iax__item{flex:0 0 auto;}
   .cs-iax__item .go{display:none;}
   .cs-jr__detail{grid-template-columns:1fr;}
   .cs-jr__cell.wide{grid-column:auto;}
   .cs-onb__flow{flex-direction:column;gap:22px;}
   .cs-onb__step:not(:last-child)::after{display:none;}
}
@media (max-width:600px){
   .cs-section{padding:64px 0;}
   .cs-cards.c4,.cs-cards.c2,.cs-emp,.cs-swatches,.cs-stats{grid-template-columns:1fr;}
   .cs-iax__cols{grid-template-columns:1fr;}
   .cs-proc__body{grid-template-columns:1fr;padding:28px;text-align:center;}
   .cs-proc__big{display:none;}
   .cs-pp__topline{grid-template-columns:1fr;}
   .cs-pp__avatar{margin-top:-58px;}
   .cs-pp__about{grid-template-columns:1fr;text-align:center;}
   .cs-pp__about .ic{margin:0 auto;}
}

/* ---------- LIGHT THEME (site toggle sets html[tp-theme="tp-theme-light"]) ---------- */
html[tp-theme="tp-theme-light"] .cs-study{
   --cs-bg:#f4f7fc; --cs-bg2:#eaeef7;
   --cs-panel:rgba(20,32,68,.035); --cs-panel2:rgba(20,32,68,.06);
   --cs-border:rgba(20,32,68,.12); --cs-border2:rgba(20,32,68,.22);
   --cs-ink:#141a2e; --cs-muted:#586079;
   --cs-glow:0 20px 55px -24px rgba(37,99,235,.35);
   --cs-grid:rgba(40,52,96,0.06);
   --cs-g1:rgba(139,123,255,.14); --cs-g2:rgba(34,211,238,.12); --cs-gc:rgba(139,123,255,.12);
}
html[tp-theme="tp-theme-light"] .cs-study .cs-stat .num{
   background:linear-gradient(120deg,var(--cs-ink),var(--cs-blue));
   -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}

/* ---------- tighten gap before prev/next nav + trim closing CTA ---------- */
.porfolio-details__navigation-wrap{margin-top:40px !important;}
.cs-study .cs-section:has(.cs-close){padding-bottom:40px;}

/* ---------- simple, compact prev / next navigation (all detail pages) ---------- */
.porfolio-details__navigation-wrap{
   --nav-panel:#ffffff; --nav-border:rgba(20,32,68,.14); --nav-ink:#141a2e; --nav-mut:#586079; --nav-acc:#1749DE;
}
.porfolio-details__navigation-wrap .row{align-items:center;}
.porfolio-details__navigation-content{
   position:relative; display:flex; align-items:center; gap:12px; width:-moz-fit-content; width:fit-content; max-width:100%;
   padding:13px 26px; border-radius:999px;
   background:var(--nav-panel); border:1px solid var(--nav-border);
   transition:background .25s, border-color .25s;
}
.porfolio-details__navigation-content:not(.next){margin-right:auto;}
.porfolio-details__navigation-content.next{margin-left:auto; flex-direction:row-reverse; text-align:right;}
.porfolio-details__navigation-content a{
   display:inline-flex; align-items:center; justify-content:center;
   margin:0 !important; padding:0; letter-spacing:0;
   text-decoration:none !important; background-image:none !important; background:none;
}
.porfolio-details__navigation-content a:hover,
.porfolio-details__navigation-content a:focus{text-decoration:none !important; background-image:none !important; background-size:0 0 !important;}
.porfolio-details__navigation-content a span{display:none;}
/* whole pill clickable via the arrow link */
.porfolio-details__navigation-content a::after{content:""; position:absolute; inset:0; z-index:2;}
.porfolio-details__navigation-content a i{font-size:14px; line-height:1; color:var(--nav-mut); transition:color .25s;
   background:none !important; border:0 !important; width:auto; height:auto; padding:0; border-radius:0; box-shadow:none;}
.porfolio-details__navigation-content h4{
   position:relative; z-index:1; display:flex; align-items:center; margin:0;
   font-size:15.5px; line-height:1.3; color:var(--nav-ink); font-weight:600; max-width:260px; transition:color .25s;
   text-transform:none; letter-spacing:0;}
.porfolio-details__navigation-content:hover{
   background:linear-gradient(135deg,#436FF5,#1749DE); border-color:transparent;
   box-shadow:0 12px 26px -12px rgba(23,73,222,.7);}
.porfolio-details__navigation-content:hover h4,
.porfolio-details__navigation-content:hover a i{color:#ffffff;}
html[tp-theme="tp-theme-dark"] .porfolio-details__navigation-wrap{--nav-panel:rgba(255,255,255,.045); --nav-border:rgba(255,255,255,.13); --nav-ink:#f2f4fb; --nav-mut:#96a0b6;}
html[tp-theme="tp-theme-light"] .porfolio-details__navigation-content a i{background:rgba(20,32,68,.05);}

@media (prefers-reduced-motion:reduce){.porfolio-details__navigation-content::before{animation:none;}}
@media (max-width:767px){
   .porfolio-details__navigation-content{margin:0 auto 14px !important;}
   .porfolio-details__navigation-bar{margin:10px 0;}
}

/* ===== right-side section navigation (scroll-spy): lines only, topic labels on hover ===== */
.sec-nav{position:fixed; right:20px; top:50%; transform:translateY(-50%); z-index:70;
   display:flex; flex-direction:column; gap:15px; align-items:flex-end; pointer-events:none;
   --sn-txt:#eef2f6; --sn-line:rgba(232,238,248,.34); --sn-acc:#436FF5;}
html[tp-theme="tp-theme-light"] .sec-nav{--sn-txt:#33415C; --sn-line:rgba(20,32,68,.30); --sn-acc:#436FF5;}
.sec-nav .sn-item{display:flex; align-items:center; justify-content:flex-end; gap:12px; text-decoration:none;
   cursor:pointer; pointer-events:auto; padding:3px 0; line-height:1;}
.sec-nav .sn-lbl{font-family:var(--tp-ff-dmsans,'Inter',sans-serif); font-size:12.5px; font-weight:600;
   letter-spacing:.2px; white-space:nowrap; color:var(--sn-txt); opacity:0; transform:translateX(6px);
   transition:opacity .3s ease, transform .3s ease, color .3s;}
.sec-nav .sn-line{width:20px; height:2px; border-radius:2px; background:var(--sn-line);
   transition:width .3s ease, background .3s ease; flex:0 0 auto;}
.sec-nav:hover .sn-lbl{opacity:.62; transform:none;}
.sec-nav .sn-item:hover .sn-lbl{opacity:1;}
.sec-nav .sn-item:hover .sn-line{width:30px; background:var(--sn-txt);}
.sec-nav .sn-item.active .sn-line{width:34px; background:var(--sn-acc);}
.sec-nav:hover .sn-item.active .sn-lbl{opacity:1;}
@media (max-width:1024px){ .sec-nav{display:none;} }
@media (prefers-reduced-motion:reduce){ .sec-nav .sn-lbl,.sec-nav .sn-line{transition:none;} }

/* ===== csb — dark rounded case-study banner ===== */
.csb{padding:0 14px;}
.csb-card{position:relative; z-index:0; overflow:hidden; border-radius:0 0 56px 56px;
   background:
      radial-gradient(90% 70% at 12% 0%, rgba(255,255,255,.22), transparent 55%),
      radial-gradient(rgba(255,255,255,.14) 1.2px, transparent 1.4px) 0 0/18px 18px,
      linear-gradient(155deg, color-mix(in srgb, var(--pb, #14161F) 90%, #fff), color-mix(in srgb, var(--pb, #14161F) 55%, #000));
   max-width:1240px; margin:0 auto; padding:138px 26px 96px; text-align:center;
   box-shadow:0 34px 80px -42px rgba(8,10,18,.75);}
/* layered glows + faint signature dot grid */
.csb-card::before{content:""; position:absolute; inset:0; pointer-events:none;
   background:
      radial-gradient(460px 320px at 92% 112%, rgba(255,255,255,.045), transparent 72%),
      radial-gradient(circle, rgba(255,255,255,.075) 1px, transparent 1.3px);
   background-size:auto, 26px 26px;}
/* film grain, tucked under the text */
.csb-card::after{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.5; mix-blend-mode:overlay;
   background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/></svg>");}
.csb-card > *{position:relative;}
.csb-kick{display:inline-flex; align-items:center; gap:16px;
   font-family:ui-monospace,'JetBrains Mono',SFMono-Regular,Menlo,monospace; font-size:12px;
   letter-spacing:.34em; text-transform:uppercase; color:rgba(255,255,255,.52);}
.csb-kick::before, .csb-kick::after{content:""; width:36px; height:1px;
   background:linear-gradient(90deg, transparent, rgba(255,255,255,.65));}
.csb-kick::after{transform:scaleX(-1);}
.csb-name{margin:20px 0 0; font-family:'Source Sans 3',-apple-system,sans-serif; font-weight:800;
   font-size:clamp(46px,7.2vw,96px); line-height:.95; letter-spacing:.005em; color:#fff; text-transform:uppercase;}
.csb-sub{font-family:'Caveat',cursive; font-weight:700; font-size:clamp(32px,4.4vw,58px); line-height:1.02;
   color:#fff; margin-top:4px; transform:rotate(-1.5deg);}
.csb-desc{max-width:560px; margin:30px auto 0; font-family:'Source Sans 3',-apple-system,sans-serif;
   font-size:16.5px; line-height:1.65; color:rgba(255,255,255,.78);}
.csb-desc strong{color:#fff; font-weight:700;}
.csb-btn{display:inline-flex; align-items:center; gap:8px; margin-top:30px; padding:12px 24px; border-radius:999px;
   border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.05); color:#fff; text-decoration:none;
   font:600 14.5px/1 'Source Sans 3',-apple-system,sans-serif;
   transition:background .25s, border-color .25s, transform .25s, box-shadow .25s;}
.csb-btn:hover{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.55); color:#fff; transform:translateY(-2px);
   box-shadow:0 14px 38px -12px color-mix(in srgb, var(--csb-acc,#436FF5) 60%, transparent);}
/* staggered entrance */
@keyframes csbIn{from{opacity:0; transform:translateY(26px);} to{opacity:1; transform:none;}}
@keyframes csbInRot{from{opacity:0; transform:translateY(26px) rotate(-1.5deg);} to{opacity:1; transform:rotate(-1.5deg);}}
.csb-kick,.csb-name,.csb-desc,.csb-btn{animation:csbIn .85s cubic-bezier(.2,.7,.2,1) both;}
.csb-sub{animation:csbInRot .85s cubic-bezier(.2,.7,.2,1) both; animation-delay:.16s;}
.csb-name{animation-delay:.08s;}
.csb-desc{animation-delay:.26s;}
.csb-btn{animation-delay:.34s;}
@media (prefers-reduced-motion:reduce){
   .csb-kick,.csb-name,.csb-sub,.csb-desc,.csb-btn{animation:none;}
}
@media (max-width:640px){
   .csb{padding:0 8px;}
   .csb-card{border-radius:0 0 34px 34px; padding:112px 18px 64px;}
}

/* ============================================================
   LIGHT EDITORIAL SIMPLIFICATION — clean, calm case studies
   (patterns removed, white cards, ghost section numbers,
   contrast fixes for white-on-light text/icons)
   ============================================================ */
html[tp-theme="tp-theme-light"] .cs-study{
   background:#ffffff;
   --cs-bg:#ffffff; --cs-bg2:#ffffff;
   --cs-panel:#ffffff; --cs-panel2:#F7F9FD;
   --cs-border:rgba(20,32,68,.11); --cs-border2:rgba(20,32,68,.2);
   --cs-ink:#1a1a1a; --cs-muted:#55617A;
   --cs-glow:0 18px 40px -20px rgba(67,111,245,.25);
   counter-reset:cssec;
}
html[tp-theme="tp-theme-light"] .porfolio-details__overview-wrapper:has(.cs-study){background:#ffffff !important;}
/* no background patterns or blurred orbs */
html[tp-theme="tp-theme-light"] .cs-study::before{display:none;}
html[tp-theme="tp-theme-light"] .cs-orb{display:none;}
/* calmer section rhythm + hairline separators */
html[tp-theme="tp-theme-light"] .cs-section{padding:88px 0;}
html[tp-theme="tp-theme-light"] .cs-section.tight{padding:66px 0;}
html[tp-theme="tp-theme-light"] .cs-section + .cs-section{border-top:1px solid rgba(20,32,68,.07);}
html[tp-theme="tp-theme-light"] .cs-intro{border-top:0;}
/* ghost section numbers, echoing the Work page heads */
html[tp-theme="tp-theme-light"] .cs-section .cs-head{position:relative;}
html[tp-theme="tp-theme-light"] .cs-section .cs-head::before{
   counter-increment:cssec; content:counter(cssec,decimal-leading-zero);
   position:absolute; top:-40px; left:-8px; z-index:-1; pointer-events:none;
   font:800 96px/1 'Source Sans 3',-apple-system,sans-serif; letter-spacing:-.02em;
   color:transparent; -webkit-text-stroke:1.5px rgba(67,111,245,.22);}
/* white cards with hairlines instead of grey fills */
html[tp-theme="tp-theme-light"] .cs-note,
html[tp-theme="tp-theme-light"] .cs-card,
html[tp-theme="tp-theme-light"] .cs-stat,
html[tp-theme="tp-theme-light"] .cs-meta__i{background:#fff; box-shadow:0 1px 2px rgba(15,23,42,.05);}
html[tp-theme="tp-theme-light"] .cs-note:hover,
html[tp-theme="tp-theme-light"] .cs-card:hover,
html[tp-theme="tp-theme-light"] .cs-stat:hover,
html[tp-theme="tp-theme-light"] .cs-meta__i:hover{border-color:rgba(67,111,245,.5);
   box-shadow:0 18px 40px -20px rgba(67,111,245,.28);}
/* drop the decorative glow circles inside cards — simple */
html[tp-theme="tp-theme-light"] .cs-card::after,
html[tp-theme="tp-theme-light"] .cs-stat::after{display:none;}
/* stat numbers: solid brand gradient (old one faded to white) */
html[tp-theme="tp-theme-light"] .cs-stat .num{
   background:linear-gradient(120deg,#1749DE,#436FF5);
   -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;}
/* --- contrast fixes: white text/icons that sat on light fills --- */
html[tp-theme="tp-theme-light"] .cs-jr__stage.on{
   background:linear-gradient(160deg,#5b82ff 0%,#2f5ce0 90%); border-color:transparent; color:#fff;
   box-shadow:0 10px 22px -9px rgba(23,73,222,.5);}
html[tp-theme="tp-theme-light"] .cs-jr__stage.on .dot{background:#fff; box-shadow:0 0 0 4px rgba(255,255,255,.25);}
html[tp-theme="tp-theme-light"] .cs-emp__q .badge{background:linear-gradient(135deg,#2563EB,#0989FF) !important; color:#fff;}
html[tp-theme="tp-theme-light"] .cs-flow__h .ic{background:linear-gradient(135deg,#2563EB,#0989FF) !important; color:#fff;}
html[tp-theme="tp-theme-light"] .cs-aud__c .ic{background:linear-gradient(135deg,#2563EB,#0989FF);}

/* ============================================================
   INFOGRAPHIC COMPONENTS (product case studies)
   dcx = decision forks · gmx = goal->metric pills
   wfx = before/after wireframes · bpx = solution blueprint
   ============================================================ */
/* ---- decision fork cards ---- */
.dcx{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:44px;}
.dcx-item{background:var(--cs-panel); border:1px solid var(--cs-border); border-radius:20px; overflow:hidden;
   box-shadow:0 1px 2px rgba(15,23,42,.05); transition:.4s;}
.dcx-item:hover{border-color:rgba(67,111,245,.5); box-shadow:0 18px 40px -20px rgba(67,111,245,.28);}
.dcx-h{display:flex; align-items:center; gap:14px; padding:18px 24px; border-bottom:1px dashed var(--cs-border);}
.dcx-h .num{font-family:var(--tp-ff-heading),serif; font-size:24px; line-height:1; color:var(--cs-blue);}
.dcx-h h4{margin:0; font-size:17px;}
.dcx-body{display:grid; grid-template-columns:1fr 1fr; position:relative;}
.dcx-side{padding:20px 22px 22px;}
.dcx-side.a{border-right:1px dashed var(--cs-border);}
.dcx-side.b{background:rgba(67,111,245,.05);}
.dcx-tag{display:inline-flex; align-items:center; gap:7px; font-size:10.5px; letter-spacing:.12em;
   text-transform:uppercase; font-weight:700; padding:5px 11px; border-radius:999px; margin-bottom:12px;}
.dcx-side.a .dcx-tag{background:rgba(20,32,68,.07); color:#6B7590;}
.dcx-side.b .dcx-tag{background:linear-gradient(160deg,#5b82ff,#2f5ce0); color:#fff;}
.dcx-side p{margin:0; font-size:13.5px; line-height:1.6; color:var(--cs-muted);}
.dcx-arrow{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:32px; height:32px;
   border-radius:50%; background:#fff; border:1px solid var(--cs-border); display:flex; align-items:center;
   justify-content:center; color:var(--cs-blue); font-size:12px; z-index:2; box-shadow:0 4px 10px -4px rgba(15,23,42,.25);}
.dcx-t{display:flex; gap:10px; align-items:flex-start; padding:13px 22px; border-top:1px dashed var(--cs-border);
   font-size:13px; line-height:1.55; color:var(--cs-muted); background:rgba(255,197,66,.08);}
.dcx-t i{color:#B7791F; margin-top:3px; font-size:12px;}
.dcx-t strong{color:var(--cs-ink);}
@media (max-width:900px){ .dcx{grid-template-columns:1fr;} }
@media (max-width:640px){ .dcx-body{grid-template-columns:1fr;} .dcx-side.a{border-right:0; border-bottom:1px dashed var(--cs-border);}
   .dcx-arrow{transform:translate(-50%,-50%) rotate(90deg);} }
/* ---- goal -> metric connector ---- */
.gmx{margin-top:14px;}
.gmx-line{display:block; width:2px; height:16px; margin:0 0 6px 14px;
   background:repeating-linear-gradient(to bottom, var(--cs-blue) 0 3px, transparent 3px 7px);}
.gmx-pill{display:inline-flex; align-items:flex-start; gap:8px; padding:9px 13px;
   border:1.5px dashed rgba(67,111,245,.55); border-radius:12px; font-size:12.5px; font-weight:700;
   line-height:1.4; color:var(--cs-blue); background:rgba(67,111,245,.05);}
.gmx-pill i{margin-top:2px; font-size:11px;}
/* ---- before / after wireframe infographic ---- */
.wfx{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:44px;}
@media (max-width:900px){ .wfx{grid-template-columns:1fr;} }
.wfx-item{border:1px solid var(--cs-border); border-radius:20px; overflow:hidden; background:var(--cs-panel);
   box-shadow:0 1px 2px rgba(15,23,42,.05);}
.wfx-scr{padding:20px; background:#F2F5FA; border-bottom:1px solid var(--cs-border);}
.wfx-win{background:#fff; border:1px solid #E2E8F4; border-radius:12px; padding:14px; display:flex;
   flex-direction:column; gap:10px; min-height:210px; position:relative; overflow:hidden;}
.wfx-top{display:flex; gap:6px; margin-bottom:2px;}
.wfx-top i{width:8px; height:8px; border-radius:50%; background:#E2E8F4; display:block;}
.wfx-row{display:flex; gap:10px; align-items:stretch;}
.wfx-blk{background:#E9EDF6; border-radius:6px; height:10px; flex:1; align-self:center;}
.wfx-blk.s{max-width:38%;}
.wfx-chart{flex:1.4; display:flex; align-items:flex-end; gap:6px; height:84px; background:#F0F3FA;
   border-radius:10px; padding:10px;}
.wfx-chart span{flex:1; background:#C9D5EF; border-radius:3px 3px 0 0; display:block;}
.wfx-donut{width:84px; height:84px; flex:0 0 auto; border-radius:50%;
   background:conic-gradient(#C9D5EF 0 62%, #E9EDF6 62% 86%, #DDE4F2 86% 100%); position:relative;}
.wfx-donut::after{content:""; position:absolute; inset:20px; background:#fff; border-radius:50%;}
.wfx-q{display:flex; align-items:center; gap:9px; background:#fff; border:1px solid #E9EDF6;
   border-left:3px solid #436FF5; border-radius:9px; padding:8px 11px;}
.wfx-q .d{width:8px; height:8px; border-radius:50%; background:#436FF5; flex:0 0 auto;}
.wfx-q.warn .d{background:#F59E0B;} .wfx-q.warn{border-left-color:#F59E0B;}
.wfx-q.ok .d{background:#16A34A;} .wfx-q.ok{border-left-color:#16A34A;}
.wfx-q .t{height:8px; border-radius:4px; background:#E9EDF6; flex:1;}
.wfx-q .p{height:16px; width:52px; border-radius:8px; background:linear-gradient(160deg,#5b82ff,#2f5ce0); flex:0 0 auto;}
.wfx-mini{display:flex; gap:10px;}
.wfx-mini .wfx-chart{height:52px; flex:1;}
.wfx-cap{padding:16px 22px 18px;}
.wfx-cap-tag{display:inline-flex; align-items:center; gap:7px; font-size:10.5px; letter-spacing:.12em;
   text-transform:uppercase; font-weight:700; padding:5px 11px; border-radius:999px; margin-bottom:10px;}
.wfx-item.bad .wfx-cap-tag{background:rgba(232,45,4,.09); color:#C2410C;}
.wfx-item.good .wfx-cap-tag{background:rgba(22,163,74,.1); color:#15803D;}
.wfx-cap h3{font-size:19px; margin:0 0 8px;}
.wfx-cap p{margin:0; font-size:14px; line-height:1.65; color:var(--cs-muted);}
/* ---- solution blueprint diagram ---- */
.bpx{max-width:720px; margin:48px auto 0; text-align:center;}
.bpx-row{display:flex; justify-content:center; gap:14px; flex-wrap:wrap;}
.bpx-chip{display:inline-flex; align-items:center; gap:9px; padding:11px 18px; border-radius:12px;
   background:var(--cs-panel); border:1px solid var(--cs-border); font-weight:600; font-size:14px; color:var(--cs-ink);
   box-shadow:0 1px 2px rgba(15,23,42,.05);}
.bpx-chip i{color:var(--cs-blue); font-size:13px;}
.bpx-link{width:2px; height:26px; margin:6px auto;
   background:repeating-linear-gradient(to bottom, rgba(67,111,245,.6) 0 3px, transparent 3px 7px);}
.bpx-core{display:inline-flex; align-items:center; gap:10px; padding:15px 26px; border-radius:14px;
   background:linear-gradient(160deg,#5b82ff,#2f5ce0); color:#fff; font-weight:700; font-size:15.5px;
   box-shadow:0 14px 30px -12px rgba(23,73,222,.55);}
.bpx-core i{font-size:14px;}
.bpx-roles .bpx-chip{border-style:dashed;}

/* ---- gallery / mock captions (moved from inline) ---- */
.cs-gcard{display:flex;flex-direction:column;overflow:hidden;}
.cs-gcard > img{width:100%;display:block;}
.cs-gcap{padding:16px 18px 18px;}
.cs-gcap b{display:block;color:var(--cs-ink);font-size:15.5px;font-weight:600;margin-bottom:4px;}
.cs-gcap span{color:var(--cs-muted);font-size:13.5px;line-height:1.5;}
.cs-cap{text-align:center;color:var(--cs-muted);font-size:14px;margin:16px auto 0;max-width:640px;}

/* ---- rsx : unboxed editorial stat columns ---- */
.rsx{display:grid; grid-template-columns:repeat(3,1fr); margin-top:44px;
   border-top:1px solid var(--cs-border); border-bottom:1px solid var(--cs-border);}
.rsx-i{padding:32px 28px;}
.rsx-i + .rsx-i{border-left:1px solid var(--cs-border);}
.rsx-i b{display:block; font-family:'Source Sans 3',-apple-system,sans-serif; font-weight:800; font-size:54px; line-height:1;
   background:linear-gradient(120deg,#1749DE,#436FF5); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;}
.rsx-i span{display:block; margin-top:10px; font-size:14.5px; line-height:1.55; color:var(--cs-muted);}
@media (max-width:760px){ .rsx{grid-template-columns:1fr;} .rsx-i + .rsx-i{border-left:0; border-top:1px solid var(--cs-border);} }

/* ---- inx : key-insight banner ---- */
.inx{margin-top:44px; padding:36px 40px; border-radius:20px; position:relative; overflow:hidden;
   background:linear-gradient(135deg,rgba(67,111,245,.09),rgba(67,111,245,.02));
   border:1px solid rgba(67,111,245,.28);}
.inx::before{content:"\201C"; position:absolute; top:-34px; right:22px; font:800 190px/1 'Source Sans 3',serif;
   color:rgba(67,111,245,.1); pointer-events:none;}
.inx-k{display:inline-flex; align-items:center; gap:8px; font-family:ui-monospace,'JetBrains Mono',Menlo,monospace;
   font-size:11px; letter-spacing:.22em; text-transform:uppercase; font-weight:700; color:#1749DE;}
.inx-k::before{content:""; width:26px; height:2px; background:#436FF5; border-radius:2px;}
.inx-q{margin:14px 0 0; font-size:clamp(22px,2.6vw,30px); line-height:1.35; font-weight:600; color:var(--cs-ink); max-width:760px;}
.inx-q em{font-style:normal; color:#1749DE;}
/* ---- qtx : research quotes ---- */
.qtx{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:22px;}
@media (max-width:760px){ .qtx{grid-template-columns:1fr;} }
.qtx-i{margin:0; padding:24px 26px; border:1px solid var(--cs-border); border-radius:16px; background:var(--cs-panel);
   box-shadow:0 1px 2px rgba(15,23,42,.05);}
.qtx-i blockquote{margin:0; font-size:15px; line-height:1.65; color:var(--cs-muted); font-style:italic;}
.qtx-i figcaption{margin-top:14px; display:flex; align-items:center; gap:10px; font-size:13px; font-weight:700; color:var(--cs-ink);}
.qtx-i .a{width:30px; height:30px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
   font-size:11px; font-style:normal; color:#fff; background:linear-gradient(135deg,#2563EB,#0989FF); flex:0 0 auto;}
/* ---- psx : compact persona strip ---- */
.psx{display:flex; align-items:center; gap:20px; margin-top:22px; padding:22px 26px; border-radius:16px;
   border:1px dashed rgba(67,111,245,.45); background:rgba(67,111,245,.04); flex-wrap:wrap;}
.psx-av{width:54px; height:54px; flex:0 0 auto; border-radius:16px; display:flex; align-items:center; justify-content:center;
   font-weight:800; font-size:17px; color:#fff; background:linear-gradient(135deg,#2563EB,#0989FF);}
.psx-b{flex:1; min-width:260px;}
.psx-b b{display:block; font-size:15.5px; color:var(--cs-ink);}
.psx-b span{display:block; margin-top:4px; font-size:13.5px; line-height:1.6; color:var(--cs-muted);}
.psx-chips{display:flex; gap:8px; flex-wrap:wrap;}
.psx-chips i{font-style:normal; font-size:12px; font-weight:700; color:#1749DE; background:#fff;
   border:1px solid rgba(67,111,245,.35); border-radius:999px; padding:6px 12px; white-space:nowrap;}

/* ---- ibx : impact band ---- */
.ibx{display:grid; grid-template-columns:repeat(3,1fr); margin-top:44px; border-radius:22px; overflow:hidden;
   background:linear-gradient(150deg,#1B49D8,#3E6AF0 60%,#5b82ff);
   box-shadow:0 24px 55px -25px rgba(23,73,222,.55);}
.ibx-i{padding:38px 32px;}
.ibx-i + .ibx-i{border-left:1px solid rgba(255,255,255,.18);}
.ibx-i b{display:block; font-size:50px; line-height:1; font-weight:800; color:#fff;}
.ibx-i span{display:block; margin-top:10px; font-size:14px; line-height:1.55; color:rgba(255,255,255,.85);}
@media (max-width:760px){ .ibx{grid-template-columns:1fr;} .ibx-i + .ibx-i{border-left:0; border-top:1px solid rgba(255,255,255,.18);} }

/* ---- hwx : "how we got there" approach spine ---- */
.hwx{position:relative; display:grid; grid-template-columns:repeat(5,1fr); gap:18px; margin-top:56px;}
.hwx::before{content:""; position:absolute; top:26px; left:7%; right:7%; height:3px; border-radius:3px;
   background:linear-gradient(90deg,#0EA5E9,#8B5CF6,#436FF5,#F59E0B,#16A34A); opacity:.3;}
.hwx-s{position:relative; text-align:center;}
.hwx-dot{position:relative; z-index:1; width:52px; height:52px; margin:0 auto 16px; border-radius:50%;
   display:flex; align-items:center; justify-content:center; color:#fff; font-size:18px;
   background:var(--hx,#436FF5); box-shadow:0 12px 26px -10px var(--hx,#436FF5);}
.hwx-n{display:block; font-family:ui-monospace,'JetBrains Mono',Menlo,monospace; font-size:10.5px;
   letter-spacing:.18em; text-transform:uppercase; color:var(--cs-muted);}
.hwx-s h4{margin:5px 0 7px; font-size:16.5px; color:var(--cs-ink);}
.hwx-s p{margin:0 auto; font-size:12.5px; line-height:1.55; color:var(--cs-muted); max-width:185px;}
.hwx-out{margin-top:12px; display:inline-flex; padding:5px 12px; border-radius:999px;
   background:rgba(67,111,245,.07); border:1px dashed rgba(67,111,245,.4);
   font-size:11px; font-weight:700; color:#1749DE; white-space:nowrap;}
@media (max-width:940px){ .hwx{grid-template-columns:repeat(2,1fr); gap:34px 16px;} .hwx::before{display:none;} }
@media (max-width:520px){ .hwx{grid-template-columns:1fr;} }

/* ---- pfx : pain -> product mapping ---- */
.pfx{display:flex; flex-direction:column; gap:14px; margin:46px auto 0; max-width:880px;}
.pfx-r{display:grid; grid-template-columns:1fr 52px 1fr; align-items:center;}
.pfx-p, .pfx-f{padding:15px 18px; border-radius:14px; font-size:14px; line-height:1.45; color:var(--cs-ink);
   display:flex; align-items:center; gap:11px; box-shadow:0 1px 2px rgba(15,23,42,.04);}
.pfx-p{background:rgba(232,45,4,.05); border:1px solid rgba(232,45,4,.2);}
.pfx-p i{color:#DC2626; font-size:12px; flex:0 0 auto;}
.pfx-f{background:rgba(67,111,245,.06); border:1px solid rgba(67,111,245,.3); justify-content:space-between; gap:14px;}
.pfx-f i{color:#1749DE; font-size:12px; flex:0 0 auto;}
.pfx-f > span{display:flex; align-items:center; gap:11px;}
.pfx-f b{flex:0 0 auto; font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
   color:#1749DE; background:#fff; border:1px solid rgba(67,111,245,.35); border-radius:999px; padding:4px 10px; white-space:nowrap;}
.pfx-a{display:flex; align-items:center; justify-content:center; color:#436FF5; font-size:13px; position:relative;}
.pfx-a::before{content:""; position:absolute; left:6px; right:6px; top:50%; height:2px;
   background:repeating-linear-gradient(90deg, rgba(67,111,245,.5) 0 4px, transparent 4px 8px);}
.pfx-a i{position:relative; background:#fff; border:1px solid rgba(67,111,245,.35); border-radius:50%;
   width:26px; height:26px; display:flex; align-items:center; justify-content:center; font-size:11px;}
@media (max-width:720px){
   .pfx-r{grid-template-columns:1fr;}
   .pfx-a{padding:6px 0;} .pfx-a::before{left:50%; right:auto; top:4px; bottom:4px; width:2px; height:auto;
      background:repeating-linear-gradient(180deg, rgba(67,111,245,.5) 0 4px, transparent 4px 8px);}
   .pfx-a i{transform:rotate(90deg);}
}

/* ---- mbx : realistic MacBook mockup + mcx screen carousel ---- */
.mbx{position:relative; max-width:920px; margin:56px auto 0; padding:0 40px;}
.mbx-screen{position:relative; border-radius:26px 26px 2px 2px; padding:2.6% 2.6% 3%;
   background:linear-gradient(180deg,#43485470 0%,#23262E 2.5%,#0B0D12 7%,#0B0D12 100%), #0B0D12;
   box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.09), inset 0 2px 3px rgba(255,255,255,.06),
      0 52px 100px -42px rgba(15,23,42,.55);}
.mbx-screen::before{content:""; position:absolute; top:1.15%; left:50%; transform:translateX(-50%);
   width:8px; height:8px; border-radius:50%;
   background:radial-gradient(circle at 35% 35%, #3A4150, #12141A 60%); box-shadow:inset 0 0 2px #000;}
.mbx-base{position:relative; margin:0 -4.6%; height:16px;
   background:linear-gradient(180deg,#F7F9FC 0%,#DEE3EC 40%,#B4BBC9 85%,#8E96A6 100%);
   border-radius:2px 2px 16px 16px;
   box-shadow:0 12px 26px -12px rgba(15,23,42,.45), inset 0 1px 0 #fff;}
.mbx-base::before{content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
   width:13%; height:52%; border-radius:0 0 14px 14px;
   background:linear-gradient(180deg,#A6ADBC,#CDD3DF 80%); box-shadow:inset 0 -1px 2px rgba(0,0,0,.18);}
.mbx-base::after{content:""; position:absolute; left:2%; right:2%; bottom:-1px; height:35%;
   border-radius:0 0 16px 16px; background:linear-gradient(180deg,transparent,rgba(15,23,42,.16));}
.mbx::after{content:""; position:absolute; left:9%; right:9%; bottom:-28px; height:28px; border-radius:50%;
   background:radial-gradient(ellipse at center, rgba(15,23,42,.2), transparent 70%); pointer-events:none;}
/* carousel viewport & slides */
.mcx-view{position:relative; aspect-ratio:1440/1024; border-radius:7px; overflow:hidden; background:#0B0D12;}
.mcx-slide{position:absolute; inset:0; opacity:0; transform:scale(.985); transition:opacity .5s ease, transform .5s ease;}
.mcx-slide.on{opacity:1; transform:none;}
.mcx-slide img{display:block; width:100%; height:100%; object-fit:cover;}
/* floating feature chips around the laptop */
.mbx-chip{position:absolute; z-index:3; display:inline-flex; align-items:center; gap:8px; padding:10px 15px;
   border-radius:999px; background:#fff; border:1px solid rgba(20,32,68,.12);
   box-shadow:0 16px 34px -14px rgba(15,23,42,.35);
   font-family:'Source Sans 3',-apple-system,sans-serif; font-size:12.5px; font-weight:700; color:#1a1a1a;
   animation:mbxFloat 5.5s ease-in-out infinite; animation-delay:var(--d,0s); white-space:nowrap;}
.mbx-chip i{color:#436FF5; font-size:12px;}
@keyframes mbxFloat{0%,100%{transform:translateY(0) rotate(var(--r,0deg));} 50%{transform:translateY(-9px) rotate(var(--r,0deg));}}
@media (prefers-reduced-motion:reduce){ .mbx-chip{animation:none;} .mcx-slide{transition:none;} }
@media (max-width:820px){ .mbx-chip{display:none;} .mbx{padding:0 22px;} .mbx-base{margin:0 -5.5%;} }
/* carousel controls */
.mcx-ctrl{display:flex; align-items:center; justify-content:center; gap:20px; margin-top:38px;}
.mcx-btn{width:46px; height:46px; border-radius:50%; border:1px solid rgba(20,32,68,.15); background:#fff;
   color:#33415C; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; font-size:14px;
   transition:background .25s, color .25s, border-color .25s, transform .2s;
   box-shadow:0 10px 24px -12px rgba(15,23,42,.28); flex:0 0 auto;}
.mcx-btn:hover{background:linear-gradient(160deg,#5b82ff 0%,#2f5ce0 90%); color:#fff; border-color:transparent; transform:translateY(-2px);}
.mcx-info{min-width:min(340px,60vw); text-align:center;}
.mcx-count{display:block; font-family:ui-monospace,'JetBrains Mono',Menlo,monospace; font-size:11px;
   letter-spacing:.24em; font-weight:700; color:#436FF5; margin-bottom:5px;}
.mcx-info b{display:block; font-size:16px; color:#1a1a1a;}
.mcx-info span{display:block; margin-top:3px; font-size:13.5px; line-height:1.5; color:#55617A;}

/* ---- bwx : browser-window chrome on gallery cards ---- */
.bwx .cs-gcard{position:relative; padding-top:34px; background:#fff;}
.bwx .cs-gcard::before{content:""; position:absolute; top:0; left:0; right:0; height:34px;
   background:linear-gradient(180deg,#F6F8FC,#EFF2F8); border-bottom:1px solid #E4E8F2;}
.bwx .cs-gcard::after{content:""; position:absolute; top:13px; left:16px; width:8px; height:8px; border-radius:50%;
   background:#FC5753; box-shadow:14px 0 0 #FDBC40, 28px 0 0 #33C748;}

/* ---- pinx : Figma-style pinned design notes on mockup screens ---- */
.mcx-slide{pointer-events:none;}
.mcx-slide.on{pointer-events:auto;}
.pinx{position:absolute; z-index:5; width:30px; height:30px; cursor:pointer;}
.pinx::before{content:""; position:absolute; inset:-7px; border-radius:50%;
   border:2px solid rgba(67,111,245,.55); animation:pinPulse 2.6s ease-out infinite;}
@keyframes pinPulse{0%{transform:scale(.55); opacity:.9;} 70%{transform:scale(1.3); opacity:0;} 100%{opacity:0;}}
.pinx-dot{position:relative; width:30px; height:30px; border-radius:15px 15px 15px 3px;
   background:linear-gradient(160deg,#5b82ff,#2f5ce0); border:2px solid #fff;
   box-shadow:0 8px 18px -6px rgba(23,73,222,.65);
   display:flex; align-items:center; justify-content:center; transition:transform .25s cubic-bezier(.34,1.56,.64,1);}
.pinx-dot span{color:#fff; font:800 11px/1 'Source Sans 3',-apple-system,sans-serif;}
.pinx:hover .pinx-dot, .pinx.open .pinx-dot{transform:scale(1.15);}
.pinx-card{position:absolute; left:calc(100% + 12px); top:-8px; width:252px;
   background:#fff; border:1px solid rgba(20,32,68,.13); border-radius:14px 14px 14px 4px;
   box-shadow:0 22px 48px -18px rgba(15,23,42,.45); padding:12px 14px 13px;
   opacity:0; transform:translateY(8px) scale(.94); transform-origin:left top;
   pointer-events:none; transition:opacity .28s, transform .32s cubic-bezier(.34,1.56,.64,1); z-index:6;}
.pinx:hover .pinx-card, .pinx.open .pinx-card{opacity:1; transform:none; pointer-events:auto;}
.pinx.flip .pinx-card{left:auto; right:calc(100% + 12px); border-radius:14px 14px 4px 14px; transform-origin:right top;}
.pinx-h{display:flex; align-items:center; gap:8px; margin-bottom:7px;}
.pinx-av{width:22px; height:22px; border-radius:50%; flex:0 0 auto; text-align:center;
   background:linear-gradient(135deg,#8fadff,#1749DE); color:#fff; font:800 9px/22px 'Source Sans 3',sans-serif;}
.pinx-h b{font-size:12.5px; color:#1a1a1a;}
.pinx-h em{font-style:normal; font-size:10.5px; color:#8A93AC;}
.pinx-card p{margin:0; font-size:12.5px; line-height:1.55; color:#3A4763;}
@media (max-width:820px){ .pinx{display:none;} }
@media (prefers-reduced-motion:reduce){ .pinx::before{animation:none;} }

/* ---- csb-more : learn-more scroll cue in the banner ---- */
.csb-more{display:inline-flex; flex-direction:column; align-items:center; gap:11px; margin-top:32px; text-decoration:none;}
.csb-more-t{font:600 13.5px/1 'Source Sans 3',-apple-system,sans-serif; color:rgba(255,255,255,.72);
   letter-spacing:.05em; transition:color .25s;}
.csb-mouse{width:27px; height:44px; border:2px solid rgba(255,255,255,.42); border-radius:16px;
   display:flex; justify-content:center; padding-top:8px; box-sizing:border-box; transition:border-color .25s;}
.csb-mouse i{width:4px; height:9px; border-radius:3px; background:#fff; animation:csbWheel 1.9s ease-in-out infinite;}
.csb-more:hover .csb-more-t{color:#fff;}
.csb-more:hover .csb-mouse{border-color:rgba(255,255,255,.85);}
@keyframes csbWheel{0%{transform:translateY(0); opacity:1;} 58%{transform:translateY(13px); opacity:0;}
   59%{transform:translateY(0); opacity:0;} 100%{transform:translateY(0); opacity:1;}}
@media (prefers-reduced-motion:reduce){ .csb-mouse i{animation:none;} }

/* prev/next pills: all text white on the blue hover fill (light theme included) */
html[tp-theme="tp-theme-light"] .porfolio-details__navigation-content:hover h4{color:#ffffff;}
html[tp-theme="tp-theme-light"] .porfolio-details__navigation-content:hover a{color:#ffffff;}
html[tp-theme="tp-theme-light"] .porfolio-details__navigation-content:hover a i{
   background:rgba(255,255,255,.18); color:#ffffff; border-color:rgba(255,255,255,.4);}

/* ===== pinned notes -> open annotation list with dotted leader lines ===== */
.pinx-card{display:none!important;}
.pinx{cursor:default; pointer-events:auto;}
.pinx .pinx-dot{cursor:pointer;}
.anno-svg{position:absolute; left:0; top:0; pointer-events:none; z-index:40; overflow:visible;}
.anno-svg path{fill:none; stroke:var(--cs-brand,#436FF5); stroke-width:1.6; stroke-dasharray:2 6;
   stroke-linecap:round; opacity:.5; transition:opacity .2s;}
.anno-svg path.hl{opacity:1; stroke-width:2.2;}
.anno-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:30px;}
@media(max-width:900px){ .anno-grid{grid-template-columns:1fr 1fr;} .anno-svg{display:none;} }
@media(max-width:600px){ .anno-grid{grid-template-columns:1fr;} }
.anno-card{position:relative; display:flex; gap:10px; align-items:flex-start;
   border:1px solid rgba(20,32,68,.12); border-radius:14px; background:#fff; padding:13px 15px 13px 13px;
   box-shadow:0 14px 30px -18px rgba(15,23,42,.25);
   transition:border-color .25s, transform .25s, box-shadow .25s;}
.anno-card p{margin:0; font-size:13px; line-height:1.55; color:#55617A;}
.anno-card.hl{border-color:var(--cs-brand,#436FF5); transform:translateY(-2px);
   box-shadow:0 18px 36px -18px rgba(23,73,222,.4);}
.anno-n{flex:0 0 auto; width:22px; height:22px; border-radius:50%; display:inline-flex; align-items:center;
   justify-content:center; font:700 11px/1 'Source Sans 3',sans-serif; color:#fff;
   background:linear-gradient(135deg,#5b82ff,#2f5ce0); box-shadow:0 6px 14px -6px rgba(23,73,222,.6); margin-top:1px;}

/* ===== flat screen (75%) + annotation rail (25%) ===== */
.mcx-duo{display:grid; grid-template-columns:3fr 1fr; gap:18px; align-items:start; margin-top:38px; position:relative;}
@media(max-width:900px){ .mcx-duo{grid-template-columns:1fr;} }
.mcx-left{min-width:0;}
.mbx.flat{margin:0; padding:0; background:none; box-shadow:none; transform:none; filter:none;}
.mbx.flat .mbx-chip{display:none;}
.mbx.flat .mbx-base{display:none;}
.mbx.flat .mbx-screen{margin:0; padding:0; background:#fff; border-radius:16px;
   border:1px solid rgba(20,32,68,.16); overflow:hidden;
   box-shadow:0 22px 48px -26px rgba(15,23,42,.28);}
.mbx.flat .mcx-view{aspect-ratio:auto; background:#fff; border-radius:0;}
.mbx.flat .mcx-slide{position:relative; inset:auto; opacity:1; transform:none; display:none;}
.mbx.flat .mcx-slide.on{display:block;}
.mbx.flat .mcx-slide img{width:100%; height:auto; object-fit:unset; display:block;}
.anno-rail{border:1px solid rgba(20,32,68,.14); border-radius:16px; background:#fff; padding:8px;
   box-shadow:0 18px 40px -24px rgba(15,23,42,.25); display:flex; flex-direction:column; gap:4px;}
.anno-rail .anno-card{border:1px solid transparent; box-shadow:none; border-radius:12px;
   padding:11px 12px; cursor:pointer;}
.anno-rail .anno-card:hover{background:rgba(20,32,68,.045); transform:none; box-shadow:none; border-color:transparent;}
.anno-rail .anno-card.hl{background:rgba(67,111,245,.09); border-color:rgba(67,111,245,.45);
   transform:none; box-shadow:none;}
.anno-rail .anno-card p{font-size:12.5px;}
.pinx.hl .pinx-dot{box-shadow:0 0 0 5px rgba(67,111,245,.35), 0 10px 20px -8px rgba(23,73,222,.75);}

/* flat mockup section: center aligned */
.mcx-sec-center .cs-head{text-align:center;}
.mbx.flat{margin-left:auto; margin-right:auto;}


/* ---------- locked case studies : banner visible, everything below blurred ---------- */
.cs-lockbar{position:relative; z-index:20; max-width:760px; margin:34px auto -10px; padding:0 26px;}
.cs-lock-in{display:flex; align-items:center; gap:18px; background:#ffffff; border:1px solid rgba(20,32,68,.14);
   border-radius:18px; padding:20px 24px; box-shadow:0 24px 54px -26px rgba(10,16,33,.4);}
.cs-lock-ic{flex:0 0 auto; width:46px; height:46px; border-radius:14px; display:flex; align-items:center; justify-content:center;
   color:#fff; font-size:18px; background:linear-gradient(135deg,#33415C,#0E1430);}
.cs-lock-tx{flex:1; min-width:0;}
.cs-lock-tx b{display:block; font:700 16.5px/1.3 'Source Sans 3',-apple-system,sans-serif; color:#141a2e;}
.cs-lock-tx p{margin:3px 0 0; font-size:13.5px; line-height:1.55; color:#55617A;}
.cs-lock-cta{flex:0 0 auto; display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
   font:700 13.5px 'Source Sans 3',sans-serif; color:#fff; text-decoration:none;
   background:linear-gradient(135deg,#436FF5,#1749DE); border-radius:999px; padding:12px 22px;
   box-shadow:0 12px 26px -12px rgba(23,73,222,.7); transition:transform .25s, box-shadow .25s;}
.cs-lock-cta:hover{transform:translateY(-2px); color:#fff; box-shadow:0 18px 34px -14px rgba(23,73,222,.8);}
.cs-lock-form{flex:0 0 auto; display:flex; gap:8px; align-items:center;}
.cs-lock-go{display:inline-flex; align-items:center; gap:8px; white-space:nowrap; cursor:pointer; border:0;
   font:700 13.5px 'Source Sans 3',sans-serif; color:#fff;
   background:linear-gradient(135deg,#436FF5,#1749DE); border-radius:999px; padding:13px 24px;
   box-shadow:0 12px 26px -12px rgba(23,73,222,.7); transition:transform .25s;}
.cs-lock-go:hover{transform:translateY(-2px);}
.cs-lock-form input{width:190px; font:600 13.5px 'Source Sans 3',sans-serif; color:#141a2e;
   border:1px solid rgba(20,32,68,.2); border-radius:999px; padding:11px 16px; outline:none; background:#F7F9FD;
   transition:border-color .25s, box-shadow .25s;}
.cs-lock-form input:focus{border-color:#436FF5; box-shadow:0 0 0 3px rgba(67,111,245,.15); background:#fff;}
.cs-lock-form button{display:inline-flex; align-items:center; gap:7px; white-space:nowrap; cursor:pointer; border:0;
   font:700 13.5px 'Source Sans 3',sans-serif; color:#fff;
   background:linear-gradient(135deg,#436FF5,#1749DE); border-radius:999px; padding:12px 20px;
   box-shadow:0 12px 26px -12px rgba(23,73,222,.7); transition:transform .25s;}
.cs-lock-form button:hover{transform:translateY(-2px);}
.cs-lock-form.err input{border-color:#DC2626; box-shadow:0 0 0 3px rgba(220,38,38,.15); animation:csndaShake .4s;}
@keyframes csndaShake{0%,100%{transform:translateX(0);}25%{transform:translateX(-5px);}75%{transform:translateX(5px);}}
.cs-lock-mail{display:block; margin-top:6px; font:600 11.5px 'Source Sans 3',sans-serif; color:#436FF5; text-decoration:none;}
.cs-lock-mail:hover{color:#1749DE; text-decoration:underline;}
@media(max-width:760px){ .cs-lock-in{flex-direction:column; text-align:center;} .cs-lock-form{width:100%; justify-content:center;} }
body.cs-locked .cs-study{filter:blur(9px); opacity:.55; max-height:170vh; overflow:hidden;
   pointer-events:none; user-select:none; -webkit-user-select:none;
   -webkit-mask-image:linear-gradient(180deg,#000 55%, transparent 96%);
   mask-image:linear-gradient(180deg,#000 55%, transparent 96%);}
body.cs-locked .sec-nav{display:none !important;}
body.cs-locked .cs-lb{display:none !important;}