/* =====================================================================
   SINGLE WORK VX - single case study. Loaded only on is_singular( 'work' )
   ===================================================================== */

/* ---------- SINGLE WORK ROOT: HERO ---------- */
:root{--vx-sw-hero-h:436px;--vx-sw-hero-bg:linear-gradient(99.15deg,rgba(255,255,255,.06) 2.42%,rgba(13,3,33,.06) 55.17%,rgba(13,13,13,.06) 62.48%);--vx-sw-hero-border:rgba(247,247,247,.15);--vx-sw-hero-border-w:2px;--vx-sw-hero-radius:20px;--vx-sw-hero-pad:clamp(1.25rem,.875rem + 1.6667vw,2.375rem);--vx-sw-hero-title-w:706px;--vx-sw-hero-title-fs:clamp(2rem,1.625rem + 1.6667vw,3.125rem);--vx-sw-hero-title-lh:1.2;--vx-sw-hero-hl:var(--vx-violet-500);--vx-sw-hero-text-w:604px;--vx-sw-hero-text-lh:1.667;--vx-sw-hero-gap:30px;--vx-sw-hero-media-w:579px;--vx-sw-hero-media-ratio:579 / 436;--vx-sw-stats-w:1237px;--vx-sw-stats-mt:clamp(2rem,1.6458rem + 1.5741vw,3.0625rem);--vx-sw-stat-fs:clamp(2.25rem,1.9286rem + 1.4286vw,3.2143rem);--vx-sw-stat-color:var(--vx-violet-500)}

/* ---------- HERO (mobile: image on top) ---------- */
.vx-sw-hero{padding-bottom:var(--vx-section-space)}
.vx-sw-hero__card{position:relative;display:grid;grid-template-columns:minmax(0,1fr);box-sizing:border-box;background:var(--vx-sw-hero-bg);border:var(--vx-sw-hero-border-w) solid var(--vx-sw-hero-border);border-radius:var(--vx-sw-hero-radius);overflow:hidden}
.vx-sw-hero__content{position:relative;z-index:1;padding:var(--vx-sw-hero-pad)}
.vx .vx-sw-hero__title{max-width:var(--vx-sw-hero-title-w);margin:0;font-size:var(--vx-sw-hero-title-fs);font-weight:var(--vx-fw-semibold);line-height:var(--vx-sw-hero-title-lh);letter-spacing:-0.03em}
.vx-sw-hero__hl{font-weight:var(--vx-fw-bold);color:var(--vx-sw-hero-hl)}
.vx .vx-sw-hero__text{max-width:var(--vx-sw-hero-text-w);margin:var(--vx-sw-hero-gap) 0 0;line-height:var(--vx-sw-hero-text-lh);letter-spacing:-0.01em}
.vx-sw-hero__media{order:-1;aspect-ratio:var(--vx-sw-hero-media-ratio)}
.vx-sw-hero__img{display:block;width:100%;height:100%;object-fit:cover;object-position:right center}
.vx-sw-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--vx-space-32) var(--vx-space-24);max-width:var(--vx-sw-stats-w);margin:var(--vx-sw-stats-mt) auto 0;padding:0;list-style:none}
.vx-sw-stat{display:flex;flex-direction:column}
.vx-sw-stat__num{font-size:var(--vx-sw-stat-fs);font-weight:var(--vx-fw-semibold);line-height:1.167;letter-spacing:-0.01em;color:var(--vx-sw-stat-color);font-variant-numeric:tabular-nums}
.vx-sw-stat__label{margin-top:var(--vx-space-4);font-size:var(--vx-fs-body);line-height:var(--vx-sw-hero-text-lh);letter-spacing:-0.01em;color:var(--vx-white)}

/* HERO: desktop (text left, image right, stats in one row) */
@media (min-width:1024px){
.vx-sw-hero__card{grid-template-columns:minmax(0,1fr) var(--vx-sw-hero-media-w);min-height:var(--vx-sw-hero-h)}
.vx-sw-hero__media{order:0;aspect-ratio:auto}
.vx-sw-stats{display:flex;justify-content:space-between}
}

