/* Case study layout measured from the live Framer pages.
   Desktop >=1200, tablet 810-1199, mobile <810. Content is fixed-width and centered; it never scales up. */
.csx{
  --w:min(750px,100vw - 30px);
  --t:#333;
  --eye:24px;--eye-lh:36px;--eye-mb:8px;
  --h1:60px;--h1-lh:72px;--h1-w:1000px;--meta:18px;--meta-lh:27px;--meta-mt:32px;
  --ph-w:275px;--ph-gap:32px;--ph-ar:275/584;--hero-pt:111px;--hero-phones-mt:100px;
  --himg-w:970px;
  --h:44px;--h-lh:52.8px;--b:20px;--b-lh:32px;--b-ls:-.4px;
  --bgap:200px;--img-mt:60px;--white-pt:100px;
  --chip:18px;--chip-lh:27px;--q:24px;--q-lh:36px;--li-in:25.2px;--loose:52px;
  --lab:24px;--lab-lh:36px;--sol-lab:24px;--sol-lab-lh:36px;
  --sol-h:50px;--sol-h-lh:60px;--sol-w:var(--w);--sol-pb:100px;--row-h:713px;
  --vid-w:396px;--vid-h:736px;--vw-w:350px;--vw-h:713px;--vw-l:-27px;--vw-r:50px;--row-gap:80px;--chk:18px;--chk-lh:27px;--chk-gap:20px;
  --pv-w:351px;--pv-h:713px;
  --md-w:1000px;--sol-gap:150px;
  --res-h-w:1000px;--res-fs:50px;--res-lh:60px;--srow:1000px;--srow-pl:50px;--srow-gap:130px;--stack-gap:80px;
  --num:200px;--num-lh:240px;--dollar:92px;--unit:75px;--cap:18px;--cap-lh:27px;--cap-w:400;
  --team-pitch:295px;--b4gap:32px;--after-gap:200px;--team-rowgap:32px;--team-h:50px;--team-h-lh:60px;--team-mt:200px;
  background:#fff;color:var(--t);font-family:Inter,sans-serif;padding-bottom:50px;overflow-x:clip;
}
.csx main{width:auto;max-width:none;margin:0}
.csx *{margin:0;box-sizing:border-box}
.csx-sec{padding:var(--white-pt) 0 100px;background:#fff}
.csx-sec.grey{background:#fafafa;padding-bottom:var(--sol-pb)}
.csx-in{width:var(--w);margin:0 auto}
.csx-sol{padding-top:100px}
.tb{display:none}
.csx-c{position:relative;left:50%;transform:translateX(-50%)}

/* type */
.csx h1,.csx h2,.csx p,.csx dt,.csx dd,.csx li,.csx span,.csx b,.csx i,.csx em{color:var(--t)}
.csx-eye{font-size:var(--eye);line-height:var(--eye-lh);font-weight:500;letter-spacing:-.5px;text-align:center;margin-bottom:var(--eye-mb)}
.csx-h1{font-size:var(--h1);line-height:var(--h1-lh);font-weight:700;letter-spacing:-2.6px;text-align:center;width:min(var(--h1-w),100% - 30px);margin:0 auto}
.csx-meta{width:min(var(--h1-w),100% - 30px);margin-left:auto;margin-right:auto;font-size:var(--meta);line-height:var(--meta-lh);font-weight:500;letter-spacing:-.5px;text-align:center;margin-top:var(--meta-mt)}
.csx-lab{font-size:var(--lab);line-height:var(--lab-lh);font-weight:500;letter-spacing:-.5px}
.csx-hd{font-size:var(--h);line-height:var(--h-lh);font-weight:700;letter-spacing:-2px}
.csx-p{font-size:var(--b);line-height:var(--b-lh);font-weight:400;letter-spacing:var(--b-ls)}
.csx-p{padding-bottom:var(--pbd,0)}
.csx-p b{font-weight:700}
.csx-p em{font-style:italic}
.csx-big{font-size:var(--sol-h);line-height:var(--sol-h-lh);font-weight:700;letter-spacing:-2.6px;text-align:center}
.csx-chip{display:block;width:fit-content;padding:4px 12px;background:#efefef;box-shadow:inset 0 0 0 1px #9599a0;border-radius:100px;font-size:var(--chip);line-height:var(--chip-lh);font-weight:500;letter-spacing:-.5px;color:var(--t)}
.csx-q{font-size:var(--q);line-height:var(--q-lh);font-weight:500;letter-spacing:-.5px}

/* hero */
.csx-hero{background:#fff;padding:var(--hero-pt) 0 100px}
.csx-hero.grey{background:#fafafa}
.csx-phones{display:flex;justify-content:center;gap:var(--ph-gap)}
.csx-phones img{display:block;flex:none;width:var(--ph-w);aspect-ratio:var(--ph-ar);height:auto;object-fit:cover;border-radius:0}
.csx-hero .csx-phones,.csx-hero .csx-himg{margin-top:var(--hero-phones-mt)}
.csx-himg{display:block;width:var(--himg-w);aspect-ratio:970/638;height:auto;object-fit:cover;border-radius:20px;margin-left:auto;margin-right:auto}

/* story blocks */
.csx-block + .csx-block{margin-top:var(--bgap)}
.csx-block > * + *{margin-top:20px}
.csx-block > img.csx-im,.csx-block > .csx-wideimg{margin-top:var(--img-mt)}
.csx-block > .csx-cap2{margin-top:10px}
.csx-im{display:block;width:100%;aspect-ratio:var(--r,3/2);height:auto;object-fit:cover;border-radius:24px}
.csx-wideimg{width:min(1200px,100vw);position:relative;left:50%;transform:translateX(-50%)}
.csx-wideimg img{display:block;width:100%;aspect-ratio:var(--r);height:auto;object-fit:cover;border-radius:var(--wr,0)}
.csx-cap2{font-size:12px;line-height:14.4px;font-weight:400}
.csx-cap2 em{font-style:italic;color:#696969}

/* lists (markers match Framer: disc "•" / decimal "1.", 25px text indent) */
.csx-ul,.csx-ol{list-style:none;padding:0;counter-reset:li}
.csx-ul li,.csx-ol li{position:relative;padding-left:var(--li-in);font-size:var(--b);line-height:var(--b-lh);letter-spacing:var(--b-ls);font-weight:400;counter-increment:li}
.csx-ul li::before{content:"•";position:absolute;left:0}
.csx-ol li::before{content:counter(li) ".";position:absolute;left:0}
.csx-ul li b,.csx-ol li b{font-weight:700}
.csx-ol.loose li + li{margin-top:var(--loose)}

/* solution */
.csx-sol-lab{font-size:var(--sol-lab);line-height:var(--sol-lab-lh);font-weight:500;letter-spacing:-.5px;text-align:center}
.csx-sol .csx-big{width:var(--sol-w);margin:24px 0 0;position:relative;left:50%;transform:translateX(-50%)}
.csx-sol .csx-p{text-align:center;margin-top:24px}
.csx-sol .csx-big.again{margin-top:var(--sol-gap)}
.csx-sol .csx-media{margin-top:44px}
.csx-sol .csx-phones{margin-top:var(--sol-ph-mt,var(--hero-phones-mt))}
.csx-sol .csx-phones.after-p{margin-top:44px}
.csx-media{display:block;width:var(--md-w);aspect-ratio:var(--r);height:auto;object-fit:cover;border-radius:24px;margin-left:auto;margin-right:auto}
.csx-row{display:flex;align-items:center;justify-content:center;gap:var(--row-gap);height:var(--row-h);margin-top:100px}
.csx-vid{position:relative;flex:none;width:var(--vw-w);height:var(--vw-h);border-radius:var(--vw-r);overflow:hidden}
.csx-vid video{position:absolute;top:0;left:var(--vw-l);display:block;width:var(--vid-w);height:var(--vid-h);max-width:none;object-fit:cover}
.csx-vid.plain{width:var(--pv-w);height:var(--pv-h);border-radius:12px;overflow:visible}
.csx-vid.plain video{position:static;width:100%;height:100%;border-radius:12px;object-fit:fill}
.p-mnps .csx-vid.plain video{border-radius:16.5%/8.1%}
.csx-checks{list-style:none;padding:0;display:flex;flex-direction:column;gap:var(--chk-gap)}
.csx-checks li{font-size:var(--chk);line-height:var(--chk-lh);font-weight:500;letter-spacing:-.5px;white-space:pre}
.csx-phones.h-sol{--ph-w:276px;--ph-gap:32px;--ph-ar:276/571}

/* results */
.csx-res-lab{text-align:center}
.csx-res-h{width:min(var(--res-h-w),100vw - 30px);margin-top:24px;font-size:var(--res-fs);line-height:var(--res-lh)}
.csx-stats{display:flex;width:var(--srow);margin:var(--stats-mt,100px) 0 0;padding-left:var(--srow-pl);gap:var(--srow-gap)}
.csx-stat{display:flex;flex-direction:column;align-items:center;flex:none}
.csx-sn{display:flex;align-items:center}
.csx-sn b{display:inline-grid;font-size:var(--num);line-height:var(--num-lh);font-weight:600}
.csx-sn b span{grid-area:1/1;color:var(--t)}
.csx-sn b .gh{visibility:hidden}
.csx-sn b.r .lv{justify-self:end}
.csx-sn b.l .lv{justify-self:start}
.csx-sn i{font-style:normal;font-size:100px;line-height:120px;font-weight:600;width:100px;text-align:center}
.csx-sn i.pre{width:var(--dollar)}
.csx-sn .u{font-size:var(--unit);line-height:var(--unit);font-weight:600;margin-left:12px;width:min-content}
.csx-cap{white-space:nowrap;font-size:var(--cap);line-height:var(--cap-lh);font-weight:var(--cap-w);letter-spacing:-.5px;text-align:center}
.csx-cap.wrap{white-space:normal}
.csx-after{margin-top:var(--after-gap,200px)}
.csx-r{margin-top:100px}
.csx-r.k200{margin-top:200px}
.csx-refl{margin-top:var(--refl-mt,125px)}
@media(max-width:1199px){.csx-refl{margin-top:var(--refl-mt-t,var(--refl-mt,125px))}.csx-p{padding-bottom:var(--pbt,0)}}
@media(max-width:809px){.csx-refl{margin-top:var(--refl-mt-m,var(--refl-mt,125px))}.csx-p{padding-bottom:var(--pbm,0)}}
@media(min-width:1200px){.csx-block.gx{margin-top:var(--gxd)}}
@media(min-width:810px) and (max-width:1199px){.csx-block.gx{margin-top:var(--gxt,var(--bgap))}}
.csx-refl .csx-lab{margin-bottom:var(--refl-lg,24px)}
.csx-refl .csx-p + .csx-p{margin-top:var(--refl-pg,20px)}
@media(max-width:1199px){.csx-refl .csx-p + .csx-p{margin-top:var(--refl-pg-t,20px)}}
@media(max-width:809px){.csx-refl .csx-p + .csx-p{margin-top:var(--refl-pg-m,20px)}}
.csx-team{margin-top:var(--team-mt)}
@media(max-width:809px){.csx-team{margin-top:var(--team-mt-m,var(--team-mt))}}
.csx-team h2{font-size:var(--team-h);line-height:var(--team-h-lh);font-weight:700;letter-spacing:-2.6px}
.csx-team ul{list-style:none;padding:0;margin-top:27px;display:grid;grid-template-columns:repeat(3,var(--team-pitch));row-gap:var(--team-rowgap)}
.csx-team li{display:block}
.csx-name,.csx-role{display:block;font-size:var(--b);line-height:var(--b-lh);letter-spacing:var(--b-ls)}
.csx-name{font-weight:700}
.csx-role{font-weight:400}
.csx-next{display:flex;justify-content:center;margin-top:225px}
.csx-next a{display:flex;align-items:center;justify-content:center;width:176px;height:40px;background:#ebebeb;border-radius:8px;font-size:14px;line-height:16.8px;font-weight:700;color:var(--t);text-decoration:none}
.csx-next a:hover{background:#ddd}

/* tablet */
@media(max-width:1199px){
  .csx{--eye:20px;--eye-lh:30px;--h1:48px;--h1-lh:57.6px;--h1-w:700px;--meta:16px;--meta-lh:24px;
    --ph-w:176px;--hero-phones-mt:75px;--himg-w:695px;--h:35px;--h-lh:42px;--b:16px;--b-lh:25.6px;--b-ls:-.32px;--bgap:150px;
    --chip:16px;--chip-lh:24px;--q:20px;--q-lh:30px;--li-in:20px;--loose:46px;
    --sol-lab:20px;--sol-lab-lh:30px;--sol-h:40px;--sol-h-lh:48px;--sol-pb:100px;--row-h:407px;
    --vid-w:226px;--vid-h:420px;--vw-w:200px;--vw-h:407px;--vw-l:-15px;--vw-r:28px;--row-gap:41px;--chk:16px;--chk-lh:24px;
    --pv-w:226px;--pv-h:420px;--md-w:759px;
    --res-h-w:800px;--srow:800px;--srow-pl:32px;--srow-gap:113px;--num:150px;--num-lh:180px;--dollar:84px;
    --team-h:40px;--team-h-lh:48px;--after-gap:150px;--b4gap:23px}
  .csx-refl .csx-lab{font-size:20px;line-height:30px}
  .csx-phones.h-sol{--ph-w:180px;--ph-gap:12px}
  .tb{display:block}
  .csx-wideimg.fixed{width:1200px}
  .csx-wideimg:not(.fixed){width:750px}
  .csx-wideimg img{aspect-ratio:var(--rt,var(--r))}
}
/* mobile */
@media(max-width:809px){
  .csx{--eye:18px;--eye-lh:27px;--eye-mb:4px;--h1:38px;--h1-lh:45.6px;--meta:12px;--meta-lh:18px;--meta-mt:12px;
    --ph-w:84px;--ph-gap:8px;--hero-pt:64px;--hero-phones-mt:32px;--himg-w:min(338px,100vw - 52px);--h:28px;--h-lh:33.6px;--bgap:100px;--img-mt:30px;--white-pt:50px;
    --chip:12px;--chip-lh:18px;--q:18px;--q-lh:27px;
    --sol-lab:18px;--sol-lab-lh:27px;--sol-h:32px;--sol-h-lh:38.4px;--res-fs:32px;--res-lh:38.4px;--sol-pb:100px;--lab:18px;--lab-lh:27px;
    --vid-w:283px;--vid-h:525px;--vw-w:250px;--vw-h:509px;--vw-l:-19px;--vw-r:36px;--pv-w:250px;--pv-h:509px;--md-w:calc(100vw - 19px);--chk:12px;--chk-lh:18px;--chk-gap:12px;
    --num:150px;--num-lh:180px;--after-gap:100px;--team-h:32px;--team-h-lh:38.4px}
  .csx{padding-bottom:0}
  .csx-refl .csx-lab{font-size:18px;line-height:27px}
  .csx-phones.h-sol{--ph-w:86px;--ph-gap:12px}
  .csx-cap2{font-size:8px;line-height:9.6px}
  .csx-row{flex-direction:column;align-items:center;gap:32px;margin-top:51px;height:auto}
  .csx-stats{flex-direction:column;align-items:center;padding-left:0;gap:var(--stack-gap);width:var(--w)}
  .csx-im{aspect-ratio:var(--rm,var(--r,3/2))}
  .csx-wideimg img{aspect-ratio:var(--rm,var(--rt,var(--r)))}
  .csx-sn .u{font-size:var(--unit-m,var(--unit));line-height:var(--unit-m,var(--unit))}
  .csx-team ul{grid-template-columns:1fr;row-gap:20px}
  .csx-sec.res{padding-top:100px}
}

/* per-page values (hero phones, stats rows, team grid, ...) */
.p-mnps{--ph-w:276px;--ph-ar:276/571;--team-pitch:275px}
.p-wellnest{--sol-w:1000px}
.p-hermes{--srow-pl:85px;--srow-gap:172px;--cap-w:500}
.p-wellnest{--ph-ar:275/571;--srow:1200px;--srow-pl:0px;--srow-gap:193px;--cap-w:500;--res-h-w:1200px;--team-pitch:310px}
@media(max-width:1199px){
  .p-mnps{--ph-w:181px;--ph-gap:12px}
  .p-hermes{--srow-pl:46px;--cap:16px;--cap-lh:24px}
  .p-wellnest{--ph-w:179px;--ph-gap:12px;--cap:16px;--cap-lh:24px;--res-fs:40px;--res-lh:48px;--res-h-w:750px;--stack-gap:98px;--sol-w:var(--w)}
}
@media(min-width:810px) and (max-width:1199px){
  .p-wellnest .csx-stats{flex-direction:column;align-items:center;padding-left:0;gap:var(--stack-gap)}
}
@media(max-width:809px){
  .p-mnps{--ph-w:86px;--ph-gap:8px}
  .p-hermes{--num:116px;--num-lh:139px;--stack-gap:50px;--cap:16px;--cap-lh:24px;--sol-w:calc(100vw - 4px)}
  .p-hermes .csx-sol .csx-in{width:calc(100vw - 4px)}
  .p-wellnest{--white-pt:100px;--h1-w:320px;--meta-mt:32px;--ph-w:81px;--ph-gap:12px;--num:130px;--num-lh:156px;--unit:70px;--cap:12px;--cap-lh:18px;--stack-gap:118px;--stats-mt:75px;--sol-ph-mt:50px;--res-h-w:360px}
  .p-wellnest .csx-sn i.pre{font-size:75px;line-height:90px}
}

/* scroll fade-in (Framer 'appear': opacity only, ~0.4s ease-in-out, once, at 50% visible) */
.csx-js .csx-fade{opacity:0}
.csx-js .csx-fade.in{opacity:1;transition:opacity .4s cubic-bezier(.42,0,.58,1)}
@media(prefers-reduced-motion:reduce){.csx-js .csx-fade{opacity:1;transition:none}}



/* phone + desktop video pair (ticketing solution) */
.csx-duo{--duo-w:min(1120px,100vw - 40px);display:flex;align-items:center;justify-content:center;gap:24px;width:var(--duo-w);margin:44px 0 0 calc((100% - var(--duo-w))/2)}
.csx-duo video{display:block;height:auto;border-radius:24px;background:#fff;box-shadow:0 0 0 1px #e6e6e6,0 8px 30px rgba(0,0,0,.06)}
.csx-duo .ph{flex:none;width:calc((100% - 24px)*.2242);aspect-ratio:748/1612}
.csx-duo .dk{flex:none;width:calc((100% - 24px)*.7758);aspect-ratio:1600/994}
@media(max-width:809px){
  .csx-duo{flex-direction:column;gap:20px;width:var(--w);margin-left:auto;margin-right:auto}
  .csx-duo .ph{width:min(280px,100%)}
  .csx-duo .dk{width:100%}
}

/* abc.gif: plain text-thread GIF at its full phone proportion (749x1622) */
.csx-sol .csx-gif{display:block;width:min(340px,calc(100% - 40px));aspect-ratio:749/1622;height:auto;margin:44px auto 0;border-radius:24px;background:#fff;box-shadow:0 0 0 1px #e6e6e6,0 8px 30px rgba(0,0,0,.06)}

/* ticketing results: three stats in one row (all sizes derive from --num) */
.p-ticketing,.p-hermes{--m:clamp(20px,calc(20px + (100vw - 810px)*.1128),64px);--srow:calc(100vw - 2*var(--m));--srow-pl:0px;--num:min(260px,calc((100vw - 2*var(--m))/7.6));--num-lh:calc(var(--num)*1.2);--srow-gap:calc(var(--num)*.45);--dollar:calc(var(--num)*.47);--cap-w:500;--res-h-w:900px}
.p-ticketing .csx-stats,.p-hermes .csx-stats{justify-content:center}
.p-ticketing .csx-sn i,.p-hermes .csx-sn i{font-size:calc(var(--num)*.55);line-height:calc(var(--num)*.66);width:auto;margin-left:4px}
.p-ticketing .csx-sn i.pre,.p-hermes .csx-sn i.pre{width:var(--dollar);margin-left:0}
/* hermes results: shorter numbers than ticketing, so run them larger with wider spacing */
@media(min-width:810px){
  .p-hermes{--num:min(300px,calc((100vw - 2*var(--m))/6.45));--num-lh:calc(var(--num)*1.2);--srow-gap:calc(var(--num)*.45)}
}
@media(max-width:1199px){
  .p-ticketing{--cap:16px;--cap-lh:24px;--res-fs:40px;--res-lh:48px;--res-h-w:750px}
}
@media(max-width:809px){
  /* results stats: same size on every case study that shares the fluid rule above (must come after it) */
  .p-ticketing,.p-hermes{--num:116px;--num-lh:139px;--stack-gap:70px;--stats-mt:75px;--res-h-w:360px;--srow-gap:70px}
}

/* mobile: automated-follow-up phone matches the first phone's size (280px) */
@media(max-width:809px){.csx-sol .csx-gif{width:min(280px,100%)}}