/* ============================================================
   CodeStan — Case Studies (index + detail pages)
   Motion identity: BEFORE → BUILD → AFTER
   Requires: styles.css, product.css — unified brand accent only
   ============================================================ */

/* ---------------- shared bits ---------------- */
.cs-rep,.cd-rep{display:inline-flex;align-items:center;gap:7px;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brand);border:1px solid var(--brand-line);
  background:var(--brand-dim);border-radius:100px;padding:6px 13px;margin-bottom:18px}
.cs-rep i,.cd-rep i{width:6px;height:6px;border-radius:50%;background:var(--brand);flex:0 0 auto}
.cs-chip{display:inline-block;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-p2);border:1px solid #2e322e;border-radius:100px;padding:5px 12px}
[dir="rtl"] .cs-rep,[dir="rtl"] .cd-rep,[dir="rtl"] .cs-chip{letter-spacing:0}

/* ============================================================
   INDEX — 1 · HERO + CASE STUDY TIMELINE
   ============================================================ */
.cs-hero{padding:0}
.cs-hero-space{height:240vh}
.cs-hero .pd-sticky{justify-content:center}
.cs-hero-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:52px;align-items:center;width:100%}
.cs-hero h1{font-size:clamp(32px,4.4vw,54px);line-height:1.07;color:#f2f7f2;margin-bottom:16px}
.cs-hero .pd-sub{font-size:16.5px;color:var(--text-p2);line-height:1.6;max-width:46ch;margin-bottom:26px}

/* timeline visual: PROBLEM → SYSTEM → OUTCOME, per story */
.cs-timeline{position:relative;border:1px solid #262a26;border-radius:24px;background:#0e100e;
  padding:34px 30px 30px;min-height:380px;display:flex;flex-direction:column;overflow:hidden}
.cs-tl-story{display:flex;align-items:center;gap:10px;margin-bottom:34px;min-height:22px}
.cs-tl-story b{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#dfe9df;font-weight:600}
.cs-tl-story span{font-size:10.5px;color:var(--text-ph);letter-spacing:.1em;text-transform:uppercase}
[dir="rtl"] .cs-tl-story b,[dir="rtl"] .cs-tl-story span{letter-spacing:0}
.cs-tl-track{position:relative;flex:1;display:flex;align-items:center;justify-content:space-between;padding:0 6px}
.cs-tl-line{position:absolute;left:8%;right:8%;top:50%;height:2px;background:#232623;border-radius:2px}
.cs-tl-fill{position:absolute;inset-inline-start:0;top:0;height:100%;width:0;
  background:linear-gradient(90deg,var(--brand),#7ee083);border-radius:2px;
  box-shadow:0 0 14px rgba(162,250,163,.5)}
.cs-tl-node{position:relative;z-index:2;width:33%;display:flex;flex-direction:column;align-items:center;gap:14px}
.cs-tl-dot{width:66px;height:66px;border-radius:20px;border:1px solid #2c302c;background:#121412;
  display:flex;align-items:center;justify-content:center;transition:border-color .5s,background .5s,box-shadow .5s}
.cs-tl-dot svg{width:30px;height:30px;stroke:#5a605a;fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;transition:stroke .5s}
.cs-tl-node.on .cs-tl-dot{border-color:var(--brand-line);background:#142114;
  box-shadow:0 0 26px rgba(162,250,163,.16)}
.cs-tl-node.on .cs-tl-dot svg{stroke:var(--brand)}
.cs-tl-cap{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:#6c726c;transition:color .5s;text-align:center}
.cs-tl-node.on .cs-tl-cap{color:#e6f2e6}
[dir="rtl"] .cs-tl-cap{letter-spacing:0}
.cs-tl-phase{margin-top:30px;text-align:center;font-size:13px;color:var(--text-p2);min-height:20px;transition:opacity .3s}
.cs-tl-phase b{color:var(--brand);font-weight:600}

/* ============================================================
   INDEX — 2 · EXPLORE (filters + grid + empty state)
   ============================================================ */
.cs-filters{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-bottom:42px}
.cs-filter{font-family:inherit;font-size:13px;color:var(--text-p2);background:#141614;
  border:1px solid #2b2f2b;border-radius:100px;padding:10px 20px;cursor:pointer;
  transition:color var(--dur-2),border-color var(--dur-2),background var(--dur-2)}
.cs-filter:hover{border-color:#3f4a3f;color:#e2eae2}
.cs-filter.on{color:#121212;background:var(--brand);border-color:var(--brand);font-weight:600}
.cs-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;min-height:300px}
.cs-card{position:relative;display:flex;flex-direction:column;gap:16px;border:1px solid #262a26;
  border-radius:22px;background:#121412;padding:26px;text-decoration:none;overflow:hidden;
  transition:border-color var(--dur-3),transform var(--dur-3) var(--ease),opacity .3s}
.cs-card:hover{border-color:var(--brand-line);transform:translateY(-4px)}
.cs-card.hide{display:none}
.cs-card-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.cs-card-num{font-size:11px;letter-spacing:.18em;color:var(--text-ph)}
.cs-card h3{font-size:20px;color:#eef4ee;line-height:1.25;margin:0}
.cs-card p{font-size:13.5px;color:var(--text-p2);line-height:1.6;margin:0}
.cs-card-vis{margin-top:2px}
.cs-card-go{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--brand);margin-top:auto}
.cs-card-go svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform var(--dur-2)}
.cs-card:hover .cs-card-go svg{transform:translateX(4px)}
[dir="rtl"] .cs-card-go svg{transform:scaleX(-1)}
[dir="rtl"] .cs-card:hover .cs-card-go svg{transform:scaleX(-1) translateX(4px)}
.cs-empty{border:1px dashed #313631;border-radius:22px;padding:70px 30px;text-align:center;grid-column:1/-1}
.cs-empty h3{font-size:24px;color:#eef4ee;margin-bottom:10px}
.cs-empty p{font-size:15px;color:var(--text-p2);max-width:44ch;margin:0 auto 24px;line-height:1.6}

/* mini flow preview (cards + strip) — final AFTER state, static */
.cs-mini{position:relative;height:120px;border-radius:14px;background:#0d0f0d;border:1px solid #222622;overflow:hidden}
.cs-mini svg{position:absolute;inset:0;width:100%;height:100%}
.cs-mini .mn{position:absolute;transform:translate(-50%,-50%);font-size:8.5px;letter-spacing:.06em;
  color:#b9c6b9;background:#161916;border:1px solid #2e3a2e;border-radius:100px;padding:3px 9px;white-space:nowrap}
.cs-mini .mn.core{color:#121212;background:var(--brand);border-color:var(--brand);font-weight:700}
.cs-mini .ml{stroke:rgba(162,250,163,.35);stroke-width:.3;fill:none}
.cs-mini .mbar{position:absolute;bottom:10px;inset-inline-end:10px;display:flex;gap:3px;align-items:flex-end}
.cs-mini .mbar i{width:5px;border-radius:2px;background:var(--brand);opacity:.8;animation:csBar 2.4s ease-in-out infinite}
.cs-mini .mbar i:nth-child(1){height:9px}.cs-mini .mbar i:nth-child(2){height:15px;animation-delay:.3s}
.cs-mini .mbar i:nth-child(3){height:11px;animation-delay:.6s}.cs-mini .mbar i:nth-child(4){height:18px;animation-delay:.9s}
@keyframes csBar{50%{transform:scaleY(.55)}}

/* ============================================================
   INDEX — 3 · FEATURED CASE STUDY (editorial)
   ============================================================ */
.cs-feature{position:relative;display:grid;grid-template-columns:1.02fr .98fr;gap:0;border:1px solid #262a26;
  border-radius:28px;background:#111311;overflow:hidden;text-decoration:none;
  transition:border-color var(--dur-3)}
.cs-feature:hover{border-color:var(--brand-line)}
.cs-feat-vis{position:relative;padding:34px;background:
  radial-gradient(560px 320px at 50% 0%,rgba(162,250,163,.06),transparent 65%);
  display:flex;flex-direction:column;justify-content:center;border-inline-end:1px solid #232723}
.cs-feat-body{padding:44px 42px;display:flex;flex-direction:column;gap:0}
.cs-feat-blocks{display:grid;grid-template-columns:1fr 1fr;gap:26px 30px;margin:26px 0 30px}
.cs-fb h4{font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--brand);margin-bottom:9px}
.cs-fb p{font-size:13.5px;color:var(--text-p2);line-height:1.65;margin:0}
[dir="rtl"] .cs-fb h4{letter-spacing:0}
.cs-feat-body h3{font-size:clamp(23px,2.4vw,30px);color:#f0f6f0;line-height:1.15;margin:0}
.cs-feat-link{display:inline-flex;align-items:center;gap:9px;font-size:14.5px;color:var(--brand);font-weight:600;margin-top:auto}
.cs-feat-link svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform var(--dur-2)}
.cs-feature:hover .cs-feat-link svg{transform:translateX(5px)}
[dir="rtl"] .cs-feat-link svg{transform:scaleX(-1)}
[dir="rtl"] .cs-feature:hover .cs-feat-link svg{transform:scaleX(-1) translateX(5px)}

/* animated clinic-workflow UI */
.cw-ui{border:1px solid #262c26;border-radius:18px;background:#0c0e0c;overflow:hidden;
  box-shadow:0 24px 70px rgba(0,0,0,.45)}
.cw-head{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid #1e221e}
.cw-head i{width:8px;height:8px;border-radius:50%;background:#2a2e2a}
.cw-head i:first-child{background:var(--brand)}
.cw-head b{margin-inline-start:auto;font-size:9px;letter-spacing:.14em;color:var(--text-ph);text-transform:uppercase}
.cw-body{display:grid;grid-template-columns:1.15fr .85fr;gap:0;min-height:250px}
.cw-cal{padding:14px;border-inline-end:1px solid #1c201c;position:relative}
.cw-cal h5{font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:#79817a;margin:0 0 10px}
.cw-slot{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:9px;background:#131613;
  border:1px solid transparent;margin-bottom:7px;transition:border-color .4s,background .4s}
.cw-slot i{width:7px;height:7px;border-radius:50%;background:#3a4038;flex:0 0 auto;transition:background .4s}
.cw-slot em{font-style:normal;font-size:9.5px;color:#9aa49a;flex:1;height:8px;border-radius:4px;background:#1d211d}
.cw-slot u{text-decoration:none;font-size:8.5px;color:#5d655d}
.cw-slot.live{background:#152115;border-color:var(--brand-line)}
.cw-slot.live i{background:var(--brand);box-shadow:0 0 10px rgba(162,250,163,.7)}
.cw-queue{padding:14px}
.cw-queue h5{font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:#79817a;margin:0 0 10px}
.cw-q{display:flex;align-items:center;gap:9px;padding:8px 9px;border-radius:9px;margin-bottom:7px;background:#111411}
.cw-q i{width:22px;height:22px;border-radius:8px;background:#1c221c;flex:0 0 auto}
.cw-q em{font-style:normal;flex:1;height:7px;border-radius:4px;background:#1d211d}
.cw-q u{text-decoration:none;font-size:8px;color:#5d655d;border:1px solid #272b27;border-radius:100px;padding:2px 7px}
.cw-q.next{border:1px solid var(--brand-line)}
.cw-q.next u{color:var(--brand);border-color:var(--brand-line)}
.cw-foot{display:flex;gap:14px;padding:11px 16px;border-top:1px solid #1e221e}
.cw-foot span{font-size:8.5px;color:#5d655d;display:flex;align-items:center;gap:6px}
.cw-foot span::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--brand)}
.cw-pulse{position:absolute;inset-inline-end:14px;top:12px;width:8px;height:8px;border-radius:50%;
  background:var(--brand);animation:csPulse 1.8s ease-in-out infinite}
@keyframes csPulse{50%{opacity:.25;transform:scale(.7)}}

/* ============================================================
   INDEX — 4 · CASE STUDY STACK (sticky BEFORE→BUILD→AFTER)
   ============================================================ */
.cs-stack-space{height:1280vh}
.cs-stack-stage{position:relative;width:100%;height:100svh;overflow:hidden}
.cs-panel{position:absolute;inset:0;display:flex;align-items:center;text-decoration:none;will-change:opacity,transform}
.cs-panel-inner{display:grid;grid-template-columns:.92fr 1.08fr;gap:48px;align-items:center;width:min(1320px,100% - 64px);margin-inline:auto}
.cs-panel-tag{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.cs-panel-tag b{font-size:12px;letter-spacing:.2em;color:var(--brand);font-weight:700}
[dir="rtl"] .cs-panel-tag b{letter-spacing:0}
.cs-panel h3{font-size:clamp(26px,3vw,40px);color:#f0f6f0;line-height:1.12;margin:0 0 14px}
.cs-panel p{font-size:15px;color:var(--text-p2);line-height:1.65;margin:0 0 22px;max-width:50ch}
.cs-panel-phase{display:flex;gap:8px;margin-bottom:24px}
.cs-panel-phase span{font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:#5d655d;
  border:1px solid #282c28;border-radius:100px;padding:5px 12px;transition:all .4s}
.cs-panel-phase span.on{color:#121212;background:var(--brand);border-color:var(--brand);font-weight:700}
[dir="rtl"] .cs-panel-phase span{letter-spacing:0}
.cs-panel-go{display:inline-flex;align-items:center;gap:9px;font-size:14px;color:var(--brand);font-weight:600}
.cs-panel-go svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
[dir="rtl"] .cs-panel-go svg{transform:scaleX(-1)}

/* flow visual (BEFORE→BUILD→AFTER engine target) */
.cs-flow{position:relative;height:min(58svh,520px);border:1px solid #262a26;border-radius:24px;
  background:#0d0f0d;overflow:hidden}
.cs-flow svg.cs-flow-lines{position:absolute;inset:0;width:100%;height:100%}
.cs-flow-lines path{stroke:rgba(162,250,163,.4);stroke-width:.45;fill:none}
.cs-flow-label{position:absolute;top:14px;inset-inline-start:16px;font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;color:#5d655d;z-index:3}
.cs-node{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:7px;
  background:#151815;border:1px solid #2b302b;border-radius:100px;padding:7px 13px;
  font-size:10.5px;color:#aeb9ae;white-space:nowrap;z-index:2;will-change:left,top,opacity;
  transition:border-color .4s}
.cs-node::before{content:'';width:6px;height:6px;border-radius:50%;background:#454b45;transition:background .4s}
.cs-node.frag{border-style:dashed;color:#767d76}
.cs-node.ok{border-color:var(--brand-line);color:#d9e6d9}
.cs-node.ok::before{background:var(--brand)}
.cs-core{position:absolute;transform:translate(-50%,-50%);z-index:2;background:var(--brand);color:#121212;
  font-size:11px;font-weight:800;letter-spacing:.08em;border-radius:100px;padding:10px 18px;
  box-shadow:0 0 34px rgba(162,250,163,.35);white-space:nowrap}
.cs-dash{position:absolute;left:50%;transform:translateX(-50%);bottom:16px;width:min(78%,340px);
  background:#101310;border:1px solid #2c362c;border-radius:14px;padding:12px 14px;z-index:2;
  box-shadow:0 18px 50px rgba(0,0,0,.5)}
.cs-dash h6{font-size:8.5px;letter-spacing:.15em;text-transform:uppercase;color:#79817a;margin:0 0 9px;
  display:flex;align-items:center;gap:7px}
.cs-dash h6::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--brand)}
.cs-dash-bars{display:flex;gap:6px;align-items:flex-end;height:34px;margin-bottom:9px}
.cs-dash-bars i{flex:1;border-radius:3px 3px 0 0;background:linear-gradient(180deg,var(--brand),#3f7a41);
  transform-origin:bottom;animation:csBar 2.2s ease-in-out infinite}
.cs-dash-bars i:nth-child(2){animation-delay:.2s}.cs-dash-bars i:nth-child(3){animation-delay:.4s}
.cs-dash-bars i:nth-child(4){animation-delay:.6s}.cs-dash-bars i:nth-child(5){animation-delay:.8s}
.cs-dash-row{display:flex;gap:8px}
.cs-dash-row span{flex:1;height:6px;border-radius:3px;background:#1e241e}
.cs-dash-row span:first-child{background:rgba(162,250,163,.3)}

/* ============================================================
   INDEX — 5 · TECHNOLOGY LAYERS
   ============================================================ */
.cs-tech-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.cs-tech-card{border:1px solid #262a26;border-radius:18px;background:#121412;padding:24px 22px;
  transition:border-color var(--dur-3),transform var(--dur-3) var(--ease)}
.cs-tech-card:hover{border-color:#3d453d;transform:translateY(-4px)}
.cs-layers{display:flex;flex-direction:column;gap:5px;margin-bottom:18px;height:52px;justify-content:flex-end}
.cs-layers i{display:block;height:8px;border-radius:4px;background:#1f241f}
.cs-layers i.top{background:var(--brand);opacity:.9}
.cs-layers i.mid{background:rgba(162,250,163,.32);width:78%}
.cs-layers i.base{width:58%}
.cs-tech-card h3{font-size:15.5px;color:#eef4ee;margin:0 0 7px}
.cs-tech-card p{font-size:12px;color:var(--text-p2);line-height:1.55;margin:0}

/* ============================================================
   INDEX — 6 · COMPLEXITY → CLARITY
   ============================================================ */
.cs-shift-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.cs-shift{border:1px solid #262a26;border-radius:18px;background:#121412;padding:22px 18px;text-align:center}
.cs-shift-vis{height:86px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;position:relative}
.cs-shift-lbl{display:flex;flex-direction:column;gap:5px}
.cs-shift-lbl .from{font-size:12px;color:#767d76;text-decoration:line-through;text-decoration-color:#4a4f4a}
.cs-shift-lbl svg{width:15px;height:15px;margin:0 auto;stroke:var(--brand);fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
[dir="rtl"] .cs-shift-lbl svg{transform:scaleX(-1)}
.cs-shift-lbl .to{font-size:13.5px;color:#e9f3e9;font-weight:600}
/* vis 1: manual → connected (dots linking) */
.csv-dots{position:relative;width:92px;height:60px}
.csv-dots i{position:absolute;width:9px;height:9px;border-radius:50%;background:#3a4038;animation:csvDot 3.2s ease-in-out infinite}
.csv-dots i:nth-child(1){left:4px;top:6px}.csv-dots i:nth-child(2){right:8px;top:2px;animation-delay:.15s}
.csv-dots i:nth-child(3){left:38%;top:44%;animation-delay:.3s}.csv-dots i:nth-child(4){left:12px;bottom:4px;animation-delay:.45s}
.csv-dots i:nth-child(5){right:4px;bottom:10px;animation-delay:.6s}
.csv-dots::before,.csv-dots::after{content:'';position:absolute;left:12%;right:12%;top:50%;height:1px;
  background:var(--brand-line);opacity:0;animation:csvLink 3.2s ease-in-out infinite}
.csv-dots::after{transform:rotate(-24deg)}
.csv-dots::before{transform:rotate(20deg)}
@keyframes csvDot{40%,100%{background:var(--brand)}}
@keyframes csvLink{35%,90%{opacity:1}}
/* vis 2: scattered → centralized */
.csv-conv{position:relative;width:92px;height:60px}
.csv-conv i{position:absolute;left:50%;top:50%;width:8px;height:8px;border-radius:50%;background:#3a4038;
  animation:csvConv 3s var(--ease) infinite}
.csv-conv i:nth-child(1){--sx:-38px;--sy:-20px}.csv-conv i:nth-child(2){--sx:36px;--sy:-22px;animation-delay:.1s}
.csv-conv i:nth-child(3){--sx:-30px;--sy:22px;animation-delay:.2s}.csv-conv i:nth-child(4){--sx:40px;--sy:18px;animation-delay:.3s}
.csv-conv i:nth-child(5){--sx:0px;--sy:-26px;animation-delay:.4s}
.csv-conv b{position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;
  background:var(--brand);box-shadow:0 0 16px rgba(162,250,163,.5)}
@keyframes csvConv{0%,25%{transform:translate(var(--sx),var(--sy));background:#3a4038}
  60%,100%{transform:translate(0,0);background:var(--brand)}}
/* vis 3: slow → automated */
.csv-auto{display:flex;gap:5px;align-items:flex-end;height:52px}
.csv-auto i{width:8px;border-radius:3px;background:#3a4038;animation:csvAuto 2.6s ease-in-out infinite}
.csv-auto i:nth-child(1){height:14px}.csv-auto i:nth-child(2){height:24px;animation-delay:.15s}
.csv-auto i:nth-child(3){height:18px;animation-delay:.3s}.csv-auto i:nth-child(4){height:34px;animation-delay:.45s}
.csv-auto i:nth-child(5){height:26px;animation-delay:.6s}.csv-auto i:nth-child(6){height:42px;animation-delay:.75s}
@keyframes csvAuto{45%,100%{background:var(--brand)}}
/* vis 4: invisible → measurable */
.csv-meas{display:flex;gap:6px;align-items:flex-end;height:52px}
.csv-meas i{width:11px;border-radius:3px 3px 0 0;background:linear-gradient(180deg,var(--brand),#2c4d2e);
  transform:scaleY(.12);transform-origin:bottom;animation:csvMeas 2.8s var(--ease) infinite}
.csv-meas i:nth-child(1){height:20px}.csv-meas i:nth-child(2){height:32px;animation-delay:.2s}
.csv-meas i:nth-child(3){height:26px;animation-delay:.4s}.csv-meas i:nth-child(4){height:44px;animation-delay:.6s}
@keyframes csvMeas{45%,100%{transform:scaleY(1)}}
/* vis 5: disconnected → integrated */
.csv-int{display:flex;align-items:center;gap:0}
.csv-int i{width:26px;height:26px;border-radius:9px;border:1.5px solid #3a4038;background:#151815}
.csv-int i:last-child{animation:csvInt 3s var(--ease) infinite}
.csv-int u{width:18px;height:1.5px;background:var(--brand-line);text-decoration:none;
  transform:scaleX(.2);transform-origin:center;animation:csvIntL 3s var(--ease) infinite}
@keyframes csvInt{0%,30%{transform:translateX(9px);border-color:#3a4038}
  65%,100%{transform:translateX(0);border-color:var(--brand)}}
@keyframes csvIntL{0%,30%{transform:scaleX(.2);opacity:.2}65%,100%{transform:scaleX(1);opacity:1}}

/* ============================================================
   INDEX — 7 · WHAT CHANGED (qualitative outcomes)
   ============================================================ */
.cs-out-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.cs-out-card{position:relative;border:1px solid #262a26;border-radius:18px;background:#121412;
  padding:26px 22px;overflow:hidden;transition:border-color var(--dur-3)}
.cs-out-card:hover{border-color:var(--brand-line)}
.cs-out-card::before{content:'';position:absolute;top:0;inset-inline-start:0;width:34px;height:3px;
  background:var(--brand);border-radius:0 0 4px 0}
.cs-out-card h3{font-size:15.5px;color:#eef4ee;margin:0 0 8px}
.cs-out-card p{font-size:12.5px;color:var(--text-p2);line-height:1.6;margin:0}

/* ============================================================
   INDEX — 8 · MORE TRANSFORMATIONS (scroll-snap strip)
   ============================================================ */
.cs-strip{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 4px 20px;
  scrollbar-width:thin;scrollbar-color:#2c302c transparent}
.cs-strip-card{flex:0 0 min(360px,82vw);scroll-snap-align:start;border:1px solid #262a26;border-radius:20px;
  background:#121412;padding:22px;text-decoration:none;display:flex;flex-direction:column;gap:14px;
  transition:border-color var(--dur-3),transform var(--dur-3) var(--ease)}
.cs-strip-card:hover{border-color:var(--brand-line);transform:translateY(-4px)}
.cs-strip-card h3{font-size:17px;color:#eef4ee;margin:0;line-height:1.3}
.cs-strip-card .cs-card-top{margin-bottom:-4px}
.cs-strip-card p{font-size:12.5px;color:var(--text-p2);line-height:1.55;margin:0}

/* ============================================================
   INDEX — 9 · FINALE (convergence + zoom-out)
   ============================================================ */
.cs-finale{padding:0}
.cs-fin-space{height:280vh}
.cs-fin-sticky{justify-content:center;gap:34px}
.cs-fin-stage{position:relative;width:min(900px,100% - 48px);height:min(46svh,400px);margin-inline:auto}
.cs-fin-chip{position:absolute;transform:translate(-50%,-50%);background:#151915;border:1px solid #2e332e;
  border-radius:100px;padding:9px 18px;font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:#a9b4a9;white-space:nowrap;z-index:2;will-change:left,top,opacity}
[dir="rtl"] .cs-fin-chip{letter-spacing:0}
.cs-fin-stage svg{position:absolute;inset:0;width:100%;height:100%}
.cs-fin-stage svg path{stroke:rgba(162,250,163,.45);stroke-width:.4;fill:none}
.cs-fin-word{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;z-index:3;
  opacity:0;width:100%}
.cs-fin-word b{display:block;font-size:clamp(26px,4.4vw,52px);letter-spacing:.06em;color:#f2f9f2;
  font-weight:800;line-height:1.05}
.cs-fin-word span{display:block;margin-top:12px;font-size:clamp(12px,1.5vw,16px);color:var(--brand);letter-spacing:.05em}
.cs-fin-copy{text-align:center;max-width:760px;margin:0 auto;padding:0 20px}
.cs-fin-copy h2{font-size:clamp(30px,4vw,50px);line-height:1.08;color:#f0f6f0;margin-bottom:16px}
.cs-fin-copy p{font-size:16.5px;color:var(--text-p2);line-height:1.6;margin-bottom:28px}
.cs-fin-copy .pd-ctas{justify-content:center}

/* ============================================================
   DETAIL PAGES
   ============================================================ */
.cd-ind{display:inline-block;font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--brand);margin-bottom:12px;font-weight:600}
[dir="rtl"] .cd-ind{letter-spacing:0}
.cd-hero h1{font-size:clamp(30px,4vw,50px);line-height:1.08;color:#f2f7f2;margin-bottom:16px}
.cd-meta{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:26px}
.cd-meta .cs-chip b{color:#dfe9df;font-weight:600}
.cd-hero-dash{padding:22px}
.cdk-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.cdk-head b{font-size:12px;color:#dfe9df;letter-spacing:.1em;text-transform:uppercase}
.cdk-head span{font-size:9.5px;color:var(--brand);border:1px solid var(--brand-line);border-radius:100px;padding:3px 10px}
.cdk-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.cdk-kpi{background:#121512;border:1px solid #222622;border-radius:12px;padding:12px}
.cdk-kpi b{display:block;font-size:19px;color:var(--brand);font-variant-numeric:tabular-nums}
.cdk-kpi span{font-size:9.5px;color:#79817a;letter-spacing:.06em;text-transform:uppercase}
.cdk-list{display:flex;flex-direction:column;gap:8px}
.cdk-row{display:flex;align-items:center;gap:10px;background:#111411;border-radius:10px;padding:9px 12px}
.cdk-row i{width:8px;height:8px;border-radius:50%;background:var(--brand);flex:0 0 auto}
.cdk-row em{font-style:normal;flex:1;height:7px;border-radius:4px;background:#1d221d}
.cdk-row u{text-decoration:none;font-size:9px;color:#8b948b}

.cd-lead{font-size:17px;color:#cdd8cd;line-height:1.7;max-width:72ch;margin:0 auto 40px;text-align:center}
.cd-points{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.cd-point{border:1px solid #262a26;border-radius:18px;background:#121412;padding:26px 24px}
.cd-point b{display:block;font-size:12px;letter-spacing:.16em;color:var(--brand);margin-bottom:12px;font-weight:700}
[dir="rtl"] .cd-point b{letter-spacing:0}
.cd-point h3{font-size:16.5px;color:#eef4ee;margin:0 0 9px}
.cd-point p{font-size:13px;color:var(--text-p2);line-height:1.65;margin:0}

.cd-mods{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.cd-mod{border:1px solid #262a26;border-radius:16px;background:#121412;padding:22px 20px;
  transition:border-color var(--dur-3)}
.cd-mod:hover{border-color:#3d453d}
.cd-mod svg{width:22px;height:22px;stroke:var(--brand);fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;margin-bottom:14px}
.cd-mod h3{font-size:14.5px;color:#eef4ee;margin:0 0 6px}
.cd-mod p{font-size:12px;color:var(--text-p2);line-height:1.55;margin:0}

.cd-layers{display:flex;flex-direction:column;gap:10px;max-width:880px;margin:0 auto}
.cd-layer{display:grid;grid-template-columns:200px 1fr;gap:20px;align-items:center;border:1px solid #262a26;
  border-radius:16px;background:#121412;padding:20px 24px}
.cd-layer b{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:#e6f2e6;display:flex;align-items:center;gap:10px}
.cd-layer b::before{content:'';width:22px;height:8px;border-radius:4px;background:var(--brand);flex:0 0 auto}
[dir="rtl"] .cd-layer b{letter-spacing:0}
.cd-layer p{font-size:13px;color:var(--text-p2);line-height:1.6;margin:0}

.cd-trans{display:grid;grid-template-columns:1fr 64px 1fr;gap:0;align-items:stretch;max-width:1020px;margin:0 auto}
.cd-tcol{border:1px solid #262a26;border-radius:20px;padding:30px 28px;background:#121412}
.cd-tcol.after{border-color:var(--brand-line);background:#101711}
.cd-tcol h3{font-size:11px;letter-spacing:.18em;text-transform:uppercase;margin:0 0 20px;color:#767d76}
.cd-tcol.after h3{color:var(--brand)}
[dir="rtl"] .cd-tcol h3{letter-spacing:0}
.cd-tcol ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px}
.cd-tcol li{display:flex;gap:11px;font-size:13.5px;color:var(--text-p2);line-height:1.55}
.cd-tcol li::before{content:'';width:6px;height:6px;border-radius:50%;background:#4a4f4a;flex:0 0 auto;margin-top:7px}
.cd-tcol.after li{color:#cfe0cf}
.cd-tcol.after li::before{background:var(--brand)}
.cd-tarrow{display:flex;align-items:center;justify-content:center}
.cd-tarrow svg{width:30px;height:30px;stroke:var(--brand);fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
[dir="rtl"] .cd-tarrow svg{transform:scaleX(-1)}

/* architecture — animated system diagram */
.cd-arch-space{height:240vh}
.cd-arch-sticky{justify-content:center}
.cd-arch-stage{position:relative;width:min(1020px,100%);margin:20px auto 0;height:min(52svh,430px)}
.cd-arch-stage svg{position:absolute;inset:0;width:100%;height:100%}
.cd-arch-stage svg path{stroke:rgba(162,250,163,.5);stroke-width:.4;fill:none}
.cd-an{position:absolute;transform:translate(-50%,-50%);width:150px;text-align:center;z-index:2;
  will-change:opacity}
.cd-an-box{border:1px solid #2b302b;background:#131613;border-radius:16px;padding:16px 12px;
  transition:border-color .5s,box-shadow .5s}
.cd-an svg{position:static;width:26px;height:26px;stroke:#5d655d;fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;margin-bottom:9px;transition:stroke .5s}
.cd-an b{display:block;font-size:12px;color:#c3cec3;margin-bottom:4px;transition:color .5s}
.cd-an span{font-size:9.5px;color:#66706a;line-height:1.4;display:block}
.cd-an.on .cd-an-box{border-color:var(--brand-line);box-shadow:0 0 30px rgba(162,250,163,.12)}
.cd-an.on svg{stroke:var(--brand)}
.cd-an.on b{color:#eef7ee}
.cd-pulse{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--brand);
  box-shadow:0 0 12px rgba(162,250,163,.8);z-index:3;opacity:0}
.cd-pulse.run{opacity:1;animation:cdFlow 2.8s linear infinite}
@keyframes cdFlow{from{left:var(--x0);top:var(--y0)}to{left:var(--x1);top:var(--y1)}}

.cd-svc{display:flex;flex-wrap:wrap;gap:11px;justify-content:center}
.cd-svc a{display:inline-flex;align-items:center;gap:9px;border:1px solid #2b2f2b;border-radius:100px;
  background:#141614;padding:12px 22px;font-size:13.5px;color:#dfe7df;text-decoration:none;
  transition:border-color var(--dur-2),color var(--dur-2),transform var(--dur-2)}
.cd-svc a:hover{border-color:var(--brand-line);color:var(--brand);transform:translateY(-2px)}
.cd-svc a svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.cd-svc a.prd{border-color:var(--brand-line);background:var(--brand-dim);color:var(--brand);font-weight:600}

.cd-prd{display:grid;grid-template-columns:auto 1fr auto;gap:26px;align-items:center;max-width:880px;
  margin:0 auto;border:1px solid #262a26;border-radius:24px;background:#121412;padding:32px 34px;
  text-decoration:none;transition:border-color var(--dur-3)}
.cd-prd:hover{border-color:var(--brand-line)}
.cd-prd-ic{width:66px;height:66px;border-radius:20px;background:var(--brand-dim);border:1px solid var(--brand-line);
  display:flex;align-items:center;justify-content:center}
.cd-prd-ic svg{width:30px;height:30px;stroke:var(--brand);fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.cd-prd h3{font-size:20px;color:#eef4ee;margin:0 0 6px}
.cd-prd p{font-size:13.5px;color:var(--text-p2);line-height:1.55;margin:0 0 12px}
.cd-prd-mods{display:flex;flex-wrap:wrap;gap:7px}
.cd-prd-mods span{font-size:10px;color:#93a093;border:1px solid #2b2f2b;border-radius:100px;padding:4px 11px}
.cd-prd>svg{width:26px;height:26px;stroke:var(--brand);fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform var(--dur-2)}
.cd-prd:hover>svg{transform:translateX(5px)}
[dir="rtl"] .cd-prd>svg{transform:scaleX(-1)}
[dir="rtl"] .cd-prd:hover>svg{transform:scaleX(-1) translateX(5px)}

.cd-learn{display:flex;flex-direction:column;gap:16px;max-width:820px;margin:0 auto}
.cd-learn-q{position:relative;border-inline-start:3px solid var(--brand);background:#121412;
  border-radius:0 18px 18px 0;padding:26px 30px}
[dir="rtl"] .cd-learn-q{border-radius:18px 0 0 18px}
.cd-learn-q p{font-size:17px;color:#dce7dc;line-height:1.65;margin:0;font-weight:500}

.cd-more{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cd-more a{position:relative;border:1px solid #262a26;border-radius:20px;background:#121412;padding:26px;
  text-decoration:none;display:flex;flex-direction:column;gap:10px;
  transition:border-color var(--dur-3),transform var(--dur-3) var(--ease)}
.cd-more a:hover{border-color:var(--brand-line);transform:translateY(-4px)}
.cd-more h3{font-size:17px;color:#eef4ee;margin:0;line-height:1.3}
.cd-more p{font-size:12.5px;color:var(--text-p2);line-height:1.55;margin:0}
.cd-more .cs-card-go{margin-top:6px}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1100px){
  .cs-tech-grid,.cs-out-grid{grid-template-columns:repeat(2,1fr)}
  .cs-shift-grid{grid-template-columns:repeat(3,1fr)}
  .cd-mods{grid-template-columns:repeat(2,1fr)}
  .cd-points{grid-template-columns:1fr 1fr}
  .cd-more{grid-template-columns:1fr}
}
@media(max-width:859px){
  .cs-hero-space{height:auto}
  .cs-hero .pd-sticky{position:static;min-height:0;padding:calc(64px + 7vh) 0 60px}
  .cs-hero-grid{grid-template-columns:1fr;gap:40px}
  .cs-grid{grid-template-columns:1fr}
  .cs-feature{grid-template-columns:1fr}
  .cs-feat-vis{border-inline-end:none;border-bottom:1px solid #232723;padding:24px}
  .cs-feat-body{padding:30px 24px}
  .cs-feat-blocks{grid-template-columns:1fr;gap:20px}
  /* stack → vertical story */
  .cs-stack-space{height:auto}
  .cs-stack-stage{height:auto;overflow:visible}
  .cs-panel{position:relative;inset:auto;opacity:1!important;transform:none!important;padding:44px 0}
  .cs-panel-inner{grid-template-columns:1fr;gap:26px}
  .cs-flow{height:340px}
  .cs-shift-grid{grid-template-columns:1fr 1fr}
  .cs-fin-space{height:auto}
  .cs-fin-sticky{position:static;min-height:0;padding:90px 0}
  .cs-fin-stage{height:300px}
  .cd-points{grid-template-columns:1fr}
  .cd-trans{grid-template-columns:1fr}
  .cd-tarrow{padding:14px 0}
  .cd-tarrow svg{transform:rotate(90deg)}
  [dir="rtl"] .cd-tarrow svg{transform:rotate(90deg)}
  .cd-arch-space{height:auto}
  .cd-arch-sticky{position:static;min-height:0}
  .cd-arch-stage{height:520px}
  .cd-an{width:120px}
  .cd-prd{grid-template-columns:1fr;gap:18px;padding:26px 24px}
  .cd-prd>svg{display:none}
  .cd-layer{grid-template-columns:1fr;gap:10px}
}
@media(max-width:520px){
  .cs-shift-grid{grid-template-columns:1fr}
  .cs-tech-grid,.cs-out-grid,.cd-mods{grid-template-columns:1fr}
}

/* ============================================================
   REDUCED MOTION — full static states everywhere
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  .cs-hero-space,.cs-fin-space{height:auto}
  .cs-hero .pd-sticky,.cs-fin-sticky{position:static;min-height:0}
  .cs-hero .pd-sticky{padding:calc(64px + 7vh) 0 60px}
  .cs-fin-sticky{padding:90px 0;gap:30px}
  .cs-stack-space{height:auto}
  .cs-stack-stage{height:auto;overflow:visible}
  .cs-panel{position:relative;inset:auto;opacity:1!important;transform:none!important;padding:44px 0}
  .cs-panel-inner{grid-template-columns:1fr;gap:26px}
  .cd-arch-space{height:auto}
  .cd-arch-sticky{position:static;min-height:0}
  .cs-mini .mbar i,.cs-dash-bars i,.csv-dots i,.csv-dots::before,.csv-dots::after,
  .csv-conv i,.csv-auto i,.csv-meas i,.csv-int i,.csv-int u,.cw-pulse{animation:none!important}
  .csv-dots i{background:var(--brand)}
  .csv-dots::before,.csv-dots::after{opacity:1}
  .csv-conv i{transform:translate(0,0);background:var(--brand)}
  .csv-auto i{background:var(--brand)}
  .csv-meas i{transform:scaleY(1)}
  .csv-int i:last-child{transform:translateX(0);border-color:var(--brand)}
  .csv-int u{transform:scaleX(1);opacity:1}
  .cd-pulse.run{animation:none;left:var(--x1);top:var(--y1);opacity:1}
}

/* ============================================================
   IMPORTED PORTFOLIO — DB-driven cards + detail page
   ============================================================ */

/* language spans for DB content (EN/AR) */
html[lang="ar"] .lang-en{display:none!important}
html:not([lang="ar"]) .lang-ar{display:none!important}

/* portfolio card image variant — full image at natural ratio, no crop/upscale */
.cs-card-vis.cs-card-img{height:auto;border-radius:14px;background:#0d0f0d;border:1px solid #222622;
  overflow:hidden;padding:0}
.cs-card-img img{width:100%;height:auto;aspect-ratio:692/515;object-fit:cover;display:block;opacity:.92;
  transition:transform var(--dur-3) var(--ease),opacity var(--dur-3)}
.cs-card-db:hover .cs-card-img img{transform:scale(1.02);opacity:1}
.cs-card-db.is-hidden{display:none}
.cs-card-cat{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--brand)}

/* portfolio typography — section-scaled +20% */
#csPortfolio .eyebrow{font-size:15.6px}
#csPortfolio .pd-head h2{font-size:clamp(36px,4.8vw,60px)}
#csPortfolio .pd-head p{font-size:19.8px}
#csPortfolio .cs-filter{font-size:15.6px;padding:12px 24px}
#csPortfolio .cs-card-num{font-size:13.2px}
#csPortfolio .cs-chip{font-size:12.6px;padding:6px 14px}
#csPortfolio .cs-card h3{font-size:24px}
#csPortfolio .cs-card p{font-size:16.2px}
#csPortfolio .cs-card-go{font-size:15.6px}
#csPortfolio .cs-card-go svg{width:18px;height:18px}

/* wide screens — use the available width instead of empty side margins */
@media(min-width:1500px){
  #csPortfolio .container{width:min(1720px,100% - 64px)}
  #csPortfolio .cs-grid{grid-template-columns:repeat(3,1fr)}
}
@media(min-width:2100px){
  #csPortfolio .cs-grid{grid-template-columns:repeat(4,1fr)}
}

/* wide screens — case-study sticky panels use more width */
@media(min-width:1600px){
  .cs-panel-inner{width:min(1560px,100% - 64px)}
}
@media(min-width:1920px){
  .cs-panel-inner{width:min(1720px,100% - 80px)}
}

/* detail page */
.csd-hero-img{margin:34px auto 0;max-width:960px;border:1px solid #262a26;border-radius:22px;overflow:hidden;background:#0d0f0d}
.csd-hero-img img{width:100%;height:auto;display:block;opacity:.95}
.csd-outcome{border:1px solid var(--brand-line);border-radius:22px;background:var(--brand-dim);
  padding:34px 32px;max-width:72ch;margin:0 auto}
.csd-outcome p{font-size:16px;color:#dfe9df;line-height:1.7;margin:0}
.csd-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.csd-gallery figure{margin:0;border:1px solid #262a26;border-radius:16px;overflow:hidden;background:#0d0f0d}
.csd-gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;opacity:.92;
  transition:transform var(--dur-3) var(--ease),opacity var(--dur-3)}
.csd-gallery figure:hover img{transform:scale(1.03);opacity:1}
.csd-gallery figcaption{font-size:11px;color:var(--text-p2);padding:10px 14px;border-top:1px solid #222622}
.csd-sec-body{font-size:16px;color:#cdd8cd;line-height:1.7;max-width:72ch;margin:0 0 34px}
.csd-rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:859px){
  .csd-rel-grid{grid-template-columns:1fr}
  .csd-gallery{grid-template-columns:1fr 1fr}
  .csd-outcome{padding:26px 22px}
}
@media(max-width:520px){
  .csd-gallery{grid-template-columns:1fr}
}