/* ---------- SINGLE WORK ROOT: SHARED + CHALLENGE ---------- */
:root{--vx-sw-w:1237px;--vx-sw-label-fs:clamp(1.5rem,1.375rem + .5556vw,1.875rem);--vx-sw-label-color:var(--vx-violet-500);--vx-sw-gap-1:30px;--vx-sw-gap-2:clamp(1.5rem,1.1667rem + 1.4815vw,2.5rem);--vx-sw-ch-col-gap:90px;--vx-sw-ch-side-w:458px;--vx-sw-ch-title-w:689px;--vx-sw-ch-title-fs:clamp(2rem,1.625rem + 1.6667vw,3.125rem);--vx-sw-ch-hl:#9000CE;--vx-sw-ch-text-fs:clamp(1.125rem,.9792rem + .6481vw,1.5625rem);--vx-sw-ch-text-w:548px;--vx-sw-ch-num-fs:clamp(1.5rem,1.317rem + .813vw,2.0489rem);--vx-sw-ch-point-fs:clamp(1.0625rem,.9898rem + .3231vw,1.2806rem);--vx-sw-ch-point-gap:30px;--vx-sw-ch-num-gap:26.6px;--vx-sw-ch-muted:#919191;--vx-sw-ch-box-gap:20px;--vx-sw-ch-box-border:rgba(247,247,247,.15);--vx-sw-ch-box-radius:11.3px;--vx-sw-ch-box-h:199px;--vx-sw-ch-box-pad:clamp(1.25rem,1.0839rem + .7383vw,1.8044rem);--vx-sw-ch-box-fs:clamp(1.25rem,1.0325rem + .9667vw,1.9028rem);--vx-sw-ch-box-text-w:490px;--vx-sw-ch-media-w:297px;--vx-sw-ch-media-ratio:297 / 197}

/* ---------- SECTION LABEL (shared: Challenge, Solutions, Impact...) ---------- */
.vx .vx-sw-label{margin:0 0 var(--vx-sw-gap-1);font-size:var(--vx-sw-label-fs);font-weight:var(--vx-fw-semibold);line-height:1.867;letter-spacing:-0.01em;color:var(--vx-sw-label-color)}

/* ---------- CHALLENGE (mobile: stacked) ---------- */
.vx-sw-ch__inner{max-width:var(--vx-sw-w);margin-inline:auto}
.vx-sw-ch__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--vx-sw-gap-2)}
.vx .vx-sw-ch__title{max-width:var(--vx-sw-ch-title-w);margin:0;font-size:var(--vx-sw-ch-title-fs);font-weight:var(--vx-fw-medium);line-height:1.2;letter-spacing:-0.01em}
.vx-sw-ch__hl{font-weight:var(--vx-fw-semibold);color:var(--vx-sw-ch-hl)}
.vx .vx-sw-ch__text{max-width:var(--vx-sw-ch-text-w);margin:var(--vx-sw-gap-2) 0 0;font-size:var(--vx-sw-ch-text-fs);line-height:1.44;letter-spacing:-0.01em}
.vx .vx-sw-ch__intro{margin:0;line-height:1.667;letter-spacing:-0.01em}
.vx-sw-ch__points{display:flex;flex-direction:column;gap:var(--vx-sw-ch-point-gap);margin:var(--vx-sw-gap-2) 0 0;padding:0;list-style:none}
.vx-sw-ch__points li{display:flex;align-items:flex-start;gap:var(--vx-sw-ch-num-gap)}
.vx-sw-ch__num{flex:none;font-size:var(--vx-sw-ch-num-fs);font-weight:var(--vx-fw-medium);line-height:1.25;letter-spacing:-0.01em;color:var(--vx-white);font-variant-numeric:tabular-nums}
.vx-sw-ch__point{font-size:var(--vx-sw-ch-point-fs);line-height:1.5;letter-spacing:-0.01em;color:var(--vx-white)}
.vx .vx-sw-ch__callout-label{margin:var(--vx-sw-gap-2) 0 0;line-height:1.667;letter-spacing:-0.01em;color:var(--vx-sw-ch-muted)}
.vx-sw-ch__callout{display:grid;grid-template-columns:minmax(0,1fr);margin-top:var(--vx-sw-ch-box-gap);border:1px solid var(--vx-sw-ch-box-border);border-radius:var(--vx-sw-ch-box-radius);overflow:hidden}
.vx .vx-sw-ch__callout-text{align-self:center;max-width:calc(var(--vx-sw-ch-box-text-w) + var(--vx-sw-ch-box-pad) * 2);margin:0;padding:var(--vx-sw-ch-box-pad);font-size:var(--vx-sw-ch-box-fs);line-height:1.5;letter-spacing:-0.01em;text-wrap:wrap}
.vx-sw-ch__callout-media{aspect-ratio:var(--vx-sw-ch-media-ratio)}
.vx-sw-ch__callout-media img{display:block;width:100%;height:100%;object-fit:cover}
.vx .vx-sw-hero__title,.vx .vx-sw-hero__text,.vx .vx-sw-ch__title,.vx .vx-sw-ch__text,.vx .vx-sw-ch__intro{text-wrap:wrap}
/* CHALLENGE: desktop (as in Figma) */
@media (min-width:1024px){
.vx-sw-ch__grid{grid-template-columns:minmax(0,1fr) minmax(0,var(--vx-sw-ch-side-w));column-gap:var(--vx-sw-ch-col-gap)}
.vx-sw-ch__callout{grid-template-columns:minmax(0,1fr) var(--vx-sw-ch-media-w);min-height:var(--vx-sw-ch-box-h)}
.vx-sw-ch__callout-media{aspect-ratio:auto}
}

