/* Vandana Rajesh, shared monochrome neumorphic theme layer. Load after each page's own <style>. */
:root{
  --white:#F2F2EF;--paper:#E9E9E6;--surface:#E9E9E6;--line:rgba(17,17,17,.1);
  --ink:#111111;--ink-70:#55554F;--ink-45:#6A6A63;
  --black:#1C1C1B;--black-2:#232322;--line-i:rgba(242,242,239,.12);
  --white-70:rgba(242,242,239,.72);--white-45:rgba(242,242,239,.5);
  --accent:#111111;--on-accent:#F2F2EF;--accent-dim:rgba(17,17,17,.08);
  --sd:#C8C8C2;--sl:#FFFFFF;--dsd:#0B0B0A;--dsl:#2E2E2C;
  --neu:8px 8px 20px var(--sd),-8px -8px 20px var(--sl);
  --neu-s:4px 4px 10px var(--sd),-4px -4px 10px var(--sl);
  --neu-in:inset 5px 5px 12px var(--sd),inset -5px -5px 12px var(--sl);
  --neu-in-s:inset 3px 3px 7px var(--sd),inset -3px -3px 7px var(--sl);
  --neu-dark-btn:6px 6px 14px var(--sd),-6px -6px 14px var(--sl),inset 2px 2px 3px #3B3B39,inset -2px -2px 4px #0A0A0A;
  --r-lg:30px;--r-md:22px;--r-sm:16px;
}
html,body{background:var(--paper)}
body{color:var(--ink)}
::selection{background:#111;color:#E9E9E6}

/* cursor */
.cur-ring{border-width:1.5px}
.cur-ring.big{width:64px;height:64px;background:#fff}
.cur-ring.vr-label{width:92px;height:92px;background:#fff;display:flex;align-items:center;justify-content:center;font:600 13px/1 'Uncut Sans',sans-serif;color:#000}
.cur-ring.vr-title{width:150px;height:150px;background:#fff}

/* nav */
.nav{top:14px;padding:0 14px}
.nav-pill{width:100%;max-width:820px;justify-content:space-between;background:var(--paper);border:none;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:var(--neu);padding:8px 8px 8px 22px;transition:opacity .4s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.nav-logo{display:flex;align-items:center;gap:10px}
.nav-logo::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--ink)}
.nav-links a:hover{background:transparent;box-shadow:var(--neu-in-s)}
.nav-cta{background:var(--black);color:var(--white);box-shadow:var(--neu-dark-btn);padding:11px 20px}
.nav-cta:active{box-shadow:inset 4px 4px 10px #000,inset -3px -3px 8px #3B3B39}
.nav-ham{width:44px;height:44px;box-shadow:var(--neu-s)}
.vr-mini{position:fixed;top:14px;right:14px;z-index:601;display:flex;align-items:center;gap:6px;padding:6px;border-radius:100px;background:var(--paper);box-shadow:0 14px 34px rgba(17,17,17,.16),inset 2px 2px 4px #fff,inset -2px -2px 5px #CFCFC9;opacity:0;transform:translateY(-140%) scale(.85);pointer-events:none;transition:opacity .4s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.vr-mini a{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:var(--black);color:var(--white);font-size:13px;font-weight:600;letter-spacing:-.02em}
.vr-mini button{display:flex;align-items:center;gap:10px;height:44px;padding:0 16px 0 18px;border-radius:100px;font-size:14px;font-weight:500;color:var(--ink)}
.vr-mini button i{display:flex;flex-direction:column;gap:5px}
.vr-mini button i b{display:block;width:16px;height:1.5px;border-radius:2px;background:var(--ink);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.vr-mini[data-open] button i b:first-child{transform:translateY(3.25px) rotate(45deg)}
.vr-mini[data-open] button i b:last-child{transform:translateY(-3.25px) rotate(-45deg)}
html.vr-collapsed .nav-pill{opacity:0;transform:translateY(-140%) scale(.94);pointer-events:none}
html.vr-collapsed .vr-mini{opacity:1;transform:none;pointer-events:auto}
.mob-menu{background:rgba(233,233,230,.84);backdrop-filter:blur(30px) saturate(1.4);-webkit-backdrop-filter:blur(30px) saturate(1.4)}
.mob-menu a{border-bottom-color:var(--line);letter-spacing:-.035em}
.mob-close{border:none;box-shadow:var(--neu-s);width:44px;height:44px}

/* type + eyebrows */
.eyebrow{color:var(--ink-70)}
.eyebrow::before{width:28px;background:var(--ink)}
.cs-title,.pg-title{letter-spacing:-.05em}
.vr-outline{color:transparent;-webkit-text-stroke:.012em var(--ink);cursor:default}
.vr-outline .vr-l{display:inline-block;color:transparent;transition:color .5s cubic-bezier(.2,.7,.2,1)}
.vr-outline .vr-w{display:inline-block;white-space:nowrap}
.vr-outline .vr-w.vr-clip{overflow:hidden;padding:.04em .02em .1em;margin:-.04em -.02em -.1em}

/* hero background */
.vr-hero{position:relative;overflow:hidden;isolation:isolate}
.vr-bg{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:-1}

/* buttons */
.btn{min-height:52px;padding:0 30px}
.btn-solid{background:var(--black);color:var(--white);box-shadow:var(--neu-dark-btn)}
.btn-ghost{border:none;background:var(--paper);color:var(--ink);box-shadow:6px 6px 14px var(--sd),-6px -6px 14px var(--sl)}
.btn-ghost:hover{background:var(--paper);color:var(--ink)}
.btn:active{transform:none;box-shadow:var(--neu-in-s)}

/* case study hero */
.cs-back{min-height:44px;padding:0 18px;border-radius:100px;box-shadow:var(--neu-s);color:var(--ink)}
.cs-back:hover{box-shadow:var(--neu-in-s)}
.cs-chip{border:none;background:var(--paper);box-shadow:3px 3px 7px var(--sd),-3px -3px 7px var(--sl);padding:8px 15px;color:var(--ink)}
.cs-meta{border-bottom:none;padding-bottom:0;gap:16px}
.cs-mi{padding:16px 22px;border-radius:20px;box-shadow:var(--neu-in-s)}
.cs-cover{padding:12px;background:var(--paper);box-shadow:14px 14px 32px var(--sd),-14px -14px 32px var(--sl);border-radius:34px}
.cs-cover img,.cs-cover video{border-radius:24px}
.cs-status{border:none;background:var(--paper);box-shadow:var(--neu-s)}
.cs-status-dot{background:var(--ink)}

/* stats + cards: separated raised tiles */
.cs-stats,.cs-grid3,.cs-grid4,.pg-cards{gap:clamp(16px,2vw,24px);background:transparent;border:none;border-radius:0;overflow:visible}
.cs-stat,.cs-card,.pcard{background:var(--paper);border-radius:26px;box-shadow:10px 10px 24px var(--sd),-10px -10px 24px var(--sl);transition:box-shadow .4s ease,background .45s ease,color .45s ease,transform .45s cubic-bezier(.2,.7,.2,1)}
.cs-stat .n{color:var(--ink);letter-spacing:-.05em}
.cs-card:hover{background:var(--paper);color:var(--ink);box-shadow:var(--neu-in)}
.cs-card:hover .l{color:var(--ink-45)}
.cs-card:hover p{color:var(--ink-70)}
.pcard{min-height:340px}
.pcard:hover{background:var(--black);color:var(--white);transform:translateY(-6px);box-shadow:14px 14px 32px var(--sd),-14px -14px 32px var(--sl)}

/* images */
.cs-img{padding:9px;background:var(--paper);border-radius:24px;box-shadow:var(--neu)}
.cs-img img,.cs-img video{border-radius:16px}
.cs-img2{gap:20px}
.cs-cap{color:var(--ink-45)}

/* blocks */
.cs-pull{border-left:none;padding:clamp(24px,3vw,36px);border-radius:26px;box-shadow:var(--neu-in)}
.cs-highlight{background:var(--paper);box-shadow:var(--neu-in);border-radius:26px}
.cs-highlight .n{color:var(--ink);letter-spacing:-.05em}
.cs-quote{border-left:none;padding:20px 22px;border-radius:20px;box-shadow:var(--neu-s)}
.cs-flow.vr-flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:18px;overflow:visible;padding:6px 0 10px}
.vr-flow .cs-flow-arr{display:none}
.cs-flow-step{min-width:0;border:none;background:var(--paper);border-radius:20px;box-shadow:var(--neu-s);padding:18px}
.cs-flow-step.a{background:var(--black);box-shadow:var(--neu-dark-btn)}

/* sequenced arrival */
.vr-flow .cs-flow-step,.vr-seq>*{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.2,1) calc(var(--i,0) * 90ms),transform .8s cubic-bezier(.2,.7,.2,1) calc(var(--i,0) * 90ms),box-shadow .4s ease,background .45s ease,color .45s ease}
.vr-flow.vr-in .cs-flow-step,.vr-seq.vr-in>*{opacity:1;transform:none}

/* numbers + hairline */
.vr-num{position:relative;display:inline-block;padding-bottom:10px;font-variant-numeric:tabular-nums}
.vr-num::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform 1.4s cubic-bezier(.65,0,.25,1) .15s}
.vr-num.vr-in::after{transform:scaleX(1)}

/* image wipe */
.vr-wipe>img,.vr-wipe>video,.vr-wipe>iframe{clip-path:inset(0 0 100% 0 round 16px);transform:scale(1.04);transition:clip-path 1.2s cubic-bezier(.65,0,.25,1),transform 1.6s cubic-bezier(.2,.7,.2,1)}
.vr-wipe.vr-in>img,.vr-wipe.vr-in>video,.vr-wipe.vr-in>iframe{clip-path:inset(0 0 0 0 round 16px);transform:none}

/* compare arrow */
.cs-compare-arrow svg{display:block;overflow:visible}
.vr-arr-l,.vr-arr-h{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.vr-arr-l{stroke-dasharray:56;stroke-dashoffset:56;transition:stroke-dashoffset .9s cubic-bezier(.65,0,.25,1) .2s}
.vr-arr-h{stroke-dasharray:28;stroke-dashoffset:28;transition:stroke-dashoffset .5s cubic-bezier(.65,0,.25,1) 1s}
.cs-compare.vr-in .vr-arr-l,.cs-compare.vr-in .vr-arr-h{stroke-dashoffset:0}
.cs-compare>.cs-compare-col{opacity:.4;transition:opacity .6s ease}
.cs-compare>.cs-compare-before{opacity:1}
.cs-compare.vr-in>.cs-compare-after{opacity:1;transition-delay:1.2s}

/* section label line */
.vr-lbl{display:flex;align-items:center;gap:14px;color:var(--ink-70)}
.vr-lbl::before{content:'';height:1px;width:28px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .9s cubic-bezier(.65,0,.25,1)}
.vr-lbl.vr-in::before{transform:scaleX(1)}

/* contents rail */
.vr-toc{padding-left:22px}
.vr-toc a{padding-left:0}
.vr-toc a.on::before{display:none}
.vr-rail{position:absolute;left:0;top:30px;bottom:6px;width:1px}
.vr-rail i{position:absolute;inset:0;background:rgba(17,17,17,.14)}
.vr-rail b{position:absolute;left:-3px;top:calc(var(--p,0) * 100%);width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:var(--ink);transition:top .15s linear}
.vr-rail::after{content:'';position:absolute;left:0;top:0;width:1px;height:calc(var(--p,0) * 100%);background:var(--ink)}

@media(prefers-reduced-motion:reduce){.vr-flow .cs-flow-step,.vr-seq>*{opacity:1;transform:none}.vr-wipe>img,.vr-wipe>video,.vr-wipe>iframe{clip-path:none;transform:none}}

/* chapter artworks */
.vr-art{margin:36px 0 40px;padding:clamp(18px,3vw,34px);border-radius:30px;background:var(--paper);box-shadow:var(--neu-in)}
.vr-art svg{width:100%;height:auto;display:block;overflow:visible}
.vr-art path{fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.3s cubic-bezier(.65,0,.25,1) calc(var(--i,0) * .12s)}
.vr-art .vr-art-main{stroke-width:2.4;transition-duration:1.8s}
.vr-art.vr-drawn path{stroke-dashoffset:0}
.vr-art-dot{fill:var(--ink);opacity:0;transition:opacity .4s ease}
.vr-art text{font:500 13px 'Uncut Sans',sans-serif;fill:var(--ink-70);opacity:0;transform:translateY(6px);transition:opacity .6s ease calc(1.4s + var(--i,0) * .2s),transform .6s ease calc(1.4s + var(--i,0) * .2s)}
.vr-art.vr-drawn text{opacity:1;transform:none}
.vr-art.vr-live .vr-art-dot{opacity:1}
@media(prefers-reduced-motion:reduce){.vr-art path{stroke-dashoffset:0;transition:none}}

/* stat sparks */
.vr-spark{height:28px;margin-top:18px}
.vr-spark svg{width:100%;height:100%;display:block;overflow:visible}
.vr-spark path{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s cubic-bezier(.65,0,.25,1) calc(.3s + var(--i,0) * 90ms)}
.vr-seq.vr-in .vr-spark path{stroke-dashoffset:0}

/* story path */
.vr-story{--pad:clamp(16px,2.4vw,28px);position:relative;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));margin:8px 0 72px;padding:30px var(--pad) 26px;border-radius:30px;background:var(--paper);box-shadow:var(--neu-in)}
.vr-story-track{position:absolute;left:calc(var(--pad) + (100% - 2 * var(--pad)) / var(--n) / 2);right:calc(var(--pad) + (100% - 2 * var(--pad)) / var(--n) / 2);top:41px;height:1.5px;background:rgba(17,17,17,.14)}
.vr-story-track i{position:absolute;left:0;top:0;bottom:0;width:calc(var(--f,0) * 100%);background:var(--ink);transition:width .2s linear}
.vr-story-node{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;min-width:0;text-align:center;font-size:13px;font-weight:500;color:var(--ink-45);transition:color .4s ease}
.vr-story-node b{width:24px;height:24px;border-radius:50%;background:var(--paper);box-shadow:var(--neu-s);transition:background .4s ease,box-shadow .4s ease,transform .5s cubic-bezier(.2,.7,.2,1)}
.vr-story-node span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vr-story-node.vr-done{color:var(--ink)}
.vr-story-node.vr-done b{background:var(--black);box-shadow:var(--neu-dark-btn)}
.vr-story-node.vr-now b{transform:scale(1.25)}
.vr-story-node:hover b{transform:scale(1.15)}

/* problem / feature tiles */
.cs-quad{grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:18px;background:transparent;border:none;border-radius:0;overflow:visible}
.cs-quad-item{display:flex;flex-direction:column;align-items:flex-start;min-height:168px;padding:22px;border-radius:24px;background:var(--paper);box-shadow:var(--neu)}
.cs-quad-item.dark{background:var(--black);color:var(--white);box-shadow:var(--neu-dark-btn)}
.cs-quad-n{font-size:clamp(30px,3vw,42px);letter-spacing:-.05em;line-height:1}
.cs-quad-t{margin-top:auto;padding-top:22px;font-size:14px}
.cs-quad-s{font-size:12.5px;line-height:1.45;color:var(--ink-70)}
.cs-quad-item.dark .cs-quad-s{color:var(--white-70)}
.gm-feat{counter-reset:feat;gap:18px;background:transparent;border:none;border-radius:0;overflow:visible}
.gm-feat-item{counter-increment:feat;display:flex;flex-direction:column;gap:6px;padding:22px;border-radius:24px;background:var(--paper);box-shadow:var(--neu)}
.gm-feat-item::before{content:counter(feat,decimal-leading-zero);display:flex;align-items:center;justify-content:center;width:40px;height:40px;margin-bottom:12px;border-radius:50%;font-size:12px;font-weight:600;box-shadow:var(--neu-in-s)}
.gm-feat-item h5{font-size:15px;margin:0}
.gm-feat-item p{font-size:13.5px}
.gm-list{gap:14px}
.gm-list-item{background:var(--paper);border-radius:20px;box-shadow:var(--neu-s);padding:16px 18px}
.gm-banner{margin:72px clamp(12px,3vw,40px) 0;border-radius:30px;background:var(--black);box-shadow:var(--neu);padding:clamp(28px,4vw,44px) clamp(24px,4vw,48px)}
.gm-title{font-size:clamp(30px,4vw,52px);letter-spacing:-.04em}
.cs-tool{border:none;background:var(--paper);box-shadow:3px 3px 7px var(--sd),-3px -3px 7px var(--sl);padding:8px 14px;color:var(--ink)}
.cs-vid{padding:9px;background:var(--paper);border-radius:24px;box-shadow:var(--neu)}
.cs-vid iframe{border-radius:16px}

.cs-flow-step.a{background:var(--black);box-shadow:var(--neu-dark-btn)}
.cs-toc a{position:relative;padding-left:14px}
.cs-toc a.on{font-weight:500}
.cs-toc a.on::before{content:'';position:absolute;left:0;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--ink)}
.cs-accordion{border:none;border-radius:30px;background:var(--paper);box-shadow:var(--neu)}
.cs-acc-btn:hover{background:transparent}
.cs-acc-item+.cs-acc-item{border-top-color:var(--line)}
.cs-acc-icon{border:none;box-shadow:var(--neu-s);width:40px;height:40px}
.cs-acc-btn[aria-expanded="true"] .cs-acc-icon{background:var(--black);color:var(--white);box-shadow:var(--neu-dark-btn)}
.cs-acc-thumb{border:none;box-shadow:var(--neu-in-s);padding:4px}
.cs-acc-thumb img{border-radius:9px}
.cs-acc-hint svg{color:var(--ink)}
.cs-scope{gap:12px;background:transparent;border:none;overflow:visible}
.cs-scope-item{border-radius:18px;box-shadow:var(--neu-s)}
.cs-scope-item.led .cs-scope-tag{background:var(--black);color:var(--white)}
.cs-scope-item:not(.led) .cs-scope-tag{border:none;box-shadow:var(--neu-in-s)}
.cs-compare-col{border:none;box-shadow:var(--neu-s);border-radius:24px}
.cs-compare-after{background:var(--black);color:var(--white);box-shadow:var(--neu-dark-btn)}
.cs-dialog-row.q .cs-dialog-bubble{background:var(--paper);box-shadow:var(--neu-s)}
.cs-dialog-row.q .cs-dialog-avatar{border:none;box-shadow:var(--neu-in-s)}
.cs-dialog-row.a .cs-dialog-bubble{background:var(--black)}
.cs-dialog-row.a .cs-dialog-avatar{background:var(--black)}
.cs-chart-track{background:var(--paper);box-shadow:var(--neu-in-s);border-radius:12px}
.cs-chart-fill{background:var(--black);border-radius:12px}
.cs-foot-nav{border-top:none}
.cs-nxt{padding:20px 26px;border-radius:24px;box-shadow:var(--neu)}
.cs-foot-back{min-height:44px;display:inline-flex;align-items:center;padding:0 18px;border-radius:100px;box-shadow:var(--neu-s);color:var(--ink)}
.cs-persona,.cs-quad-item,.gal-card,.gm-banner,.gm-feat-item,.cs-audit,.cs-table,.cs-ba,.cs-swatch{border-color:transparent}
.cs-persona{background:var(--paper);border-radius:24px;box-shadow:var(--neu-s)}
.gal-card{border-radius:24px;padding:9px;background:var(--paper);box-shadow:var(--neu)}
.gal-card img{border-radius:16px}

/* contact: dark neumorphic card like the landing page */
#contact{background:var(--black);color:var(--white);margin:clamp(80px,14vh,160px) clamp(12px,3vw,40px) 0;border-radius:36px;box-shadow:14px 14px 32px var(--sd),-14px -14px 32px var(--sl);padding:clamp(80px,12vh,130px) clamp(20px,5vw,80px)}
#contact .ct-title{font-size:clamp(58px,9.4vw,210px);letter-spacing:-.05em}
#contact .vr-outline{-webkit-text-stroke-color:var(--white)}
#contact .btn-solid{background:#ECECE8;color:#111;box-shadow:6px 6px 14px var(--dsd),-6px -6px 14px var(--dsl),inset 2px 2px 3px #fff,inset -2px -2px 4px #BDBDB7}
#contact .btn-ghost{background:var(--black);color:var(--white);box-shadow:6px 6px 14px var(--dsd),-6px -6px 14px var(--dsl)}
#contact .btn:active{box-shadow:inset 4px 4px 10px var(--dsd),inset -4px -4px 10px var(--dsl)}
#contact .eyebrow{color:var(--white-70);justify-content:center}
#contact .eyebrow::before{background:var(--white)}
.foot{background:transparent;color:var(--ink-45);border-top:none;padding:28px var(--edge) 32px}

@media(max-width:640px){
  .cs-meta{display:grid;grid-template-columns:1fr 1fr}
  .cs-cover{padding:8px;border-radius:26px}
  .cs-cover img{border-radius:18px}
  .ct-actions .btn{flex:1 1 0;justify-content:center;padding:0 18px}
  .vr-outline{-webkit-text-stroke-width:.016em}
}
@media(hover:none){.cs-card:hover,.pcard:hover{transform:none}}

/* mobile safety net across every page */
html,body{max-width:100%;overflow-x:clip}
img,video,iframe{max-width:100%;height:auto}
.cs-col,.cs-sec,.cs-body>*{min-width:0}
.cs-sec p,.cs-deck,.cs-title,.pg-title,.ct-title,.ct-email{overflow-wrap:anywhere}
@media(max-width:900px){
  .cs-compare{grid-template-columns:1fr}
  .cs-compare-arrow{transform:rotate(90deg);justify-content:center;padding:4px 0}
  .cs-ba,.cs-table-hd,.cs-table-row,.gm-split,.gm-feat,.cs-img3,.cs-grid2,.cs-persona-grid{grid-template-columns:1fr}
  .cs-grid4,.cs-quad{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cs-table{overflow-x:auto}
  .cs-dialog-row{max-width:100%}
}
@media(max-width:640px){
  :root{--edge:20px}
  .nav-pill{padding:6px 6px 6px 18px}
  .cs-hero,#hero{padding-top:104px}
  .cs-title{font-size:clamp(44px,14vw,72px)}
  .pg-title{font-size:clamp(56px,19vw,96px)}
  #contact .ct-title{font-size:clamp(46px,15vw,80px)}
  .cs-stats,.cs-grid3,.cs-grid4,.cs-quad,.pg-cards{grid-template-columns:1fr}
  .cs-stat,.cs-card,.pcard{border-radius:22px}
  .pcard{min-height:0}
  .cs-img{padding:6px;border-radius:18px}
  .cs-img img,.cs-img video{border-radius:13px}
  .cs-img2{gap:14px}
  .cs-pull,.cs-highlight{padding:22px;border-radius:22px}
  .cs-highlight{gap:14px}
  .cs-highlight .n{white-space:normal}
  .cs-flow.vr-flow{grid-template-columns:1fr 1fr;gap:14px}
  .vr-art{margin:26px 0 30px;padding:14px;border-radius:22px}
  .vr-art path{stroke-width:2.4}
  .vr-art text{font-size:17px}
  .vr-art .vr-art-main{stroke-width:3}
  .vr-story{--pad:10px;padding:22px 10px 18px;margin-bottom:48px;border-radius:24px}
  .vr-story-track{top:31px}
  .vr-story-node{font-size:10.5px;gap:10px}
  .vr-story-node b{width:20px;height:20px}
  .cs-quad{grid-template-columns:1fr 1fr;gap:14px}
  .cs-quad-item{min-height:150px;padding:18px}
  .gm-feat{grid-template-columns:1fr}
  .cs-acc-btn{padding:18px}
  .cs-acc-panel-in{padding:6px 18px 24px}
  .cs-acc-thumb{width:44px;height:44px}
  .cs-scope-item{flex-wrap:wrap;gap:10px}
  .cs-foot-nav{flex-direction:column;align-items:stretch;gap:20px}
  .cs-nxt{text-align:left}
  #contact{margin:72px 10px 0;border-radius:28px;padding:72px 20px}
  .ct-actions{flex-direction:column;align-items:stretch}
  .ct-actions .btn{justify-content:center}
  .foot{flex-direction:column;align-items:flex-start}
  .mob-menu{overflow-y:auto;padding:96px 24px 32px}
  .vr-mini{top:10px;right:10px}
  .lb-img{max-width:94vw}
}


/* ===== unified box system: one padding, radius and gap scale for every case study ===== */
:root{--bp:clamp(20px,2.4vw,28px);--bp-lg:clamp(24px,3.2vw,40px);--bp-row:16px 22px;--br:24px;--br-lg:30px;--bg:clamp(14px,1.8vw,20px);--bm:32px}
/* grids of tiles */
.cs-stats,.cs-grid2,.cs-grid3,.cs-grid4,.cs-quad,.gm-feat,.cs-persona-grid,.cs-ba,.cs-quote-grid,.pg-cards,.cs-img2,.cs-img3{gap:var(--bg);background:transparent;border:none;border-radius:0;overflow:visible}
.cs-grid2,.cs-grid3,.cs-grid4,.cs-quad,.gm-feat,.cs-persona-grid,.cs-ba,.cs-quote-grid{margin:var(--bm) 0}
.cs-stats{margin:56px 0}
/* standard tiles */
.cs-stat,.cs-card,.cs-quad-item,.gm-feat-item,.cs-persona,.cs-compare-col,.cs-quote{padding:var(--bp);border-radius:var(--br)}
.cs-stat,.cs-card,.cs-persona{background:var(--paper);box-shadow:10px 10px 24px var(--sd),-10px -10px 24px var(--sl)}
.cs-stat{display:flex;flex-direction:column;align-items:flex-start}
.cs-stat .l{margin-top:12px}
.cs-card{display:flex;flex-direction:column}
.cs-card h4{margin:14px 0 8px}
.cs-persona .tag{color:var(--ink)}
.cs-persona h4{margin:14px 0 8px}
.cs-quad-item{min-height:0}
.cs-quad-t{padding-top:20px}
/* feature blocks */
.cs-highlight,.cs-pull,.cs-ba-p,.vr-art,.cs-accordion,.pcard{border-radius:var(--br-lg)}
.cs-highlight,.cs-pull,.cs-ba-p{padding:var(--bp-lg)}
.cs-pull{margin:16px 0 56px}
.cs-highlight{margin:var(--bm) 0;align-items:center}
.pcard{padding:var(--bp-lg)}
.cs-ba-p{background:var(--paper);box-shadow:var(--neu)}
.cs-ba-p.after{background:var(--black);color:var(--white);box-shadow:var(--neu-dark-btn)}
/* rows */
.cs-scope{margin:24px 0 var(--bm)}
.cs-scope-item{padding:var(--bp-row);border-radius:20px}
.gm-list-item{padding:var(--bp-row);border-radius:20px}
.cs-flow-step{padding:var(--bp);border-radius:var(--br)}
.cs-mi{padding:var(--bp-row);border-radius:20px}
.cs-acc-btn{padding:20px var(--bp)}
.cs-acc-panel-in{padding:6px var(--bp) var(--bp)}
.cs-nxt{padding:var(--bp);border-radius:var(--br)}
/* tables + audits as one card with even rows */
.cs-audit,.cs-table{border:none;border-radius:var(--br);background:var(--paper);box-shadow:var(--neu);margin:var(--bm) 0}
.cs-audit-hd,.cs-table-hd{padding:var(--bp-row);background:transparent;box-shadow:inset 0 -1px 0 var(--line)}
.cs-audit-row,.cs-table-row{padding:var(--bp-row);border-top:1px solid var(--line)}
.cs-audit-hd+.cs-audit-row,.cs-table-hd+.cs-table-row{border-top:none}
.cs-decision{padding:20px 0}
.cs-swatches{gap:var(--bg);border-radius:0;overflow:visible;height:auto;margin:var(--bm) 0}
.cs-swatch{min-height:120px;padding:var(--bp);border-radius:var(--br);box-shadow:var(--neu-s)}
.cs-ia-toggle{background:var(--paper);box-shadow:var(--neu-in-s);padding:5px;gap:4px}
.cs-ia-btn{padding:10px 18px}
.cs-ia-btn.on{background:var(--black);box-shadow:var(--neu-dark-btn)}
/* image frames: same inset everywhere */
.cs-img,.cs-vid,.gal-card{padding:9px;border-radius:var(--br)}
.cs-img img,.cs-img video,.cs-vid iframe,.gal-card img{border-radius:16px}
.cs-img{margin:var(--bm) 0 12px}
.cs-img2 .cs-img,.cs-img3 .cs-img{margin:0}
.cs-img2,.cs-img3{margin:var(--bm) 0 12px}
.gal-grid{column-gap:var(--bg)}
.gal-card{margin-bottom:var(--bg)}
.gal-label{left:9px;right:9px;bottom:9px;border-radius:0 0 16px 16px}
.cs-cap{margin:12px 0 0}
@media(max-width:640px){
  :root{--bp:18px;--bp-lg:22px;--bp-row:14px 16px;--br:20px;--br-lg:24px;--bg:14px;--bm:24px}
  .cs-stats{margin:40px 0}
  .cs-img,.cs-vid,.gal-card{padding:6px}
  .cs-img img,.cs-img video,.cs-vid iframe,.gal-card img{border-radius:14px}
  .gal-label{left:6px;right:6px;bottom:6px}
}
.cs-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:var(--bg);margin-bottom:var(--bg)}
.cs-mi{display:flex;flex-direction:column;justify-content:center;min-height:76px}
.cs-status{margin-top:0;padding:10px 18px}
.cs-chips{gap:10px}
@media(max-width:640px){.cs-meta{grid-template-columns:1fr 1fr}.cs-mi{min-height:68px}}

/* ===== accessible controls: everything clickable is flat, outlined and clearly identifiable. Decorative tiles stay neumorphic. ===== */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:inherit}
#contact a:focus-visible,#contact button:focus-visible,.gm-banner a:focus-visible,.lightbox button:focus-visible{outline-color:var(--white)}
/* nav */
.nav-links a{border-radius:100px;transition:background .2s,color .2s}
.nav-links a:hover{box-shadow:none;background:rgba(17,17,17,.07);color:var(--ink)}
.nav-cta,.vr-mini a{background:var(--ink);color:var(--white);box-shadow:none;border:1.5px solid var(--ink);transition:background .2s,border-color .2s}
.nav-cta:hover,.vr-mini a:hover{background:#333;border-color:#333;color:var(--white)}
.nav-cta:active{box-shadow:none}
.nav-ham,.mob-close{box-shadow:none;border:1.5px solid var(--ink);box-sizing:border-box;background:transparent;transition:background .2s}
.nav-ham:hover,.mob-close:hover{background:rgba(17,17,17,.07)}
.vr-mini button{border:1.5px solid transparent;transition:border-color .2s}
.vr-mini button:hover{border-color:var(--ink)}
/* buttons */
.btn{transition:background .2s,color .2s,border-color .2s,transform .3s cubic-bezier(.2,.7,.2,1)}
.btn-solid{background:var(--ink);color:var(--white);box-shadow:none;border:1.5px solid var(--ink)}
.btn-solid:hover{background:#333;border-color:#333;color:var(--white);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--ink);box-shadow:none;border:1.5px solid var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--white);transform:translateY(-2px)}
.btn:active{box-shadow:none;transform:none}
#contact .btn-solid{background:var(--white);color:var(--ink);border-color:var(--white);box-shadow:none}
#contact .btn-solid:hover{background:#fff;border-color:#fff;color:var(--ink)}
#contact .btn-ghost{background:transparent;color:var(--white);border-color:var(--white);box-shadow:none}
#contact .btn-ghost:hover{background:var(--white);color:var(--ink)}
#contact .btn:active{box-shadow:none}
#contact .ct-email{color:var(--white)}
/* back + next links */
.cs-back,.cs-foot-back{box-shadow:none;border:1.5px solid var(--ink);background:transparent;color:var(--ink);transition:background .2s,color .2s}
.cs-back:hover,.cs-foot-back:hover{box-shadow:none;background:var(--ink);color:var(--white)}
.cs-nxt{box-shadow:none;border:1.5px solid var(--ink);background:transparent;transition:background .25s,color .25s}
.cs-nxt:hover{background:var(--ink)}
.cs-nxt:hover .cs-nxt-l,.cs-nxt:hover .cs-nxt-a{color:var(--white)}
.cs-nxt-a{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1.5px}
/* playground link cards */
.pcard{box-shadow:none;border:1px solid rgba(17,17,17,.16);background:#F4F4F1}
.pcard:hover{box-shadow:none;border-color:var(--black)}
.pcard-link{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 20px;border-radius:100px;border:1.5px solid currentColor;transition:background .25s,color .25s}
.pcard:hover .pcard-link{background:var(--white);color:var(--ink);border-color:var(--white)}
/* contents rail links */
.cs-toc a{text-decoration:none;transition:color .2s}
.cs-toc a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
/* accordion + toggles */
.cs-acc-btn{cursor:pointer;transition:background .2s}
.cs-acc-btn:hover{background:rgba(17,17,17,.04)}
.cs-acc-icon{box-shadow:none;border:1.5px solid var(--ink);box-sizing:border-box}
.cs-acc-btn[aria-expanded="true"] .cs-acc-icon{background:var(--ink);color:var(--white);box-shadow:none;border-color:var(--ink)}
.cs-ia-toggle{box-shadow:none;border:1.5px solid var(--ink);background:transparent}
.cs-ia-btn{color:var(--ink)}
.cs-ia-btn.on{background:var(--ink);color:var(--white);box-shadow:none}
/* zoomable images: keep the neumorphic frame, add a clear hover ring */
.cs-img,.gal-card{transition:box-shadow .25s}
.cs-img:hover,.gal-card:hover{box-shadow:0 0 0 1.5px var(--ink)}
.lb-close{border:1.5px solid rgba(255,255,255,.7);background:transparent}
.lb-close:hover{background:#fff;color:#111}
@media(hover:none){.pcard:hover .pcard-link{background:transparent;color:inherit;border-color:currentColor}}