/* ========================================================================
   AI LAB · CASE STUDIES  (overview + detail pages)
   Loaded after /css/style.css and before /css/a11y-focus.css, only on the case pages.
   Material = the AI Concierge's midnight optical glass (same numbers as the nav, the
   footer card and the contact panels): deep blue ground, violet refraction, electric-blue
   signal. Headlines = Plus Jakarta Sans (the site's h1 voice), UI = Inter (the concierge).
   Every motion here is behind prefers-reduced-motion; hover-only detail is never the only
   route to information.
   ======================================================================== */
body.page-cases{
  --cs-bg:#070B1B;--cs-bg2:#0A1024;
  --cs-ink:#F7F9FF;--cs-mute:rgba(214,224,255,.64);--cs-dim:rgba(214,224,255,.42);--cs-hair:rgba(190,208,255,.14);
  --cs-blue:#5FA8FF;--cs-blue-ink:#8CC0FF;--cs-vio:#8B7CFF;
  --cs-glass:rgba(13,20,56,.58);--cs-glass-h:rgba(16,25,66,.66);
  --cs-rim:0 0 0 1px rgba(130,170,255,.30),0 0 0 2px rgba(110,77,255,.10),0 18px 44px rgba(2,6,24,.5),inset 0 1px 0 rgba(170,205,255,.30),inset 0 0 0 1px rgba(255,255,255,.05);
  --cs-rim-h:0 0 0 1px rgba(150,190,255,.55),0 0 0 2px rgba(110,77,255,.20),0 0 40px rgba(36,107,255,.26),0 26px 60px rgba(2,6,24,.6),inset 0 1px 0 rgba(170,205,255,.5),inset 0 0 0 1px rgba(255,255,255,.07);
  --cs-spec:radial-gradient(60% 50% at 0% 0%,rgba(70,140,255,.26),transparent 62%),linear-gradient(180deg,rgba(150,190,255,.12),rgba(150,190,255,0) 30%),radial-gradient(55% 45% at 100% 100%,rgba(110,77,255,.22),transparent 62%);
  --cs-ui:Inter,"Plus Jakarta Sans",sans-serif;
  --cs-out:cubic-bezier(.2,.7,.2,1);
  background:var(--cs-bg);color:var(--cs-ink)}