/* ---------- SINGLE WORK ROOT: SOLUTION ---------- */
:root{--vx-sw-sol-intro-gap:10px;--vx-sw-sol-cards-mt:30px;--vx-sw-sol-gap:20px;--vx-sw-sol-card-bg:#0F0F0F;--vx-sw-sol-border:rgba(247,247,247,.15);--vx-sw-sol-radius:9px;--vx-sw-sol-pad:clamp(1.25rem,.8333rem + 1.8519vw,2.5rem);--vx-sw-sol-card-h:442px;--vx-sw-sol-head-fs:clamp(1.375rem,1.19rem + .8213vw,1.9294rem);--vx-sw-sol-title-color:#9000CE;--vx-sw-sol-divider:rgba(255,255,255,.3);--vx-sw-sol-divider-h:53.6px;--vx-sw-sol-head-gap:22px;--vx-sw-sol-body-fs:clamp(1rem,.9474rem + .2338vw,1.1578rem);--vx-sw-sol-box-h:194px;--vx-sw-sol-box-pad:28px;--vx-sw-sol-box-fs:clamp(1.0625rem,.9973rem + .2898vw,1.2583rem);--vx-sw-sol-box-num:#9800DA;--vx-sw-sol-line-w:67px;--vx-sw-sol-line:rgba(255,255,255,.3);--vx-sw-sol-box-hover-border:rgba(109,0,156,.6);--vx-sw-sol-box-hover-bg:linear-gradient(180deg,rgba(109,0,156,.08) 0%,rgba(109,0,156,0) 70%);--vx-sw-sol-box-lift:-4px;--vx-sw-sol-stick:24px;--vx-sw-sol-stack:20px}

/* ---------- SOLUTION ---------- */
.vx-sw-sol__inner{max-width:var(--vx-sw-w);margin-inline:auto}
.vx .vx-sw-sol__label{margin-bottom:var(--vx-sw-sol-intro-gap)}
.vx .vx-sw-sol__intro{margin:0;line-height:1.667;letter-spacing:-0.01em;text-wrap:wrap}
.vx-sw-sol__steps{display:flex;flex-direction:column;gap:var(--vx-sw-sol-gap);margin:var(--vx-sw-sol-cards-mt) 0 0;padding:0;list-style:none}
.vx-sw-sol__step{box-sizing:border-box;padding:var(--vx-sw-sol-pad);background:var(--vx-sw-sol-card-bg);border:1px solid var(--vx-sw-sol-border);border-radius:var(--vx-sw-sol-radius)}
.vx-sw-sol__head{display:flex;align-items:center;gap:var(--vx-sw-sol-head-gap)}
.vx-sw-sol__num{flex:none;font-size:var(--vx-sw-sol-head-fs);font-weight:var(--vx-fw-semibold);line-height:.867;letter-spacing:-0.01em;color:var(--vx-white);font-variant-numeric:tabular-nums}
.vx .vx-sw-sol__title{display:flex;align-items:center;min-height:var(--vx-sw-sol-divider-h);margin:0;padding-left:var(--vx-sw-sol-head-gap);border-left:2px solid var(--vx-sw-sol-divider);font-size:var(--vx-sw-sol-head-fs);font-weight:var(--vx-fw-semibold);line-height:1.2;letter-spacing:-0.01em;color:var(--vx-sw-sol-title-color);text-wrap:wrap}
.vx .vx-sw-sol__text{margin:var(--vx-space-20) 0 0;font-size:var(--vx-sw-sol-body-fs);line-height:1.444;letter-spacing:-0.01em}
.vx .vx-sw-sol__text--closing{margin-top:var(--vx-space-32)}
.vx-sw-sol__boxes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:var(--vx-sw-sol-gap);margin:var(--vx-space-20) 0 0;padding:0;list-style:none}
.vx-sw-sol__box{display:flex;flex-direction:column;justify-content:space-between;gap:var(--vx-space-24);box-sizing:border-box;padding:var(--vx-sw-sol-box-pad);border:1px solid var(--vx-sw-sol-border);border-radius:var(--vx-sw-sol-radius);background:transparent;transition:transform var(--vx-dur) var(--vx-ease),border-color var(--vx-dur) var(--vx-ease),background var(--vx-dur) var(--vx-ease)}
.vx-sw-sol__box-head{display:flex;align-items:center;gap:var(--vx-space-12)}
.vx-sw-sol__box-num{font-size:var(--vx-sw-sol-box-fs);line-height:1.444;letter-spacing:-0.03em;color:var(--vx-sw-sol-box-num);font-variant-numeric:tabular-nums}
.vx-sw-sol__line{display:block;width:var(--vx-sw-sol-line-w);height:1px;background:var(--vx-sw-sol-line);transform-origin:left center;transition:transform var(--vx-abt-team-dur,.5s) var(--vx-ease),background var(--vx-dur) var(--vx-ease)}
.vx .vx-sw-sol__box-text{margin:0;font-size:var(--vx-sw-sol-box-fs);line-height:1.444;letter-spacing:-0.03em;color:var(--vx-white);text-wrap:wrap}

