/* ==========================================================================
   Case Study — premium template (single-case-study.php)
   Everything is scoped to .csp and prefixed csp- so Twenty Twenty / Elementor
   styles can't leak in and these styles can't leak out.
   ========================================================================== */

.csp{
  --csp-ink:#0b0c0e;
  --csp-ink-2:#121519;
  --csp-line-d:rgba(255,255,255,.10);
  --csp-line-l:rgba(11,12,14,.11);
  --csp-paper:#f4f1ea;
  --csp-paper-2:#e9e4d9;
  --csp-sand:#c9b48a;
  --csp-sand-bg:#ece3d1;
  --csp-muted-d:rgba(255,255,255,.64);
  --csp-muted-l:#565a61;
  --csp-blue:#016fff;
  --csp-blue-hover:#005ad0;
  --csp-blue-soft:#5a9eff;
  --csp-wrap:1240px;
  --csp-gutter:clamp(16px,4vw,40px);
  --csp-edge:max(var(--csp-gutter), calc((100vw - var(--csp-wrap)) / 2 + var(--csp-gutter)));
  --csp-top:65px;               /* site header height — set at runtime by the JS */
  --csp-f:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --csp-ease:cubic-bezier(.2,.7,.2,1);
  position:relative;
  background:var(--csp-ink);
  color:#fff;
  font-family:var(--csp-f);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}

/* ---- reset theme styles inside the template ---- */
.csp *,.csp *::before,.csp *::after{box-sizing:border-box}
.csp h1,.csp h2,.csp h3,.csp h4,.csp p,.csp ul,.csp ol,.csp li,.csp figure,.csp figcaption,.csp dl,.csp dt,.csp dd,.csp blockquote{margin:0;padding:0}
.csp ul,.csp ol{list-style:none}
.csp h1,.csp h2,.csp h3,.csp h4{font-family:var(--csp-f);font-weight:700;letter-spacing:-.03em;line-height:1.05;text-transform:none;color:inherit}
.csp a{color:inherit;text-decoration:none;box-shadow:none}
.csp a:hover,.csp a:focus{text-decoration:none}
.csp img{display:block;max-width:100%;height:auto;border:0}
.csp :focus-visible{outline:2px solid var(--csp-blue-soft);outline-offset:3px;border-radius:6px}

/* film grain (absolute, because position:fixed breaks inside Locomotive's transformed container) */
.csp::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---- shared ---- */

