/* shared shell for all Ceimi case-study pages — one place to fix, every page follows */
:root{--void:#07131a;--elev:#0e222b;--panel:#0f242e;--shell:#17313a;--smoke:#294a54;--ash:#cde0e1;--fog:#86a0a3;
  --cta:linear-gradient(30deg,#0ad6b4,#3ee66a);--current:linear-gradient(141deg,#1fa8ff,#12e0c0)}
*{box-sizing:border-box}
html{background:var(--void)}
body{margin:0;background:var(--void);color:var(--ash);font-family:'DM Sans',sans-serif;font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:#2fc4d8;text-decoration:none} a:hover{color:#12e0c0}
::selection{background:rgba(18,224,192,.25);color:#fff}
.wrap{max-width:1100px;margin:0 auto;padding:0 clamp(20px,4vw,40px)}
.eyebrow{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--fog);margin:0}
h1,h2{font-weight:300;letter-spacing:-.02em;color:#fff;margin:0}
.card{background:var(--elev);border-radius:16px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08), inset 0 1px 0 0 rgba(18,224,192,.30)}
.vimg{display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.card:hover .vimg{transform:scale(1.045)}
.vlabel{position:absolute;left:16px;bottom:14px;background:rgba(7,19,26,.78);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(18,224,192,.25);border-radius:9999px;padding:7px 14px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#dff7f2}
.pill{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--smoke);border-radius:9999px;padding:8px 16px;font-size:13px;color:var(--ash)}
.pill s{color:var(--fog)}
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.service-card{padding:28px;min-height:210px}
.service-card h3{margin:18px 0 0;font-size:21px;font-weight:400;color:#fff}
.service-card p{margin:12px 0 0;font-size:15px;line-height:1.7;color:var(--fog)}
.proof-link{display:grid;grid-template-columns:minmax(180px,.8fr) minmax(260px,1.6fr) auto;gap:24px;align-items:center;padding:24px 0;border-top:1px solid rgba(41,74,84,.65);color:inherit}
.proof-link:last-child{border-bottom:1px solid rgba(41,74,84,.65)}
.proof-link strong{font-size:18px;font-weight:400;color:#fff}
.proof-link span{font-size:15px;line-height:1.55;color:var(--fog)}
.proof-link b{font-weight:400;color:#12e0c0}
.casenav{position:fixed;top:0;left:0;right:0;z-index:50;height:66px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(16px,4vw,40px);background:rgba(7,19,26,.82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid rgba(41,74,84,.6)}
.casenav a[href*="wa.me"]{display:inline-flex;align-items:center;justify-content:center;height:36px;background:var(--cta);color:#052019;font-size:14px;font-weight:500;padding:0 18px;border-radius:8px;line-height:1;box-sizing:border-box;transition:filter .3s}
.casenav a[href*="wa.me"]:hover{filter:brightness(1.1);color:#052019}
/* reveals only hide content once JS is confirmed alive, so if case.js never runs the page still reads */
html.js [data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
html.js [data-reveal].in{opacity:1;transform:none}
/* Page-scroll strip: the image is the box background, so the browser only ever rasterizes the visible
   520px. Translating the full image instead (sb-strip is 9112px tall) builds one composited layer
   past WebKit's texture limit on retina phones, which drops the frame or kills the tab. */
.strip{position:relative;overflow:hidden;height:520px;border-radius:inherit;
  background:#0a1c24 var(--strip) no-repeat center top/100% auto;
  animation:strip 18s ease-in-out infinite}
@keyframes strip{0%,6%{background-position-y:top}48%,56%{background-position-y:bottom}94%,100%{background-position-y:top}}
@media(max-width:860px){
  [data-cols]{grid-template-columns:1fr !important}
  [data-bento]{grid-template-columns:1fr !important}
  [data-bento]>*{height:240px !important}
  .service-grid{grid-template-columns:1fr}
  .proof-link{grid-template-columns:1fr auto;gap:8px 16px}
  .proof-link span{grid-column:1/-1;grid-row:2}
  .proof-link b{grid-column:2;grid-row:1}
}
@media (prefers-reduced-motion: reduce){ *{animation:none !important;transition:none !important} [data-reveal]{opacity:1;transform:none} }

.vimg{cursor:zoom-in}
.vlb{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;background:rgba(5,8,10,.94);padding:16px;-webkit-user-select:none;user-select:none}
.vlb.on{display:flex}
.vlb img{max-width:100%;max-height:92vh;object-fit:contain;border-radius:8px;transition:transform .25s;touch-action:none}
.vlb-hint{position:absolute;bottom:14px;left:0;right:0;text-align:center;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#86a0a3}
.vlb-x{position:absolute;top:14px;right:18px;background:none;border:none;color:#cde0e1;font-size:30px;line-height:1;cursor:pointer;padding:8px}