/* SOLUTION: box hover (mouse only) */
@media (hover:hover){
.vx-sw-sol__box:hover{transform:translateY(var(--vx-sw-sol-box-lift));border-color:var(--vx-sw-sol-box-hover-border);background:var(--vx-sw-sol-box-hover-bg)}
.vx-sw-sol__box:hover .vx-sw-sol__line{transform:scaleX(1.8);background:var(--vx-sw-sol-box-num)}
}

/* SOLUTION: desktop, cards stack on scroll (as in Figma sizes) */
@media (min-width:1024px){
.vx-sw-sol__step{position:sticky;top:calc(var(--vx-header-h) + var(--vx-sw-sol-stick) + var(--i,0) * var(--vx-sw-sol-stack));min-height:var(--vx-sw-sol-card-h)}
.vx-sw-sol__box{min-height:var(--vx-sw-sol-box-h)}
}

/* ---------- SINGLE WORK ROOT: IMPACT ---------- */
:root{--vx-sw-imp-gap:20px;--vx-sw-imp-bg:rgba(255,255,255,.06);--vx-sw-imp-h:263px;--vx-sw-imp-pad:clamp(1.25rem,1.125rem + .5556vw,1.625rem);--vx-sw-imp-badge:50px;--vx-sw-imp-badge-bg:rgba(255,255,255,.12);--vx-sw-imp-badge-radius:7.7px;--vx-sw-imp-roll:.45s;--vx-sw-imp-title-fs:clamp(1.25rem,1.125rem + .5556vw,1.625rem);--vx-sw-imp-title-color:#D7D7D7;--vx-sw-imp-title-gap:35px;--vx-sw-imp-text-gap:30px;--vx-sw-imp-text-w:477px}

/* ---------- IMPACT ---------- */
.vx-sw-imp__inner{max-width:var(--vx-sw-w);margin-inline:auto}
.vx .vx-sw-imp__label{margin-bottom:var(--vx-sw-gap-2)}
.vx-sw-imp__list{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--vx-sw-imp-gap);margin:0;padding:0;list-style:none}
.vx-sw-imp__card{display:flex;flex-direction:column;align-items:flex-start;box-sizing:border-box;padding:var(--vx-sw-imp-pad);background:var(--vx-sw-imp-bg);border:1px solid var(--vx-sw-sol-border);border-radius:var(--vx-sw-sol-radius);transition:transform var(--vx-dur) var(--vx-ease),border-color var(--vx-dur) var(--vx-ease)}
.vx-sw-imp__badge{position:relative;display:block;flex:none;width:var(--vx-sw-imp-badge);height:var(--vx-sw-imp-badge);background:var(--vx-sw-imp-badge-bg);border-radius:var(--vx-sw-imp-badge-radius);overflow:hidden}
.vx-sw-imp__badge-num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:var(--vx-sw-sol-box-fs);font-weight:var(--vx-fw-semibold);letter-spacing:-0.03em;color:var(--vx-sw-sol-box-num);font-variant-numeric:tabular-nums;transition:transform var(--vx-sw-imp-roll) var(--vx-ease),opacity var(--vx-sw-imp-roll) var(--vx-ease)}
.vx-sw-imp__badge-num--hover{color:var(--vx-white);opacity:0;transform:translateY(100%)}
.vx .vx-sw-imp__title{margin:var(--vx-sw-imp-title-gap) 0 0;font-size:var(--vx-sw-imp-title-fs);font-weight:var(--vx-fw-semibold);line-height:1.154;letter-spacing:-0.03em;color:var(--vx-sw-imp-title-color);text-wrap:wrap}
.vx .vx-sw-imp__text{max-width:var(--vx-sw-imp-text-w);margin:var(--vx-sw-imp-text-gap) 0 0;font-size:var(--vx-sw-sol-body-fs);line-height:1.444;letter-spacing:-0.01em;text-wrap:wrap}