body.page-cases main{background:linear-gradient(180deg,var(--cs-bg) 0%,var(--cs-bg2) 100%)}
body.page-cases ::selection{background:rgba(95,168,255,.35);color:#fff}
/* the light footer band under the glass card is the site's own; keep the seam invisible */
body.page-cases .ft.ft-glass{background:linear-gradient(180deg,var(--cs-bg2) 0%,#0A1024 100%)}

/* ---------- shared bits ---------- */
.cs-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.cs-eyebrow{display:flex;align-items:center;gap:8px;font-family:var(--cs-ui);font-size:12.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--cs-mute)}
.cs-eyebrow::before{content:"";width:3px;height:14px;border-radius:2px;background:var(--cs-blue);box-shadow:0 0 10px rgba(95,168,255,.6)}
.cs-kicker{display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 12px;border-radius:999px;font-family:var(--cs-ui);font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#DCE7FF;
  background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(160,190,255,.26),inset 0 1px 0 rgba(255,255,255,.08)}
.cs-kicker i{width:7px;height:7px;border-radius:50%;flex:none;background:radial-gradient(circle at 34% 30%,#eaf5ff 0,#8cc2ff 30%,#4f9dff 58%,#1f6fe0 100%);box-shadow:inset 0 -1px 1px rgba(10,40,120,.35),0 0 8px rgba(95,168,255,.7)}
.cs-kicker[data-kind="internal"] i{background:radial-gradient(circle at 34% 30%,#ffd9c6 0,#ff9660 30%,#ff6a2b 58%,#d24a12 100%);box-shadow:inset 0 -1px 1px rgba(120,30,0,.35),0 0 8px rgba(255,106,43,.6)}
.cs-kicker[data-kind="lab"] i{background:radial-gradient(circle at 34% 30%,#efe8ff 0,#c2b3ff 30%,#8B7CFF 58%,#5a45d6 100%);box-shadow:inset 0 -1px 1px rgba(40,20,120,.35),0 0 8px rgba(139,124,255,.7)}
.cs-kicker[data-kind="demo"] i{background:radial-gradient(circle at 34% 30%,#ffffff 0,#dfe6f5 30%,#a9b6d3 58%,#7d8aa8 100%);box-shadow:0 0 6px rgba(200,215,255,.5)}

/* glass buttons: the AI LAB capsule language (same numbers as the contact page's book button) */
.cs-btn{display:inline-flex;align-items:center;gap:12px;height:52px;padding:0 24px;border-radius:999px;font-family:var(--cs-ui);font-size:15.5px;font-weight:500;letter-spacing:-.02em;color:#fff;cursor:pointer;white-space:nowrap;
  background:linear-gradient(135deg,rgba(60,110,230,.55),rgba(63,42,143,.45));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 0 0 1px rgba(160,195,255,.35),0 0 20px rgba(36,107,255,.22);
  transition:transform .3s var(--cs-out),box-shadow .3s var(--cs-out),background .3s var(--cs-out)}
.cs-btn i{width:7px;height:7px;border-radius:50%;flex:none;background:radial-gradient(circle at 34% 30%,#eaf5ff 0,#8cc2ff 30%,#4f9dff 58%,#1f6fe0 100%);box-shadow:inset 0 -1px 1px rgba(10,40,120,.35),0 0 8px rgba(95,168,255,.7)}
.cs-btn svg{width:14px;height:14px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--cs-out)}
.cs-btn-solid{background:linear-gradient(135deg,#3B86FF,#246BFF);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 8px 20px rgba(36,107,255,.32),0 0 0 1px rgba(160,195,255,.25)}
.cs-btn-ghost{background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(160,190,255,.28),inset 0 1px 0 rgba(255,255,255,.08)}
@media (hover:hover) and (pointer:fine){
  .cs-btn:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 0 0 1px rgba(160,195,255,.6),0 0 28px rgba(36,107,255,.36)}
  .cs-btn-solid:hover{background:linear-gradient(135deg,#4A93FF,#2C74FF);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 12px 26px rgba(36,107,255,.4),0 0 0 1px rgba(160,195,255,.4)}
  .cs-btn:hover svg{transform:translateX(3px)}
}

/* ========================================================================
   OVERVIEW
   ======================================================================== */
.cs-hero{position:relative;padding:168px 0 26px;overflow:clip}
.cs-hero-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.cs-hero-bg img{position:absolute;right:-16%;top:-30%;width:78%;min-width:820px;opacity:.55;filter:blur(26px) saturate(1.3) brightness(.95);mix-blend-mode:screen;transform:scale(1.08)}
.cs-hero-bg::before{content:"";position:absolute;left:-10%;top:-20%;width:60%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(36,107,255,.20),transparent 70%)}
.cs-hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,11,27,.10) 0%,rgba(7,11,27,.55) 55%,var(--cs-bg) 100%)}
.cs-hero .wrap{position:relative}
.cs-h1{margin-top:22px;font-size:clamp(50px,7.2vw,104px);font-weight:600;line-height:1.02;letter-spacing:-.04em;color:#fff;max-width:1200px}
.cs-h1 .blue{color:var(--cs-blue)}
.cs-hero-row{display:flex;align-items:flex-end;justify-content:space-between;gap:48px;margin-top:30px}
.cs-hero-sub{font-size:19px;line-height:1.5;letter-spacing:-.01em;color:var(--cs-mute);max-width:560px}
.cs-hero-sub b{color:var(--cs-ink);font-weight:500}
.cs-ledger{display:flex;gap:0;flex:none;font-family:var(--cs-ui);letter-spacing:-.02em}
.cs-ledger div{padding:0 28px;border-left:1px solid var(--cs-hair)}
.cs-ledger div:first-child{padding-left:0;border-left:0}
.cs-ledger b{display:block;font-size:30px;font-weight:500;line-height:1;color:#fff}
.cs-ledger span{display:block;margin-top:8px;font-size:13.5px;color:var(--cs-dim)}

/* the honesty line: how the cases are labelled */
.cs-legend{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin-top:44px;padding-top:24px;border-top:1px solid var(--cs-hair);font-family:var(--cs-ui);font-size:13.5px;letter-spacing:-.01em;color:var(--cs-dim)}
.cs-legend .cs-kicker{height:26px;font-size:10.5px}
.cs-legend p{margin-right:auto;color:var(--cs-mute)}

/* ---------- filter bar ---------- */
.cs-bar{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:40px}
.cs-tabs{display:inline-flex;align-items:center;gap:2px;padding:4px;border-radius:999px;background:var(--cs-glass);box-shadow:inset 0 0 0 1px rgba(160,190,255,.22),inset 0 1px 0 rgba(255,255,255,.08);-webkit-backdrop-filter:blur(20px) saturate(1.3);backdrop-filter:blur(20px) saturate(1.3)}
.cs-tab{position:relative;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:999px;font-family:var(--cs-ui);font-size:14.5px;font-weight:500;letter-spacing:-.02em;color:var(--cs-mute);white-space:nowrap;
  transition:color .25s var(--cs-out),background .25s var(--cs-out),box-shadow .25s var(--cs-out)}
.cs-tab small{font-size:11.5px;font-weight:600;color:var(--cs-dim);font-variant-numeric:tabular-nums;transition:color .25s}
.cs-tab[aria-pressed="true"]{color:#fff;background:linear-gradient(135deg,rgba(60,110,230,.6),rgba(63,42,143,.5));box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 0 0 1px rgba(160,195,255,.35),0 0 18px rgba(36,107,255,.25)}
.cs-tab[aria-pressed="true"] small{color:rgba(255,255,255,.75)}
@media (hover:hover) and (pointer:fine){.cs-tab:not([aria-pressed="true"]):hover{color:#fff;background:rgba(95,168,255,.12)}}
.cs-search{display:flex;align-items:center;gap:10px;flex:0 0 280px;height:48px;padding:0 8px 0 18px;border-radius:999px;background:var(--cs-glass);color:var(--cs-dim);
  box-shadow:inset 0 0 0 1px rgba(160,190,255,.22),inset 0 1px 0 rgba(255,255,255,.08);-webkit-backdrop-filter:blur(20px) saturate(1.3);backdrop-filter:blur(20px) saturate(1.3);transition:box-shadow .25s var(--cs-out)}
.cs-search:focus-within{box-shadow:inset 0 0 0 1px rgba(150,190,255,.6),0 0 0 3px rgba(95,168,255,.22),0 0 22px rgba(36,107,255,.25)}
.cs-search svg{flex:none;width:15px;height:15px}
.cs-search input{flex:1;min-width:0;height:100%;border:0;outline:none;background:none;font-family:var(--cs-ui);font-size:14.5px;letter-spacing:-.01em;color:#fff;-webkit-appearance:none;appearance:none}
.cs-search input::placeholder{color:var(--cs-dim)}
.cs-search input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.cs-search-clear{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;color:var(--cs-mute);opacity:0;pointer-events:none;transition:opacity .2s,background .2s}
.cs-search-clear svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.cs-search.has-q .cs-search-clear{opacity:1;pointer-events:auto}
.cs-search-clear:hover{background:rgba(255,255,255,.08);color:#fff}
.cs-status{margin-top:18px;font-family:var(--cs-ui);font-size:13.5px;letter-spacing:-.01em;color:var(--cs-dim);min-height:20px}

/* ---------- case grid ---------- */
.cs-grid{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:22px}
.cs-card{position:relative;isolation:isolate;display:flex;flex-direction:column;border-radius:26px;overflow:hidden;color:var(--cs-ink);
  background:var(--cs-glass);box-shadow:var(--cs-rim);-webkit-backdrop-filter:blur(20px) saturate(1.3);backdrop-filter:blur(20px) saturate(1.3);
  transition:transform .5s var(--cs-out),box-shadow .5s var(--cs-out),background .5s var(--cs-out),opacity .32s var(--cs-out)}
.cs-card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;background:var(--cs-spec)}
.cs-card::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;padding:1.5px;opacity:.7;
  background:linear-gradient(200deg,rgba(150,195,255,.8),rgba(150,195,255,0) 28%,rgba(110,77,255,0) 70%,rgba(110,77,255,.5));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;transition:opacity .5s var(--cs-out)}
.cs-card[hidden]{display:none}
.cs-card.is-out{opacity:0;transform:scale(.985);pointer-events:none}
.cs-card.is-flip{transition:none}
/* media: the large visual, masked in on entrance, scaled on hover */
.cs-media{position:relative;margin:10px 10px 0;border-radius:18px;overflow:hidden;aspect-ratio:16/10;background:#0B1230;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);transform:translateZ(0)}
.cs-media img,.cs-media video{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.001);transition:transform 1.1s var(--cs-out),filter .8s var(--cs-out)}
.cs-media::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(7,11,27,0) 55%,rgba(7,11,27,.42) 100%)}
.cs-media .cs-sheen{position:absolute;inset:0;pointer-events:none;opacity:0;transform:translateX(-70%) skewX(-12deg);
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.10) 48%,rgba(150,120,255,.08) 52%,transparent 66%)}
.cs-media-tag{position:absolute;left:14px;top:14px;z-index:1;display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px 0 10px;border-radius:999px;font-family:var(--cs-ui);font-size:12px;font-weight:500;letter-spacing:-.01em;color:#fff;
  background:rgba(7,11,27,.5);box-shadow:inset 0 0 0 1px rgba(190,215,255,.28),inset 0 1px 0 rgba(255,255,255,.1);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.cs-media-tag i{width:7px;height:7px;border-radius:50%;background:radial-gradient(circle at 34% 30%,#eaf5ff 0,#8cc2ff 30%,#4f9dff 58%,#1f6fe0 100%);box-shadow:0 0 8px rgba(95,168,255,.8)}
.cs-media-tag[data-live="paper"] i,.cs-media-tag[data-live="internal"] i{background:radial-gradient(circle at 34% 30%,#ffd9c6 0,#ff9660 30%,#ff6a2b 58%,#d24a12 100%);box-shadow:0 0 8px rgba(255,106,43,.7)}
.cs-media-tag[data-live="demo"] i,.cs-media-tag[data-live="local"] i{background:radial-gradient(circle at 34% 30%,#fff 0,#dfe6f5 30%,#a9b6d3 58%,#7d8aa8 100%);box-shadow:0 0 6px rgba(200,215,255,.5)}
/* body */
.cs-body{display:flex;flex-direction:column;flex:1;padding:26px 28px 28px}
.cs-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-family:var(--cs-ui);font-size:13px;letter-spacing:-.01em;color:var(--cs-dim)}
.cs-meta .cs-kicker{height:26px;font-size:10.5px;padding:0 10px}
.cs-meta span+span::before{content:"";display:inline-block;width:3px;height:3px;border-radius:50%;background:var(--cs-dim);margin:0 12px 3px 0}
.cs-meta .cs-kicker+span::before{display:none}
.cs-card h2,.cs-card h3{margin-top:18px;font-size:clamp(28px,2.4vw,36px);font-weight:600;line-height:1.08;letter-spacing:-.03em;color:#fff}
.cs-card h2 small,.cs-card h3 small{display:block;margin-top:6px;font-family:var(--cs-ui);font-size:14.5px;font-weight:500;letter-spacing:-.01em;color:var(--cs-mute)}
.cs-story{margin-top:14px;font-size:17px;line-height:1.5;letter-spacing:-.01em;color:var(--cs-mute);max-width:560px}
.cs-facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:24px}
.cs-facts li{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 13px 0 11px;border-radius:999px;font-family:var(--cs-ui);font-size:13px;letter-spacing:-.01em;color:var(--cs-mute);
  background:rgba(255,255,255,.055);box-shadow:inset 0 0 0 1px rgba(160,190,255,.2),inset 0 1px 0 rgba(255,255,255,.06)}
.cs-facts b{font-weight:600;color:#fff;font-variant-numeric:tabular-nums}
.cs-facts li i{width:5px;height:5px;border-radius:50%;background:var(--cs-blue);box-shadow:0 0 6px rgba(95,168,255,.7);flex:none}
.cs-go{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:22px;padding-top:18px;border-top:1px solid var(--cs-hair);font-family:var(--cs-ui);font-size:14px;font-weight:500;letter-spacing:-.02em;color:var(--cs-blue-ink)}
.cs-go span{display:inline-flex;align-items:center;gap:8px}
.cs-go svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--cs-out)}
.cs-go em{font-style:normal;color:var(--cs-dim);font-weight:400}
/* hover: lift, brighter rim, image scale, sheen, arrow slide, title resolves to pure white */
@media (hover:hover) and (pointer:fine){
  .cs-card:hover{transform:translateY(-4px);box-shadow:var(--cs-rim-h);background:var(--cs-glass-h)}
  .cs-card:hover::after{opacity:1}
  .cs-card:hover .cs-media img,.cs-card:hover .cs-media video{transform:scale(1.045)}
  .cs-card:hover .cs-sheen{animation:csSheen .9s var(--cs-out) both}
  .cs-card:hover .cs-go svg{transform:translateX(4px)}
  .cs-card:hover .cs-go{color:#fff}
  .cs-card:hover .cs-story{color:#DCE7FF}
}
@keyframes csSheen{0%{opacity:0;transform:translateX(-70%) skewX(-12deg)}25%{opacity:1}100%{opacity:0;transform:translateX(120%) skewX(-12deg)}}
.cs-card:focus-visible{outline:none;box-shadow:var(--cs-rim-h),0 0 0 3px rgba(95,168,255,.62)}
/* cursor response: a small pill that follows a fine pointer inside the grid (never the only affordance) */
.cs-cursor{position:fixed;left:0;top:0;z-index:60;pointer-events:none;display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px 0 12px;border-radius:999px;font-family:var(--cs-ui);font-size:12.5px;font-weight:500;letter-spacing:-.01em;color:#fff;
  background:rgba(13,20,56,.72);box-shadow:0 0 0 1px rgba(150,190,255,.45),0 0 18px rgba(36,107,255,.3),inset 0 1px 0 rgba(170,205,255,.35);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  opacity:0;transform:translate3d(var(--x,0px),var(--y,0px),0) translate(18px,18px) scale(.9);transition:opacity .22s var(--cs-out),transform .06s linear;will-change:transform}
.cs-cursor.on{opacity:1;transform:translate3d(var(--x,0px),var(--y,0px),0) translate(18px,18px) scale(1)}
.cs-cursor i{width:6px;height:6px;border-radius:50%;background:radial-gradient(circle at 34% 30%,#eaf5ff 0,#8cc2ff 30%,#4f9dff 58%,#1f6fe0 100%);box-shadow:0 0 8px rgba(95,168,255,.9)}
@media (hover:none),(pointer:coarse){.cs-cursor{display:none}}
/* empty state */
.cs-empty{display:none;margin-top:22px;padding:44px 36px;border-radius:26px;text-align:left;background:var(--cs-glass);box-shadow:var(--cs-rim)}
.cs-empty.on{display:block}
.cs-empty h2{font-size:26px;font-weight:600;letter-spacing:-.03em;color:#fff}
.cs-empty p{margin-top:10px;font-size:16px;line-height:1.5;color:var(--cs-mute);max-width:520px}
.cs-empty .cs-btn{margin-top:22px;height:44px;font-size:14.5px}
.cs-empty q{quotes:"\201C" "\201D";color:#fff}

/* ---------- entrance: masked reveal for cards, resolve for type ----------
   piggybacks on the site's [data-nv-reveal] -> .in observer in main.js */
.cs-card[data-nv-reveal]{opacity:0;transform:translateY(28px);transition:opacity .8s var(--spring),transform .8s var(--spring),box-shadow .5s var(--cs-out),background .5s var(--cs-out)}
.cs-card[data-nv-reveal].in{opacity:1;transform:none;transition:opacity .8s var(--spring),transform .8s var(--spring),box-shadow .5s var(--cs-out),background .5s var(--cs-out)}
.cs-card[data-nv-reveal] .cs-media{clip-path:inset(0 0 100% 0 round 18px);transition:clip-path 1s var(--cs-out) .1s}
.cs-card[data-nv-reveal].in .cs-media{clip-path:inset(0 0 0 0 round 18px)}
.cs-card[data-nv-reveal] .cs-media img,.cs-card[data-nv-reveal] .cs-media video{transform:scale(1.08)}
.cs-card[data-nv-reveal].in .cs-media img,.cs-card[data-nv-reveal].in .cs-media video{transform:scale(1.001);transition:transform 1.4s var(--cs-out) .1s}
@media (hover:hover) and (pointer:fine){.cs-card[data-nv-reveal].in:hover .cs-media img,.cs-card[data-nv-reveal].in:hover .cs-media video{transform:scale(1.045);transition:transform 1.1s var(--cs-out)}}
.cs-resolve[data-nv-reveal]{transform:translateY(18px);filter:blur(10px)}
.cs-resolve[data-nv-reveal].in{transform:none;filter:blur(0);transition:opacity .9s var(--spring),transform .9s var(--spring),filter .9s var(--cs-out)}
.cs-hero [data-nv-reveal]:not(.cs-resolve){transform:translateY(22px)}
.cs-hero [data-nv-reveal].in{transform:none}

/* ---------- closing panel: Have a workflow like this? ---------- */
.cs-close{padding:96px 0 120px}
.cs-close-card{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center;padding:60px 64px;border-radius:28px;
  background:var(--cs-glass);box-shadow:var(--cs-rim);-webkit-backdrop-filter:blur(30px) saturate(1.4);backdrop-filter:blur(30px) saturate(1.4)}
.cs-close-card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;background:radial-gradient(55% 45% at 0% 0%,rgba(70,140,255,.32),transparent 62%),linear-gradient(180deg,rgba(150,190,255,.12),rgba(150,190,255,0) 24%),radial-gradient(45% 40% at 100% 0%,rgba(110,77,255,.18),transparent 62%)}
.cs-close-card::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;padding:1.5px;background:linear-gradient(200deg,rgba(150,195,255,.85),rgba(150,195,255,0) 28%,rgba(110,77,255,0) 70%,rgba(110,77,255,.55));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.9}
.cs-close-card h2{margin-top:20px;font-size:clamp(34px,4vw,54px);font-weight:600;line-height:1.06;letter-spacing:-.035em;color:#fff}
.cs-close-card h2 .blue{color:var(--cs-blue)}
.cs-close-card p{margin-top:18px;font-size:18px;line-height:1.5;letter-spacing:-.01em;color:var(--cs-mute);max-width:520px}
.cs-close-actions{display:flex;flex-wrap:wrap;gap:12px;justify-self:end}
.cs-close-note{grid-column:1/-1;margin-top:-10px;font-family:var(--cs-ui);font-size:13px;color:var(--cs-dim)}

/* ========================================================================
   DETAIL
   ======================================================================== */
.cd-head{position:relative;padding:168px 0 0;overflow:clip}
.cd-head .cs-hero-bg img{right:-22%;top:-40%;opacity:.42}
.cd-head .wrap{position:relative}
.cd-crumb{display:inline-flex;align-items:center;gap:8px;font-family:var(--cs-ui);font-size:13.5px;letter-spacing:-.01em;color:var(--cs-dim);margin-bottom:26px;transition:color .25s}
.cd-crumb svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cd-crumb:hover{color:#fff}
.cd-type{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.cd-type .cs-eyebrow{margin-left:4px}
.cd-h1{margin-top:22px;font-size:clamp(50px,7.4vw,108px);font-weight:600;line-height:1;letter-spacing:-.045em;color:#fff}
.cd-h1 small{display:block;margin-top:14px;font-family:var(--cs-ui);font-size:clamp(16px,1.4vw,20px);font-weight:500;letter-spacing:-.02em;color:var(--cs-mute)}
.cd-outcome{margin-top:28px;font-size:clamp(20px,1.7vw,24px);line-height:1.4;letter-spacing:-.015em;color:#DCE7FF;max-width:760px}
.cd-metarow{display:flex;align-items:flex-start;gap:24px;margin-top:46px;padding-top:26px;border-top:1px solid var(--cs-hair)}
.cd-metarow dl{flex:1;min-width:0}
.cd-metarow dt{font-family:var(--cs-ui);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--cs-dim);margin-bottom:8px}
.cd-metarow dd{font-size:16px;letter-spacing:-.01em;color:#fff}
.cd-metarow dd small{display:block;margin-top:2px;font-family:var(--cs-ui);font-size:13px;color:var(--cs-dim)}
.cd-live{display:inline-flex;align-items:center;gap:8px}
.cd-live i{width:8px;height:8px;border-radius:50%;background:radial-gradient(circle at 34% 30%,#eaf5ff 0,#8cc2ff 30%,#4f9dff 58%,#1f6fe0 100%);box-shadow:0 0 8px rgba(95,168,255,.8)}
.cd-live[data-live="paper"] i,.cd-live[data-live="internal"] i{background:radial-gradient(circle at 34% 30%,#ffd9c6 0,#ff9660 30%,#ff6a2b 58%,#d24a12 100%);box-shadow:0 0 8px rgba(255,106,43,.7)}
.cd-live[data-live="demo"] i,.cd-live[data-live="local"] i{background:radial-gradient(circle at 34% 30%,#fff 0,#dfe6f5 30%,#a9b6d3 58%,#7d8aa8 100%);box-shadow:0 0 6px rgba(200,215,255,.5)}
.cd-visit{white-space:nowrap;align-self:center;font-family:var(--cs-ui);font-size:14.5px;font-weight:500;letter-spacing:-.02em;color:var(--cs-blue-ink);display:inline-flex;align-items:center;gap:8px;transition:color .25s}
.cd-visit svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--cs-out)}
.cd-visit:hover{color:#fff}
.cd-visit:hover svg{transform:translate(2px,-2px)}
/* hero media in a glass frame */
.cd-hero{position:relative;margin-top:34px;padding:10px;border-radius:28px;background:var(--cs-glass);box-shadow:var(--cs-rim);isolation:isolate}
.cd-hero::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;background:var(--cs-spec)}
.cd-hero-win{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:1360/760;background:#0B1230;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.cd-hero-win img,.cd-hero-win video{width:100%;height:100%;object-fit:cover;display:block}
.cd-hero-win.is-shot img{object-fit:cover;object-position:top}
.cd-hero-cap{position:absolute;left:24px;bottom:24px;z-index:1;display:inline-flex;align-items:center;gap:10px;height:34px;padding:0 14px 0 12px;border-radius:999px;font-family:var(--cs-ui);font-size:12.5px;letter-spacing:-.01em;color:#fff;
  background:rgba(7,11,27,.55);box-shadow:inset 0 0 0 1px rgba(190,215,255,.28),inset 0 1px 0 rgba(255,255,255,.1);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.cd-hero-cap i{width:7px;height:7px;border-radius:50%;background:radial-gradient(circle at 34% 30%,#eaf5ff 0,#8cc2ff 30%,#4f9dff 58%,#1f6fe0 100%);box-shadow:0 0 8px rgba(95,168,255,.8)}
/* verified facts block */
.cd-facts{margin-top:22px}
.cd-facts-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:14px}
.cd-facts-head p{font-family:var(--cs-ui);font-size:13px;color:var(--cs-dim)}
.cd-facts-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.cd-facts-grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.cd-fact{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;gap:26px;min-height:150px;padding:26px 26px 24px;border-radius:22px;
  background:var(--cs-glass);box-shadow:var(--cs-rim)}
.cd-fact::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;background:var(--cs-spec);opacity:.8}
.cd-fact strong{font-size:clamp(34px,3.2vw,46px);font-weight:600;letter-spacing:-.03em;line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.cd-fact strong small{font-size:.5em;font-weight:500;letter-spacing:-.01em;color:var(--cs-blue-ink);margin-left:6px}
.cd-fact span{font-size:15px;line-height:1.45;letter-spacing:-.01em;color:var(--cs-mute)}
.cd-fact span b{color:#fff;font-weight:500}
.cd-fact.wide strong{font-size:clamp(22px,1.9vw,26px);letter-spacing:-.02em;line-height:1.15}
.cd-note{margin-top:18px;font-family:var(--cs-ui);font-size:13.5px;line-height:1.5;color:var(--cs-dim);max-width:720px}
.cd-note a{color:var(--cs-blue-ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(140,192,255,.4)}
/* narrative blocks */
.cd-block{padding-top:120px}
.cd-block-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:48px 64px;align-items:start}
.cd-block .cs-eyebrow{position:sticky;top:120px}
.cd-h2{font-size:clamp(32px,3.9vw,56px);font-weight:600;line-height:1.1;letter-spacing:-.035em;color:#fff;max-width:900px}
.cd-h2 .h2-dim{color:var(--cs-dim)}
.cd-par{margin-top:26px;font-size:18px;line-height:1.6;letter-spacing:-.01em;color:var(--cs-mute);max-width:640px}
.cd-par b{color:#fff;font-weight:500}
.cd-bullets{margin-top:28px;display:flex;flex-direction:column;gap:12px;max-width:680px}
.cd-bullets li{position:relative;padding-left:26px;font-size:17px;line-height:1.5;letter-spacing:-.01em;color:var(--cs-mute)}
.cd-bullets li::before{content:"";position:absolute;left:0;top:11px;width:8px;height:8px;border-radius:50%;background:radial-gradient(circle at 34% 30%,#eaf5ff 0,#8cc2ff 30%,#4f9dff 58%,#1f6fe0 100%);box-shadow:0 0 8px rgba(95,168,255,.6)}
.cd-bullets li b{color:#fff;font-weight:500}
/* the system map: how the pieces connect and where a person steps in */
.cd-map{margin-top:34px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;counter-reset:step}
.cd-map li{position:relative;isolation:isolate;overflow:hidden;padding:22px 20px 20px;border-radius:20px;background:var(--cs-glass);box-shadow:var(--cs-rim);min-height:170px;display:flex;flex-direction:column}
.cd-map li::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;background:var(--cs-spec);opacity:.7}
.cd-map li>i{display:inline-flex;align-items:center;font-family:var(--cs-ui);font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--cs-blue);font-style:normal}
.cd-map li>i::before{counter-increment:step;content:"0" counter(step)}
.cd-map li b{display:block;margin-top:auto;padding-top:22px;font-size:17px;font-weight:600;letter-spacing:-.02em;color:#fff}
.cd-map li span{display:block;margin-top:6px;font-size:14px;line-height:1.45;color:var(--cs-mute)}
.cd-map li.human{box-shadow:var(--cs-rim),0 0 0 1px rgba(255,150,80,.28)}
.cd-map li.human>i{color:#FFB48C}
.cd-map li.human>i::before{content:"\2192\00a0" attr(data-n)}
.cd-map-human{display:inline-block;margin-top:14px;font-family:var(--cs-ui);font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#FFB48C;font-style:normal}
/* visual moments */
.cd-visual{margin-top:64px;padding:10px;border-radius:26px;background:var(--cs-glass);box-shadow:var(--cs-rim);position:relative;isolation:isolate}
.cd-visual::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;background:var(--cs-spec)}
.cd-visual-win{position:relative;border-radius:18px;overflow:hidden;background:#0B1230;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.cd-visual-win img,.cd-visual-win video{width:100%;display:block;object-fit:cover}
.cd-visual-win.r-wide img,.cd-visual-win.r-wide video{aspect-ratio:1360/720}
.cd-visual-win.r-tall img{aspect-ratio:676/820}
.cd-visual-win.r-mid img{aspect-ratio:676/560}
.cd-visual-win.r-short img{aspect-ratio:676/440}
.cd-visual-win.is-shot img{object-position:top}
.cd-visual figcaption{padding:16px 14px 6px;font-family:var(--cs-ui);font-size:13.5px;letter-spacing:-.01em;color:var(--cs-dim)}
.cd-gal{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:64px}
.cd-gal-col{display:flex;flex-direction:column;gap:16px;min-width:0}
.cd-gal .cd-visual{margin-top:0}
/* the "from the Lab" note (never a testimonial unless a real one exists) */
.cd-note-card{position:relative;isolation:isolate;overflow:hidden;margin-top:110px;padding:56px 60px;border-radius:28px;background:var(--cs-glass);box-shadow:var(--cs-rim)}
.cd-note-card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;background:var(--cs-spec)}
.cd-note-card blockquote{margin-top:18px;font-size:clamp(22px,2.3vw,30px);font-weight:500;line-height:1.32;letter-spacing:-.02em;color:#fff;max-width:900px}
.cd-person{display:flex;align-items:center;gap:14px;margin-top:32px}
.cd-person img{width:46px;height:46px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px rgba(7,11,27,.9),0 0 0 3px rgba(130,170,255,.5),0 0 20px rgba(36,107,255,.35)}
.cd-person strong{display:block;font-size:16px;color:#fff}
.cd-person span{font-family:var(--cs-ui);font-size:13.5px;color:var(--cs-mute)}
/* more cases */
.cd-more{padding-top:120px}
.cd-more-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:28px}
.cd-more-head h2{margin-top:18px;font-size:clamp(30px,3.4vw,46px);font-weight:600;letter-spacing:-.035em;line-height:1.08;color:#fff}
.cd-more-all{white-space:nowrap;font-family:var(--cs-ui);font-size:14.5px;font-weight:500;letter-spacing:-.02em;color:var(--cs-blue-ink);display:inline-flex;align-items:center;gap:8px;transition:color .25s}
.cd-more-all svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--cs-out)}
.cd-more-all:hover{color:#fff}
.cd-more-all:hover svg{transform:translateX(3px)}
.cd-more .cs-grid{margin-top:0}
.cd-more .cs-card h3{font-size:clamp(24px,2vw,30px)}
.cd-more .cs-story{font-size:16px}
.cd-more .cs-media{aspect-ratio:16/8.5}

/* ========================================================================
   RESPONSIVE
   ======================================================================== */
@media (max-width:1180px){
  .cs-ledger div{padding:0 20px}
  .cd-block-grid{grid-template-columns:1fr;gap:20px}
  .cd-block .cs-eyebrow{position:static}
  .cd-map{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cd-facts-grid.four{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:980px){
  .cs-hero-row{flex-direction:column;align-items:flex-start;gap:30px}
  .cs-close-card{grid-template-columns:1fr;padding:44px 36px}
  .cs-close-actions{justify-self:start}
  .cd-metarow{flex-wrap:wrap;gap:22px 24px}
  .cd-metarow dl{flex:1 1 40%}
  .cd-visit{flex-basis:100%;align-self:flex-start}
}
@media (max-width:820px){
  .cs-hero{padding:136px 0 20px}
  .cs-h1{font-size:clamp(42px,11.5vw,64px)}
  .cs-hero-sub{font-size:17px}
  .cs-ledger b{font-size:24px}
  .cs-legend p{flex-basis:100%;margin-right:0}
  .cs-bar{flex-direction:column;align-items:stretch;gap:12px}
  .cs-tabs{width:100%;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;border-radius:26px}
  .cs-tabs::-webkit-scrollbar{display:none}
  .cs-tab{height:38px;padding:0 14px;font-size:14px}
  .cs-search{flex:0 0 auto;width:100%}
  .cs-grid{grid-template-columns:1fr;gap:16px}
  .cs-media{margin:8px 8px 0;border-radius:16px}
  .cs-body{padding:22px 20px 22px}
  .cs-card h2,.cs-card h3{font-size:28px}
  .cs-story{font-size:16px}
  .cs-close{padding:72px 0 96px}
  .cs-close-card{padding:36px 24px;border-radius:24px}
  .cs-close-card h2{font-size:32px}
  .cs-close-actions{flex-direction:column;align-items:stretch}
  .cs-close-actions .cs-btn{justify-content:center}
  .cd-head{padding-top:136px}
  .cd-h1{font-size:clamp(42px,11.5vw,66px)}
  .cd-outcome{font-size:19px}
  .cd-metarow dl{flex:1 1 100%}
  .cd-hero{padding:6px;border-radius:20px}
  .cd-hero-win{border-radius:15px;aspect-ratio:4/3}
  .cd-hero-cap{left:14px;bottom:14px}
  .cd-facts-grid,.cd-facts-grid.four{grid-template-columns:1fr}
  .cd-fact{min-height:0;gap:16px;padding:22px}
  .cd-block{padding-top:84px}
  .cd-map{grid-template-columns:1fr}
  .cd-map li{min-height:0}
  .cd-map li b{padding-top:14px}
  .cd-gal{grid-template-columns:1fr}
  .cd-visual{padding:6px;border-radius:20px}
  .cd-visual-win{border-radius:15px}
  .cd-note-card{margin-top:80px;padding:32px 24px}
  .cd-more{padding-top:84px}
  .cd-more-head{flex-direction:column;align-items:flex-start;gap:14px}
}

/* ========================================================================
   REDUCED MOTION: nothing moves, everything is simply there
   ======================================================================== */
@media (prefers-reduced-motion:reduce){
  .cs-card,.cs-card::after,.cs-media img,.cs-media video,.cs-btn,.cs-btn svg,.cs-tab,.cs-search,.cs-go svg,.cd-visit svg,.cd-more-all svg,.cs-cursor{transition:none!important;animation:none!important}
  .cs-card:hover{transform:none}
  .cs-card:hover .cs-media img,.cs-card:hover .cs-media video{transform:none}
  .cs-card[data-nv-reveal],.cs-card[data-nv-reveal] .cs-media,.cs-resolve[data-nv-reveal],.cs-hero [data-nv-reveal]{opacity:1;transform:none;filter:none;clip-path:none;transition:none}
  .cs-card[data-nv-reveal] .cs-media img,.cs-card[data-nv-reveal] .cs-media video{transform:none;transition:none}
  .cs-sheen{display:none}
  .cs-cursor{display:none}
  .cs-card.is-out{transition:none}
}