/* reading progress — the JS moves it to <body> so it stays fixed under Locomotive */
.csp-progress{position:fixed;left:0;top:0;z-index:9999;height:2px;width:100%;background:linear-gradient(90deg,#016fff,#5a9eff);transform-origin:0 50%;transform:scaleX(0);pointer-events:none}

/* ==========================================================================
   HERO — fits one screen under the site header
   ========================================================================== */
.csp-hero{position:relative;overflow:hidden;--mx:70%;--my:20%}

.csp .csp-hero h1{font-size:clamp(32px,min(5vw,7.4vh),74px);letter-spacing:-.035em;line-height:1.06;max-width:1160px}

@keyframes csp-rise{to{transform:none}}

@keyframes csp-cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ==========================================================================
   01 PROJECT CHALLENGES — horizontal (pinned on desktop, swipe on touch)
   ========================================================================== */
.csp-hs{position:relative;padding:clamp(80px,10vw,120px) 0}
.csp-hs__track{display:flex;gap:24px;padding:0 var(--csp-edge);scroll-padding-inline:var(--csp-edge);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.csp-hs__track::-webkit-scrollbar{display:none}

.csp-hs__bar{margin:clamp(28px,4vh,44px) var(--csp-edge) 0;height:2px;background:var(--csp-line-l);border-radius:2px;overflow:hidden}
.csp-hs__bar span{display:block;height:100%;background:var(--csp-blue);transform-origin:0 50%;transform:scaleX(var(--hp,0))}
/* pinned mode (added by JS on desktop) */
.csp-hs.is-pinned{min-height:calc(100vh - var(--csp-top));display:flex;flex-direction:column;justify-content:center;padding:4vh 0}
.csp-hs.is-pinned .csp-hs__track{overflow:visible;scroll-snap-type:none;will-change:transform}

/* ==========================================================================
   02 OUR SOLUTIONS — scrollytelling with a CSS laptop
   ========================================================================== */
.csp-sol{position:relative;padding:clamp(80px,10vw,130px) 0 clamp(40px,6vw,80px)}

.csp-sol__grid{position:relative;display:grid;grid-template-columns:.9fr 1.25fr;gap:clamp(32px,5vw,80px)}

.csp-step{min-height:72vh;display:flex;flex-direction:column;justify-content:center;padding:6vh 0;opacity:.28;transition:opacity .6s var(--csp-ease)}
.csp-step.is-on{opacity:1}

.csp .csp-step h3{font-size:clamp(28px,3vw,42px);margin-bottom:18px}

.csp-stage{height:calc(100vh - var(--csp-top) - 48px);display:flex;flex-direction:column;justify-content:center;gap:24px}
.csp-laptop{position:relative;width:100%;transform-origin:50% 100%;will-change:transform}
.csp-laptop::after{content:"";position:absolute;left:8%;right:8%;bottom:-8%;height:30%;background:radial-gradient(closest-side,rgba(1,111,255,.45),transparent);filter:blur(30px);z-index:-1}

.csp-laptop__screen{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:4px;background:#fff}
.csp-laptop__screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;opacity:0;transform:scale(1.04);transition:opacity .7s var(--csp-ease),transform 1.2s var(--csp-ease)}
.csp-laptop__screen img.is-on{opacity:1;transform:none}

.csp-dots{display:flex;gap:8px}
.csp-dots span{width:22px;height:3px;border-radius:3px;background:rgba(255,255,255,.18);transition:background .4s,width .4s var(--csp-ease)}
.csp-dots span.is-on{background:var(--csp-blue);width:40px}

/* ==========================================================================
   SERVICES — spotlight card grid (any number of services)
   ========================================================================== */

.csp-svc__count{position:absolute;top:.08em;right:-1.25em;display:grid;place-items:center;min-width:1.05em;height:1.05em;padding:0 .2em;border-radius:999px;font-size:.3em;font-weight:700;letter-spacing:0;color:#fff;background:var(--csp-blue);box-shadow:0 0 0 6px rgba(1,111,255,.18)}
.csp-svc__grid{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;counter-reset:svc}
.csp-scv{--x:50%;--y:50%;--rx:0deg;--ry:0deg;counter-increment:svc;position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:40px;min-height:clamp(210px,17vw,240px);padding:24px 24px 26px;border-radius:24px;background:linear-gradient(160deg,#141922 0%,#0d1117 100%);border:1px solid rgba(255,255,255,.07);overflow:hidden;isolation:isolate;transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--ty,0px));transition:transform .5s var(--csp-ease),box-shadow .5s var(--csp-ease)}
.csp-scv::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(420px circle at var(--x) var(--y),rgba(1,111,255,.20),transparent 45%);opacity:0;transition:opacity .4s}
.csp-scv::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:radial-gradient(320px circle at var(--x) var(--y),rgba(120,175,255,.95),transparent 45%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .4s;pointer-events:none}
.csp-svc__grid:hover .csp-scv::before,.csp-svc__grid:hover .csp-scv::after{opacity:1}

.csp .csp-scv h3{position:relative;font-size:clamp(19px,1.5vw,22px);letter-spacing:-.025em;line-height:1.25;max-width:14ch}
.csp-scv h3::after{content:"";display:block;width:28px;height:2px;margin-top:14px;border-radius:2px;background:var(--csp-blue);transition:width .5s var(--csp-ease),background .4s}
.csp-scv:hover{--ty:-6px;box-shadow:0 34px 60px -30px rgba(1,111,255,.6)}

.csp-scv:hover h3::after{width:56px}

.csp-svc__more{position:relative;grid-column:span 1;display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:clamp(210px,17vw,240px);padding:28px 32px;border-radius:24px;overflow:hidden;isolation:isolate;background:#0d1117}
.csp-svc__more::before{content:"";position:absolute;inset:-60%;z-index:-2;background:conic-gradient(from 0deg,transparent 0 70%,rgba(90,158,255,.9) 82%,transparent 92%);animation:csp-spin 6s linear infinite}
.csp-svc__more::after{content:"";position:absolute;inset:1px;z-index:-1;border-radius:23px;background:linear-gradient(160deg,#141922,#0b0e13)}
.csp-svc__more b{font-size:clamp(22px,2.2vw,34px);font-weight:800;letter-spacing:-.035em;line-height:1.1}
.csp-svc__more i{flex:none;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--csp-ink);transform:rotate(-45deg);transition:transform .5s var(--csp-ease),background .35s,color .35s}
.csp-svc__more i svg{width:20px;height:20px}
.csp-svc__more:hover i{transform:none;background:var(--csp-blue);color:#fff}
@keyframes csp-spin{to{transform:rotate(360deg)}}

/* ==========================================================================
   OUR STRATEGY — image + numbered cards
   ========================================================================== */
.csp-strat__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,5vw,80px);align-items:start;margin-top:clamp(40px,5vw,64px)}
.csp-strat__media{border-radius:28px;overflow:hidden;padding:clamp(16px,2.4vw,32px);background:radial-gradient(ellipse 70% 55% at 50% 100%,rgba(1,111,255,.30),transparent 70%),linear-gradient(160deg,#16243a 0%,#0f141c 60%,#0b0c0e 100%);border:1px solid rgba(255,255,255,.08)}
.csp-strat__media img{width:100%;mix-blend-mode:lighten}

/* ==========================================================================
   03 RESULTS — stacking cards (pinned by JS)
   ========================================================================== */

.csp .csp-rcard h3{font-size:clamp(30px,4.4vw,60px);letter-spacing:-.04em;margin-bottom:20px}
.csp .csp-rcard p{font-size:clamp(16px,1.3vw,18.5px);max-width:540px;opacity:.8}

/* ==========================================================================
   04 ONGOING SUCCESS — cinematic image + project snapshot
   ========================================================================== */
.csp-reveal{height:calc(100vh - var(--csp-top));display:flex;align-items:center;justify-content:center}
.csp-reveal__fig{position:relative;width:calc(100% - 2 * var(--csp-gutter));max-width:var(--csp-wrap);height:min(76vh,680px);margin:0 auto;border-radius:32px;overflow:hidden;clip-path:inset(var(--iy,0%) var(--ix,0%) round 32px)}
.csp-reveal__fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 60%}
.csp-reveal__fig::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,12,14,.85) 0%,rgba(11,12,14,.35) 55%,rgba(11,12,14,.15) 100%)}
.csp-reveal__copy{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:center;padding:clamp(28px,6vw,80px)}

@keyframes csp-ping{0%{transform:scale(1);opacity:.7}100%{transform:scale(3.2);opacity:0}}

/* ==========================================================================
   RELATED CASE STUDIES — swipe strip
   ========================================================================== */

.csp-rel__track{display:flex;gap:24px;padding:0 var(--csp-edge) 8px;scroll-padding-inline:var(--csp-edge);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.csp-rel__track::-webkit-scrollbar{display:none}
.csp-rel{position:relative;flex:0 0 clamp(280px,28vw,380px);scroll-snap-align:start;display:flex;flex-direction:column}
.csp-rel figure{position:relative;aspect-ratio:4/4.6;border-radius:28px;overflow:hidden;background:var(--csp-paper-2);isolation:isolate}
.csp-rel figure img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--csp-ease)}
.csp-rel figure::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(11,12,14,.8))}
.csp-rel:hover figure img{transform:scale(1.07)}

.csp .csp-rel > p{color:var(--csp-muted-l);font-size:15.5px;margin-top:18px}

/* ==========================================================================
   CTA
   ========================================================================== */
.csp-cta{position:relative;overflow:hidden;text-align:center;padding:clamp(100px,14vw,180px) 0}

.csp .csp-cta h2{font-size:clamp(30px,4.6vw,68px);letter-spacing:-.04em;line-height:1.08;max-width:1080px;margin:0 auto 48px}

.csp-magnet{display:inline-block;transition:transform .4s var(--csp-ease)}

/* ==========================================================================
   Scroll-in animation
   ========================================================================== */
.csp-js .csp-rv{opacity:0;transform:translateY(30px);transition:opacity 1s var(--csp-ease),transform 1s var(--csp-ease)}
.csp-js .csp-rv.is-in{opacity:1;transform:none}
.csp-js .csp-scv,.csp-js .csp-svc__more{opacity:0;translate:0 26px;transition:opacity .8s var(--csp-ease),translate .8s var(--csp-ease),transform .5s var(--csp-ease),box-shadow .5s var(--csp-ease);transition-delay:calc(var(--d,0) * 60ms),calc(var(--d,0) * 60ms),0s,0s}
.csp-js .csp-svc__grid.is-in .csp-scv,.csp-js .csp-svc__grid.is-in .csp-svc__more{opacity:1;translate:0 0}
/* hero copy fades in with CSS only, so it never waits for JS */

@keyframes csp-fade{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
/* failsafe: if the script never initialises, show everything after 4s */
.csp-failsafe:not(.csp-ready) .csp-rv,.csp-failsafe:not(.csp-ready) .csp-scv,.csp-failsafe:not(.csp-ready) .csp-svc__more{opacity:1;transform:none;translate:none}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  .csp *,.csp *::before,.csp *::after{animation:none!important;transition:none!important}
  .csp-js .csp-rv,.csp-js .csp-scv,.csp-js .csp-svc__more{transform:none;translate:none;opacity:1}
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1024px){
  
  .csp .csp-hero h1{font-size:clamp(32px,6vw,54px)}
  .csp-strat__grid{grid-template-columns:1fr}
  
  .csp-sol__grid{grid-template-columns:1fr}
  .csp-stage{display:none}
  .csp-step{min-height:0;opacity:1;padding:36px 0;border-top:1px solid var(--csp-line-d)}

  .csp-svc__grid{grid-template-columns:repeat(3,1fr)}

}
@media (max-width:640px){
  .csp{font-size:16px}

  .csp-svc__grid{grid-template-columns:1fr 1fr;gap:12px}
  .csp-scv{min-height:170px;padding:18px 16px 20px;gap:24px;border-radius:20px}

  .csp .csp-scv h3{font-size:16px}
  .csp-svc__count{right:-1.4em}
  .csp-svc__more{min-height:150px;padding:22px;border-radius:20px}
  .csp-svc__more::after{border-radius:19px}
  .csp-svc__more i{width:52px;height:52px}
  
  .csp-reveal__fig{border-radius:22px}
  
  .csp-rel{flex-basis:82vw}
}