/* IMPACT: hover (mouse only): purple number rolls up and out, white number rolls in, card lifts */
@media (hover:hover){
.vx-sw-imp__card:hover{transform:translateY(var(--vx-sw-sol-box-lift));border-color:var(--vx-sw-sol-box-hover-border)}
.vx-sw-imp__card:hover .vx-sw-imp__badge-num{opacity:0;transform:translateY(-100%)}
.vx-sw-imp__card:hover .vx-sw-imp__badge-num--hover{opacity:1;transform:translateY(0)}
}

/* IMPACT: 2 columns (as in Figma) */
@media (min-width:768px){
.vx-sw-imp__list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1024px){
.vx-sw-imp__card{min-height:var(--vx-sw-imp-h)}
}

/* ---------- SINGLE WORK ROOT: BIGGER PICTURE + CTA BAR ---------- */
/* Figma 2163:669 | block 1237 | label→intro 10, intro 18/30 | intro→cards 40 | 3 cards 399×400, gap 20, gradient white 6% → black 6% (25%), border white 15%, radius 9, pad 29 | title 26/36 SemiBold #D7D7D7 | image 399×284 at card bottom | CTA bar 1238×94, gap 20, bg white 6%, radius 10, pad 24 | bar title 18/26 Medium, text 14/30 #A6A6A6 | button 15.2 Medium, pad 10.6/21.2, radius 6.7, arrow 13 | hovers: my values */
:root{--vx-sw-bp-card-h:400px;--vx-sw-bp-card-bg:linear-gradient(180deg,rgba(255,255,255,.06) 0%,rgba(0,0,0,.06) 24.95%);--vx-sw-bp-pad:clamp(1.25rem,1.0729rem + .787vw,1.8188rem);--vx-sw-bp-media-ratio:399 / 284;--vx-sw-bp-zoom:1.05;--vx-sw-cta-bg:rgba(255,255,255,.06);--vx-sw-cta-radius:10px;--vx-sw-cta-pad:24px;--vx-sw-cta-muted:#A6A6A6;--vx-sw-cta-btn-fs:.9493rem;--vx-sw-cta-btn-px:21.2px;--vx-sw-cta-btn-py:10.6px;--vx-sw-cta-btn-radius:6.7px;--vx-sw-cta-btn-gap:7px;--vx-sw-cta-arrow:14px}

/* ---------- BIGGER PICTURE ---------- */
.vx-sw-bp__inner{max-width:var(--vx-sw-w);margin-inline:auto}
.vx .vx-sw-bp__label{margin-bottom:var(--vx-sw-sol-intro-gap)}
.vx .vx-sw-bp__intro{margin:0;line-height:1.667;letter-spacing:-0.01em;text-wrap:wrap}
.vx-sw-bp__list{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--vx-sw-imp-gap);margin:var(--vx-sw-gap-2) 0 0;padding:0;list-style:none}
.vx-sw-bp__card{display:flex;flex-direction:column;justify-content:space-between;box-sizing:border-box;background:var(--vx-sw-bp-card-bg);border:1px solid var(--vx-sw-sol-border);border-radius:var(--vx-sw-sol-radius);overflow:hidden;transition:transform var(--vx-dur) var(--vx-ease),border-color var(--vx-dur) var(--vx-ease)}
.vx .vx-sw-bp__title{margin:0;padding:var(--vx-sw-bp-pad) var(--vx-sw-bp-pad) var(--vx-space-16);font-size:var(--vx-sw-imp-title-fs);font-weight:var(--vx-fw-semibold);line-height:1.385;letter-spacing:-0.03em;color:var(--vx-sw-imp-title-color);text-wrap:wrap}
.vx-sw-bp__media{aspect-ratio:var(--vx-sw-bp-media-ratio);overflow:hidden}
.vx-sw-bp__media img{display:block;width:100%;height:100%;object-fit:cover;object-position:bottom center;transition:transform .6s var(--vx-ease)}

/* ---------- CTA BAR (static, same on every story) ---------- */
.vx-sw-cta{display:flex;flex-direction:column;align-items:flex-start;gap:var(--vx-space-16);margin-top:var(--vx-sw-imp-gap);padding:var(--vx-sw-cta-pad);background:var(--vx-sw-cta-bg);border:1px solid var(--vx-sw-sol-border);border-radius:var(--vx-sw-cta-radius)}
.vx .vx-sw-cta__title{margin:0;font-size:var(--vx-fs-compact);font-weight:var(--vx-fw-medium);line-height:1.444;letter-spacing:-0.01em}
.vx .vx-sw-cta__text{margin:var(--vx-space-4) 0 0;font-size:.875rem;line-height:1.5;letter-spacing:-0.01em;color:var(--vx-sw-cta-muted)}
.vx .vx-sw-cta__btn{flex:none;gap:var(--vx-sw-cta-btn-gap);min-height:0;padding:var(--vx-sw-cta-btn-py) var(--vx-sw-cta-btn-px);font-size:var(--vx-sw-cta-btn-fs);font-weight:var(--vx-fw-medium);line-height:1.3;letter-spacing:-0.02em;border-radius:var(--vx-sw-cta-btn-radius)}
.vx-sw-cta__btn img{display:block;width:var(--vx-sw-cta-arrow);height:var(--vx-sw-cta-arrow);transition:transform var(--vx-dur) var(--vx-ease)}

/* BIGGER PICTURE + CTA: hover (mouse only) */
@media (hover:hover){
.vx-sw-bp__card:hover{transform:translateY(var(--vx-sw-sol-box-lift));border-color:var(--vx-sw-sol-box-hover-border)}
.vx-sw-bp__card:hover .vx-sw-bp__media img{transform:scale(var(--vx-sw-bp-zoom))}
.vx-sw-cta__btn:hover img{transform:translateX(3px)}
}

/* BIGGER PICTURE: 3 columns from tablet up */
@media (min-width:768px){
.vx-sw-bp__list{grid-template-columns:repeat(3,minmax(0,1fr))}
.vx-sw-cta{flex-direction:row;align-items:center;justify-content:space-between}
.vx .vx-sw-cta__title{font-size:1.125rem}
}
@media (min-width:1024px){
.vx-sw-bp__card{min-height:var(--vx-sw-bp-card-h)}
}