/* Generated by the work-case conversion (Oct 2026) from the team's coded case study. Page-specific: loaded only on
   this case study. Every selector is scoped to .work-case. Fonts map to the site tokens; layout and sizes are the team's. */
.work-case { position: relative; z-index: 0; line-height: normal; font-size: 16px; }
.work-case img, .work-case video { max-width: none; }
.work-case svg { display: inline; max-width: none; }
.work-case .container { max-width: none; padding-inline: 0; }
.work-case .section { padding-block: 0; }
.work-case .card { display: block; gap: normal; padding: 0; background: none; border: 0; border-radius: 0; transition: none; position: static; }
.work-case .tag { display: initial; gap: normal; font: inherit; letter-spacing: normal; text-transform: none; color: inherit; }
.work-case .tag::before { content: none; }
.work-case .su-topnav{ position: fixed; top: 0; left: 0; z-index: 1000; width: 1440px; padding-top: 36px;
               transform-origin: top left; pointer-events: none; overflow: hidden; }
.work-case .su-topnav-fill{ position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.work-case .su-topnav-fill > i{ position: absolute; display: block; }
.work-case .su-topnav-shell{ pointer-events: auto; width: 1368px; margin: 0 auto; display: flex; align-items: center;
                     justify-content: space-between; gap: 24px; padding: 18.5px 24px; background: #fff;
                     border: 1.5px solid rgba(45,54,72,0.12); border-radius: 12px; overflow: hidden; }
.work-case .su-crumb{ display: flex; align-items: center; gap: 24px; padding-right: 12px; min-width: 0; }
.work-case .su-back{ flex: none; width: 32px; height: 32px; border-radius: 16px; background: var(--color-text-on-light-primary);
             display: flex; align-items: center; justify-content: center; }
.work-case .su-back img{ display: block; width: 13.333px; height: 13.333px; transition: transform .3s ease-out; }
.work-case .su-back:hover img{ transform: translateX(-2px); }
.work-case .su-crumb-text{ display: flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap;
                   font-family: var(--font-mono); font-size: 12px; font-weight: 400;
                   line-height: normal; letter-spacing: 0.96px; color: var(--color-text-on-light-primary); text-transform: uppercase; }
.work-case .su-crumb-link{ color: inherit; text-decoration: underline; text-underline-position: from-font; }
.work-case .su-crumb-title{ font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.work-case .su-footer{ display: flex; flex-direction: column; align-items: center; }
.work-case .su-footer-line{ width: 1057.5px; max-width: 100%; height: 0.881px;
                    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.6) 50%, rgba(255,255,255,0)); }
.work-case .su-footer-body{ width: 100%; padding: 64px 120px; background: var(--color-background-inverse); }
.work-case .su-footer-row{ display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.work-case .su-footer-sign{ display: flex; align-items: center; gap: 24px; min-height: 38px; }
.work-case .su-footer-sign img{ display: block; width: 22.134px; height: 30.331px; }
.work-case .su-footer-tag{ margin: 0; white-space: nowrap; font-family: var(--font-sans);
                   font-size: 24px; font-weight: 300; line-height: 1.4; letter-spacing: 0.24px; color: var(--color-text-on-dark-secondary); }
.work-case .su-footer-tag em{ font-family: var(--font-serif); font-style: italic; font-weight: 700;
                      font-size: 26px; line-height: 1; letter-spacing: 0; color: var(--color-text-on-dark-primary); }
.work-case .su-footer-meta{ margin: 0; white-space: nowrap; text-align: right; font-family: var(--font-sans);
                    font-size: 16px; font-weight: 400; line-height: 16px; color: var(--color-text-on-dark-primary); }
.work-case .su-topnav{ width: 100%; padding: 36px 36px 0; }
.work-case .su-topnav-shell{ width: auto; max-width: 1368px; }
.work-case .su-footer-body{ padding: 64px clamp(16px, 8.333vw, 120px); }
@media (max-width: 767px){.work-case .su-topnav{ padding: 16px 16px 0; }
.work-case .su-topnav-shell{ padding: 16px; }
.work-case .su-crumb{ gap: 12px; padding-right: 0; }
.work-case .su-footer-row{ flex-direction: column; align-items: flex-start; }
.work-case .su-footer-meta{ text-align: left; }}
.work-case{
  
  --c-ink:            #1d1d1f;   
  --c-grey:           #86868b;   
  --c-grey-mid:       #b2b2b3;   
  --c-grey-500:       #6d7280;   
  --c-offwhite:       #fbfbfb;   
  --c-white:          #ffffff;   
  --c-black:          #000000;   
  --c-panel:          #f7f7f7;   
  --c-page:           #ffffff;   
  
  --text-1:           var(--color-text-on-light-primary);
  --text-2:           var(--color-text-on-light-secondary);
  --text-3:           var(--color-text-on-light-tertiary);
  --on-dark-1:        var(--color-text-on-dark-primary);
  --on-dark-2:        var(--color-text-on-dark-secondary);

  
  
  --c-route:          #E93323;
  
  --c-route-veil:     rgba(233, 51, 35, 0.2);
  
  --c-route-dark-0:   rgba(131, 29, 20, 0);

  
  --c-slate:          rgb(73, 91, 105);
  --c-near-black:     rgb(22, 22, 22);
  --c-intro-ink:      rgb(21, 23, 25);
  --c-intro-ink-0:    rgba(21, 23, 25, 0);
  --c-white-0:        rgba(255, 255, 255, 0);

  
  --c-white-78:       rgba(255, 255, 255, 0.78); 
  --c-white-70:       rgba(255, 255, 255, 0.7);  
  --c-white-50:       rgba(255, 255, 255, 0.5);  
  --c-white-40:       rgba(255, 255, 255, 0.4);  
  --c-cue-border:     rgba(217, 217, 217, 0.3);  

  
  --grad-header: linear-gradient(194.5956235743954deg,
                   var(--c-slate) -110.56%, var(--c-near-black) 85.69%);
  --grad-footer: linear-gradient(184.3789543871349deg,
                   var(--c-slate) -110.56%, var(--c-near-black) 85.69%);
  
  --grad-stats:  linear-gradient(180.6776790520418deg,
                   var(--c-white-0) 5.936%, var(--c-white) 33.838%);
  
  --grad-soften: linear-gradient(to bottom,
                   var(--c-white-0) -20.886%, var(--c-white) 65.519%);
  
  --grad-route-leg2: linear-gradient(to bottom,
                   var(--c-route-dark-0) 17.7706%, var(--c-route) 37.2928%);
  --grad-intro:  linear-gradient(180.75320992561694deg,
                   var(--c-intro-ink-0) 0.86909%,
                   var(--c-intro-ink) 37.448%,
                   var(--c-intro-ink) 98.633%);

  
  --blur-nav:       blur(100px);   
  --blur-services:  blur(25px);    
  
  --shadow-chip:    none;

  
  --font-display: "SF Pro Display", "SF Pro", -apple-system,
                  BlinkMacSystemFont, "Helvetica Neue", "Segoe UI",
                  Arial, sans-serif;
  --font-sfpro:   "SF Pro", "SF Pro Display", -apple-system,
                  BlinkMacSystemFont, "Helvetica Neue", "Segoe UI",
                  Arial, sans-serif;
  --font-text:    "SF Pro Text", "SF Pro Display", "SF Pro", -apple-system,
                  BlinkMacSystemFont, "Helvetica Neue", "Segoe UI",
                  Arial, sans-serif;

     
   

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    900;   

  
  --fs-display:     96px;   
  --fs-hook:        80px;   
  --fs-h1:          80px;   
  --fs-pivot:       64px;   
  --fs-stat:        60px;   
  --fs-h3:          32px;   
  --fs-h3-accent:   34px;   
  --fs-h2:          24px;   
  --fs-body:        24px;   
  --fs-num:         22px;   
  --fs-stat-label:  16px;   
  --fs-chip:        16px;   
  --fs-annotation:  14px;   
  --fs-pin:         10px;   

  
  --lh-display:      1.1;
  --lh-hook:         1.1;
  --lh-h1:           1.1;
  --lh-pivot:        1.2;
  --lh-h2:           1.3;
  --lh-body:         1.4;
  --lh-h3:           1.36;
  --lh-chip:         1.4;
  --lh-annotation:   1.24;
  --lh-normal:       normal;
  --lh-pin:      15.363px;  

  
  --ls-display:     0.1056px;
  --ls-hook:        0;
  --ls-h1:          0;
  --ls-pivot:      -0.64px;
  --ls-h3:         -0.64px;
  --ls-h2:          0.0308px;
  --ls-body:        0;
  --ls-num:         0.44px;
  --ls-chip:        0.32px;
  --ls-chip-title:  0.48px;
  --ls-stat:        0;
  --ls-stat-label:  0;
  --ls-pin:         0.2px;

  
  --gutter:        200px;   
  --gutter-nav:     64px;   
  --gutter-device:  80px;   
  --content-max:  1040px;   
  --device-max:   1280px;   

  

  
  --intro-cue-clear:         104px;
  --intro-cue-y:      clamp(560px, calc(100vh - var(--intro-cue-clear)), 828px);
  --intro-hero-h:      calc(var(--intro-cue-y) + 106px);
  --intro-hero-pt:            44px;
  --intro-hero-gap:           64px;
  --intro-copy-gap:           40px;
  --intro-sub1-w:            491px;
  --intro-sub2-w:            500px;
  --intro-gradient-h:        677px;   
  --intro-texture-h:        1002px;
  --intro-texture-y:          -5px;
  --intro-services-y:  calc(var(--intro-hero-h) + 8px);
  --intro-services-h:        223px;
  --sec-intro-slide-h: calc(var(--intro-services-y)
                            + var(--intro-services-h) + 139px);
  --sec-intro-carousel-h:    831px;   
  --intro-cue-size:           52px;
  --intro-cue-border:      3.25px;
  --intro-cue-radius:     29.25px;
  --intro-cue-icon:     15.1667px;
  --intro-carousel-nav-y:    148px;
  --intro-carousel-track-y:  314px;
  --intro-carousel-track-h:  369px;

  
  --sec-header-h:            957px;   
  --sec-header-mt:             0px;
  --header-bg-x:             -18px;   
  --header-bg-y:             -13px;   
  --header-bg-w:            1476px;   
  --header-bg-h:             911px;
  --header-nav-h:            128px;
  --header-col-y:            252px;   
  --header-copy-gap:          40px;
  --header-col-gap:          120px;   
  --header-logo-w:       223.37px;   
  --header-logo-h:        50px;
  --header-sub-w:            680px;
  --header-rule-y:           441px;   
  --header-rule-w:            40px;
  --header-chips-y:      488.636px;   

  
  --sec-desert-h:            732px;
  --sec-desert-mt:             0px;
  
  --desert-photo-y:    -4.026702vw;   
  --desert-photo-ar:  1440 / 847.96875;

  
  --sec-hook-h:              408px;
  --sec-hook-mt:               2px;   
  
  --hook-col-y:                4px;
  --hook-col-pt:             100px;   
  --hook-line-h:              88px;   
  --hook-sub-gap:             32px;   
  --hook-sub-w:              752px;   

  
  --jw:                      100vw;
  --sec-journey-h:           865px;
  --sec-journey-mt:           27px;   
  
  --journey-plate-h:    calc(0.600694444 * var(--jw));  
  --journey-content-w:  calc(3.508333333 * var(--jw));  
  --journey-content-h:  calc(0.711111111 * var(--jw));  
  --journey-content-y:  calc(-0.039583333 * var(--jw)); 
  --journey-art-x:      calc(-0.058334689 * var(--jw)); 
  --journey-art-y:      calc(-0.009936523 * var(--jw)); 
  --journey-art-w:      calc(3.709722282 * var(--jw));  
  --journey-art-h:      calc(1.009028202 * var(--jw));  
  
  --journey-soften-x:   calc(1.446527778 * var(--jw));  
  --journey-soften-y:   calc(0.488194444 * var(--jw));  
  --journey-soften-w:   calc(2.061805217 * var(--jw));  
  --journey-soften-h:   calc(0.222916730 * var(--jw));  
  --journey-veil-x:     calc(-0.132638889 * var(--jw)); 
  --journey-veil-y:     calc(-0.134273274 * var(--jw)); 
  --journey-veil-w:     calc(1.265277778 * var(--jw));  
  --journey-veil-h:     calc(0.903267670 * var(--jw));  
  --journey-veil-blur:  128.318px;      
  
  --journey-replay-x:   calc(0.926388889 * var(--jw));  
  --journey-replay-y:   calc(0.495138889 * var(--jw));  
  --journey-replay:     calc(0.029166667 * var(--jw));  
  
  --journey-a1-x:         5.616285%;  
  --journey-a2-x:        32.572521%;  
  --journey-a3-x:        59.528266%;  
  --journey-a4-x:        74.953426%;  
  --journey-a-y:         15.093247%;  
  --journey-a4-y:        21.774945%;  
  --journey-a1-w:         2.976413%;  
  --journey-a1-w-cap:     3.406964%;  
  --journey-a2-w:         3.725196%;  
  --journey-a3-w:         4.324222%;  
  --journey-a4-w:         5.933735%;  
  --journey-pin-x:       76.637892%;  
  --journey-pin-y:       35.634651%;  
  --journey-pin-w:        2.583302%;  
  --journey-pin-h:        2.133517%;  
  --journey-pin-label-x: 76.832875%;  
  --journey-pin-label-y: 35.979103%;  
  --journey-pin-label-w:  2.130694%;  
  
  --journey-knockout:          3px;
  
  --journey-map1-op:          0.5;
  --journey-map2-op:          0.5;
  --journey-map3-op:         0.69;
  --journey-snippet-op:       0.5;
  --journey-route-stroke:      4px;   

  
  --sec-stats-h:             470px;
  --sec-stats-mt:           -235px;   
  --stats-card-y:            112px;   
  --stats-card-h:            358px;
  --stats-row-y:             264px;
  --stats-cols:                4;
  --stats-gap:                80px;
  --stat-icon:                32px;   
  
  --stat-w-1:                200px;   
  --stat-w:                  200px;
  --stat-figure-mt:           20px;   
  --stat-label-mt:             0px;   
  --stat-label-pl:             4px;   

  
  --sec-pivot-h:             499px;
  --sec-pivot-mt:            -32px;   
  --pivot-heading-y:         114px;   
  --pivot-heading-w:         625px;
  
  --pivot-device-x:      62.986111%;  
  --pivot-device-y:           91px;   
  --pivot-device-w:      36.944444%;  
  --pivot-device-h:          408px;
  --pivot-art-x:          0.187970%;  
  --pivot-art-y:               2px;
  --pivot-art-w:        253.281833%;  
  --pivot-art-ar:   1347.4593505859375 / 788;
  
  --pivot-screen-x:       2.523277%;  
  --pivot-screen-y:       4.314721%;  
  --pivot-screen-w:      72.494913%;  
  --pivot-screen-h:      79.313450%;  
  --pivot-screen-radius:      20px;

  
  --sec-walkthrough-h:      1197px;
  --sec-walkthrough-mt:        0px;   
  --walkthrough-card-h:     1198px;
  --walkthrough-heading-y: 120.0078125px;
  --walkthrough-para-y:  184.935546875px;
  --walkthrough-heading-w:   520px;
  --walkthrough-para-w:      640px;
  
  --walkthrough-copy-h: 256.935546875px;  
  --walkthrough-device-y:    329px;
  --walkthrough-device-ar: 1280 / 749.8468017578125;
  --walkthrough-device-h: 749.8468017578125px;
  
  --walkthrough-device-mb: 118.1531982421875px;
  
  --walkthrough-screen-x:  2.656250%;
  --walkthrough-screen-y:  4.534253%;
  --walkthrough-screen-w: 94.748440%;
  --walkthrough-screen-h: 90.977790%;
  
  --walkthrough-bezel-x:   0.125732%;  
  --walkthrough-bezel-y:   0.285475%;  
  --walkthrough-bezel-w:  99.958016%;  
  --walkthrough-bezel-h:  99.808648%;  
  
  --wt-replay-x:          91.562500%;  
  --wt-replay-y:          85.644909%;  
  --wt-replay-w:           3.281250%;  
  --wt-replay-h:           5.601127%;  
  
  --wt-caption-h:               0px;
  --wt-caption-mt:              0px;
  --wt-caption-fs:             17px;

  
  --sec-services-h:          223px;
  --sec-services-mt:         120px;   
  --services-heading-y:       -8px;   
  --services-bar-y:           44px;
  --services-bar-h:          198px;   
  --services-chip-y:          32px;
  --services-chip-h:         166px;
  --services-chip-gap:        24px;   
  --services-chip-pad:        24px;
  --services-chip-inner-gap:  20px;
  --services-icon-h:          39px;
  --services-chip-radius:     16px;

  
  --sec-build-h:              90px;
  --sec-build-mt:            120px;   
  --credit-w:                491px;
  --credit-gap:               20px;   

  
  --sec-platform-h:           90px;
  --sec-platform-mt:          96px;   

  
  --sec-footer-h:            263px;
  --sec-footer-mt:           120px;   
  --footer-bg-x:              -5px;   
  --footer-bg-w:            1449px;
  --footer-col-y:             84px;
  --footer-row-y:             16px;   
  --footer-pager-w:          406px;
  --footer-chev:              32px;
  --footer-pager-side-gap:    48px;
  --footer-pager-gap:         24px;
  --footer-pager-num-w:       30px;
  --footer-pager-num-h:       20px;
  
  --footer-chev-icon-w:     9.88px;
  --footer-chev-icon-h:       16px;

  
  
  --nav-pt:                   64px;
  --nav-pb:                   36px;
  --su-logo-w:           138.247px;
  --su-logo-h:                26px;

  
  --chip-w:                  294px;
  --chapter-gap:             72px;
  --chip-h:                   50px;
  --chips-cols:                3;
  --chips-gap-x:              24px;
  --chips-gap-y:              24px;
  --chip-pad-y:               12px;
  --chip-pad-r:               12px;
  --chip-gap:                 12px;
  --chip-gap-current:         24px;
  --chip-num-gap:             10px;
  --chip-arrow:               24px;
  --chip-arrow-icon:          16px;

  
  --carousel-nav-h:           60px;
  --carousel-tab-pad:          2px;
  --carousel-tab-h:           36px;
  --carousel-line-y:          56px;
  --carousel-line-h:           2px;
  --carousel-line-h-current:   3px;
  --carousel-panel-ar:  1440 / 369;   

  
  --op-muted:                  0.3;  
  --op-chev:                   0.7;  
  --op-tab-rule:               0.5;  
}
@media (max-width: 1439px){.work-case{
    --gutter: 80px;
    --gutter-nav: 40px;
    --gutter-device: 40px;
    --fs-display: 76px;
    --fs-hook: 78px;
    --fs-h1: 64px;
    --fs-pivot: 52px;
    --sec-header-h: auto;
    --sec-hook-h: auto;
    
    --sec-journey-h: 60.069444vw;
    --sec-journey-mt: 24px;
    --sec-stats-mt: -200px;
    --sec-pivot-mt: 24px;
  }}
@media (min-width: 1024px) and (max-width: 1199px){.work-case{
    --stat-w-1: minmax(0, 1fr);
    --stat-w: minmax(0, 1fr);
    --stats-gap: 32px;
    --fs-stat: 52px;
  }}
@media (max-width: 1023px){.work-case{
    --gutter: 48px;
    --gutter-nav: 32px;
    --gutter-device: 24px;
    --fs-display: 56px;
    --fs-hook: 60px;
    --fs-h1: 48px;
    --fs-pivot: 40px;
    --fs-stat: 46px;
    --fs-h2: 24px;
    --fs-body: 20px;
    --fs-num: 18px;
    --fs-stat-label: 17px;
    --fs-chip: 16px;
    --sec-intro-slide-h: auto;
    --sec-intro-carousel-h: auto;
    --sec-desert-h: 480px;
    
    --jw: 1440px;
    
    --journey-rest-fx: 320px;
    --journey-rest-fy: 360px;
    
    --sec-journey-h: min(84vh, 660px);
    --journey-replay: 44px;
    --sec-hook-h: auto;
    --sec-stats-h: auto;
    --sec-pivot-h: auto;
    --sec-walkthrough-h: auto;
    --sec-services-h: auto;
    --sec-build-h: auto;
    --sec-platform-h: auto;
    --sec-footer-h: auto;
    --sec-stats-mt: -140px;
    --sec-services-mt: 88px;
    --sec-build-mt: 88px;
    --sec-platform-mt: 64px;
    --sec-footer-mt: 88px;
    --intro-hero-h: auto;
    --intro-hero-pt: 32px;
    --intro-hero-gap: 48px;
    --intro-copy-gap: 32px;
    --intro-gradient-h: 60%;
    --nav-pt: 40px;
    --nav-pb: 24px;
    --carousel-nav-h: 52px;
    --carousel-tab-h: 32px;
    --carousel-line-y: 46px;
    --header-col-y: 232px;
    --header-col-gap: 72px;
    --hook-col-pt: 72px;
    --stats-row-y: 120px;
    --stats-cols: 2;
    --stats-gap: 40px;
    --chips-cols: 2;
    --chip-w: 1fr;
    --pivot-heading-y: 96px;
    --walkthrough-device-y: 72px;
    
    --walkthrough-device-mb: 0px;
    
    --walkthrough-card-h: 0px;
    
    --wt-caption-h: 104px;
    
    --wt-caption-mt: 64px;
    --services-chip-gap: 48px;
  }}
@media (max-width: 767px){.work-case{
    --gutter: 24px;
    --gutter-nav: 20px;
    --gutter-device: 16px;
    
    --fs-display: 40px;
    --fs-hook: 38px;
    --fs-h1: 36px;
    --fs-pivot: 30px;
    --fs-stat: 34px;
    --fs-h2: 20px;
    --fs-body: 17px;
    --fs-num: 15px;
    --fs-stat-label: 15px;
    --fs-chip: 14px;
    
    --lh-h1: 1.08;
    --lh-hook: 1.06;
    --lh-pivot: 1.12;
    --ls-pivot: -0.3px;
    --sec-desert-h: 320px;
    --sec-journey-mt: 16px;
    --sec-stats-mt: -80px;
    --sec-pivot-mt: 16px;
    --sec-services-mt: 56px;
    --sec-build-mt: 56px;
    --sec-platform-mt: 40px;
    --sec-footer-mt: 56px;
    --intro-hero-pt: 24px;
    --intro-hero-gap: 36px;
    --intro-copy-gap: 24px;
    --nav-pt: 32px;
    --nav-pb: 20px;
    --header-nav-h: 88px;
    --carousel-nav-h: 96px;
    --carousel-tab-h: 64px;
    --carousel-line-y: 84px;
    --header-col-y: 160px;
    --header-col-gap: 56px;
    --hook-col-pt: 56px;
    --chips-cols: 1;
    --stats-cols: 2;
    --stats-gap: 24px;
    --stats-row-y: 80px;
    --pivot-heading-y: 64px;
    --footer-col-y: 48px;
    --footer-pager-side-gap: 12px;
    --footer-pager-gap: 8px;
    --services-chip-gap: 24px;
  }}
.work-case *,
.work-case *::before,
.work-case *::after{ box-sizing: border-box; }
body.page-case{ -webkit-text-size-adjust: 100%; }
.work-case{
  margin: 0;
  background: var(--c-page);
  color: var(--c-ink);
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
.work-case img,
.work-case svg{ display: block; max-width: 100%; }
.work-case a{ color: inherit; text-decoration: none; }
.work-case ul,
.work-case ol{ margin: 0; padding: 0; list-style: none; }
.work-case h1,
.work-case h2,
.work-case h3,
.work-case p{ margin: 0; }
.work-case .u-regular{ font-weight: var(--fw-regular); }
.work-case .accent{ font-family: var(--font-serif); font-style: italic; font-weight: var(--fw-bold);
          font-optical-sizing: auto; line-height: 1; }
.work-case .u-lead{ font-weight: var(--fw-semibold); }
.work-case .u-grey{ font-weight: var(--fw-regular); color: var(--c-grey-mid); }
.work-case .u-grey-b{ font-weight: var(--fw-regular); color: var(--c-grey); }
.work-case .u-visually-hidden{
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.work-case .section{
  position: relative;
  width: 100%;
  margin-top: 0;
}
.work-case .section--clip{ overflow: hidden; }
.work-case .container{
  position: relative;
  width: min(var(--content-max), 100% - (var(--gutter) * 2));
  margin-inline: auto;
}
.work-case .topnav{
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 3;
  display: flex;
  align-items: flex-start;
  height: var(--header-nav-h);
  padding: var(--nav-pt) var(--gutter-nav) var(--nav-pb);
  -webkit-backdrop-filter: var(--blur-nav);
  backdrop-filter: var(--blur-nav);
}
.work-case .topnav-logo{ width: var(--su-logo-w); height: var(--su-logo-h); }
.work-case .section-bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.work-case .scene{
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;      
}
.work-case .scene-artwork{
  position: absolute;
  overflow: visible;
}
.work-case .device{
  position: relative;
  width: min(var(--device-max), 100% - (var(--gutter-device) * 2));
  margin-inline: auto;
  aspect-ratio: var(--walkthrough-device-ar);
}
.work-case .device-frame{ position: absolute; inset: 0; width: 100%; height: 100%; }
.work-case .device-screen{
  position: absolute;
  left: var(--walkthrough-screen-x);
  top: var(--walkthrough-screen-y);
  width: var(--walkthrough-screen-w);
  height: var(--walkthrough-screen-h);
  overflow: hidden;
}
.work-case #journey{ z-index: 0; }
.work-case #stats{ z-index: 1; }
.work-case #pivot{ z-index: 0; }
.work-case #stats{ pointer-events: none; }
.work-case #stats .stats-row{ pointer-events: auto; }
.work-case #intro{ color: var(--c-offwhite); }
.work-case .intro-slide{
  position: relative;
  isolation: isolate;
  min-height: var(--sec-intro-slide-h);
  background-color: var(--c-page);
  overflow: hidden;
}
.work-case .intro-texture{
  position: absolute;
  left: 0; right: 0; top: var(--intro-texture-y);
  width: 100%;
  height: var(--intro-texture-h);
  min-height: 100%;
  object-fit: cover;
  object-position: 100% 0;
  mix-blend-mode: luminosity;
  z-index: 0;
}
.work-case .intro-gradient{
  position: absolute; left: 0; right: 0; bottom: 0;
  height: var(--intro-gradient-h);
  background: var(--grad-intro);
  z-index: 1;
  pointer-events: none;
}
.work-case .intro-hero{
  position: relative; z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: var(--intro-hero-h);
  padding-top: var(--intro-hero-pt);
}
.work-case .intro-hero > .container{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--intro-hero-gap);
}
.work-case .intro-copy{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--intro-copy-gap);
  width: 100%;
}
.work-case .intro-heading{
  font-size: var(--fs-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--c-offwhite);
}
.work-case .intro-sub1{
  width: var(--intro-sub1-w); max-width: 100%;
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-h2);
  color: var(--c-offwhite);
}
.work-case .intro-sub2{
  width: var(--intro-sub2-w); max-width: 100%;
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--c-offwhite);
}
.work-case .intro-rule{ width: var(--header-rule-w); }
.work-case .intro-cue{
  position: absolute; z-index: 3;
  top: var(--intro-cue-y); left: 0; right: 0;
  display: flex; justify-content: center;
}
.work-case .intro-cue-btn{
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--intro-cue-size);
  height: var(--intro-cue-size);
  padding: 0;
  border: var(--intro-cue-border) solid var(--c-cue-border);
  border-radius: var(--intro-cue-radius);
  background: none;
  color: inherit;
  cursor: pointer;
}
.work-case .intro-cue-btn img{
  width: var(--intro-cue-icon);
  height: var(--intro-cue-icon);
}
.work-case .intro-services{
  position: absolute; z-index: 2;
  top: var(--intro-services-y); left: 0; right: 0;
  min-height: var(--intro-services-h);
}
.work-case .intro-carousel{
  position: relative;
  min-height: var(--sec-intro-carousel-h);
  background: var(--c-page);
  color: var(--c-ink);
  overflow: hidden;
}
.work-case .intro-carousel-nav{
  position: absolute; top: var(--intro-carousel-nav-y); left: 0; right: 0;
}
.work-case .intro-carousel-track{
  position: absolute; top: var(--intro-carousel-track-y); left: 0; right: 0;
  height: var(--intro-carousel-track-h);
  overflow: hidden;
}
.work-case .carousel-tabs{
  display: flex;
  align-items: flex-start;
  height: var(--carousel-nav-h);
}
.work-case .carousel-tab{
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: var(--carousel-nav-h);
  margin: 0;
  padding: var(--carousel-tab-pad) 0 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: center;
  cursor: pointer;
  -webkit-appearance: none;
          appearance: none;
}
.work-case .carousel-tab-label{
  display: block;
  height: var(--carousel-tab-h);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-chip-title);
  color: var(--c-grey);
}
.work-case .carousel-tab-rule{
  position: absolute;
  left: 0; right: 0;
  top: calc(var(--carousel-tab-pad) + var(--carousel-line-y));
  height: var(--carousel-line-h);
  background: var(--c-grey);
  opacity: var(--op-tab-rule);
}
.work-case .carousel-tab[aria-selected="true"] .carousel-tab-label{ color: var(--c-ink); }
.work-case .carousel-tab[aria-selected="true"] .carousel-tab-rule{
  height: var(--carousel-line-h-current);
  background: var(--c-black);
  opacity: 1;
}
.work-case .carousel-panels{
  position: relative;
  width: 100%;
  height: 100%;
}
.work-case .carousel-panel{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
}
.work-case .carousel-panel.is-current{ display: block; }
.work-case .carousel-panels.is-live .carousel-panel{ display: block; }
.work-case .carousel-panel img{ position: absolute; height: auto; }
.work-case .services-heading{
  position: absolute; left: 0; right: 0; top: var(--services-heading-y);
}
.work-case .services-heading-text{
  font-family: var(--font-sfpro);
  font-variation-settings: "wdth" 100;
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  color: var(--text-1);   
}
.work-case .services-bar{
  position: absolute; left: 0; right: 0; top: var(--services-bar-y);
  min-height: var(--services-bar-h);
  background: var(--c-white-40);
  -webkit-backdrop-filter: var(--blur-services);
  backdrop-filter: var(--blur-services);
}
.work-case .services-row{
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--services-chip-gap);
  padding-top: var(--services-chip-y);
  min-height: var(--services-chip-h);
}
.work-case .svc-chip{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--services-chip-inner-gap);
  padding: var(--services-chip-pad);
  filter: var(--shadow-chip);
}
.work-case .services-row > .svc-chip:first-child{ padding-left: 0; }
.work-case .services-row > .svc-chip:last-child{ padding-right: 0; }
.work-case #services .svc-chip{ border-radius: var(--services-chip-radius); }
.work-case .svc-chip--current{
  background: var(--c-white-78);
  border-radius: 0;
}
.work-case .svc-chip--muted{ opacity: var(--op-muted); }
.work-case .svc-icon{ width: auto; height: var(--services-icon-h); }
.work-case .svc-title{
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: var(--lh-chip);
  letter-spacing: var(--ls-chip-title);
  color: var(--text-1);   
  white-space: nowrap;
}
.work-case .svc-sub{
  font-size: var(--fs-chip);   
  font-weight: var(--fw-medium);
  line-height: var(--lh-chip);
  letter-spacing: var(--ls-chip);
  color: var(--text-3);
  white-space: nowrap;
}
.work-case .intro-services .svc-title{ color: var(--c-white); }
.work-case .intro-services .svc-sub{ color: var(--c-grey-mid); }
.work-case .intro-services .services-heading-text{ color: var(--c-white-70); }
.work-case .intro-services .services-bar{ background: none; }
.work-case #header-hero{
  margin-top: var(--sec-header-mt);
  min-height: var(--sec-header-h);
  color: var(--c-offwhite);
  
  background-color: var(--c-near-black);
}
.work-case #header-hero .section-bg{
  left: var(--header-bg-x);
  top: var(--header-bg-y);
  right: auto; bottom: auto;
  width: var(--header-bg-w);
  
  min-width: calc(100% + (var(--header-bg-x) * -2));
  height: var(--header-bg-h);
  min-height: calc(100% + (var(--header-bg-y) * -2));
  background: var(--grad-header);
}
.work-case .header-col{
  position: relative; z-index: 1;
  padding-top: var(--header-col-y);
  min-height: var(--sec-header-h);
}
.work-case .header-copy{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--header-copy-gap);
}
.work-case .header-logo{ width: var(--header-logo-w); height: var(--header-logo-h); }
.work-case .header-h1{
  font-size: var(--fs-h1);
  font-weight: var(--fw-regular);   
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
  color: var(--on-dark-1);
}
.work-case .header-sub{
  width: var(--header-sub-w); max-width: 100%;
  font-size: var(--fs-body);
  font-weight: var(--fw-light);   
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--on-dark-2);
}
.work-case .header-sub .u-lead{ color: var(--on-dark-1); }
.work-case #desert-photo{
  margin-top: var(--sec-desert-mt);
  height: var(--sec-desert-h);
}
.work-case .desert-photo{
  position: absolute;
  left: 0; right: 0; top: var(--desert-photo-y);
  width: 100%;
  
  height: auto;
  aspect-ratio: var(--desert-photo-ar);
  object-fit: cover;
}
.work-case #hook{
  margin-top: var(--sec-hook-mt);
  height: var(--sec-hook-h);
}
.work-case .hook-col{ padding-top: calc(var(--hook-col-y) + var(--hook-col-pt)); }
.work-case .hook-heading{
  position: relative;
  height: var(--hook-line-h);   
  font-size: var(--fs-hook);
  font-weight: var(--fw-regular);   
  line-height: var(--lh-hook);
  letter-spacing: var(--ls-hook);
  color: var(--text-1);
  white-space: nowrap;
}
.work-case .hook-heading > span{
  position: absolute;
  left: 0;
  display: block;
}
.work-case .hook-heading > span:nth-child(1){ top: 0; }
.work-case .hook-heading > span:nth-child(2){ top: var(--hook-line-h); }
.work-case .hook-sub{
  width: var(--hook-sub-w); max-width: 100%;
  margin-top: var(--hook-sub-gap);
  font-size: var(--fs-body);
  font-weight: var(--fw-light);   
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--text-2);
}
.work-case .hook-sub .u-lead,
.work-case .walkthrough-para .u-lead{ color: var(--text-1); }
.work-case #journey{
  margin-top: var(--sec-journey-mt);
  background: var(--c-page);
}
.work-case .journey-stage{
  position: relative;
  width: 100%;
  height: var(--sec-journey-h);
  
  height: min(var(--sec-journey-h), calc(100vh - var(--su-inset, 108px)));
  overflow: hidden;
}
.work-case .journey-view{
  position: absolute;
  left: 0;
  top: calc(50% - (var(--journey-plate-h) / 2));
  width: var(--jw);
  height: var(--journey-plate-h);
  pointer-events: none;
}
.work-case .journey-plate{
  position: absolute;
  inset: 0;
  background: var(--c-page);
}
.work-case .journey-terrain{
  position: absolute;
  left: var(--journey-art-x);
  top: var(--journey-art-y);
  width: var(--journey-art-w);
  height: var(--journey-art-h);
  transform-origin: 0 0;
}
.work-case .j-tile{ position: absolute; overflow: hidden; }
.work-case .j-tile--flipx{ transform: scaleX(-1); }
.work-case .j-tile-img{ display: block; max-width: none; }
.work-case .j-tile-img--fill{ width: 100%; height: 100%; object-fit: fill; }
.work-case .j-tile-img--map3{
  position: absolute;
  left: -8.8%; top: -25.82%; width: 108.38%; height: 302.14%;
}
.work-case .j-tile-img--snippet{
  position: absolute;
  left: -1.04%; top: -167.38%; width: 451.2%; height: 777.17%;
}
.work-case .journey-soften{
  position: absolute;
  left: 40.565367%; top: 49.367398%;
  width: 55.578425%; height: 22.092220%;
  background: var(--grad-soften);
  transform-origin: 0 0;
  pointer-events: none;
}
.work-case .journey-route{
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  overflow: visible;
  pointer-events: none;
}
.work-case .j-ink--grey{ opacity: 0; }
.work-case [data-leg-grey="2a"],
.work-case [data-leg-red="2a"]{
  stroke-dasharray: 281.485px 906.296px;
  stroke-dashoffset: -171.663px;
}
.work-case [data-leg-grey="1"],
.work-case [data-leg-red="1"]{
  stroke-dasharray: 1565.678px 3169.755px;
  stroke-dashoffset: 0;
}
.work-case .j-ink--grey{ stroke: #000000; stroke-opacity: 1; }
.work-case .j-ink--red{ stroke: #E93323; stroke-opacity: 1; }
.work-case .journey-content{
  position: absolute;
  left: 0;
  top: var(--journey-content-y);
  width: var(--journey-content-w);
  height: var(--journey-content-h);
  transform-origin: 0 0;
  pointer-events: none;
}
.work-case .journey-artwork{
  position: absolute;
  left: var(--journey-art-x);
  top: var(--journey-art-y);
  width: var(--journey-art-w);
  height: var(--journey-art-h);
}
.work-case .journey-lead{
  position: absolute;
  height: 0.410994%;                    
  transform: rotate(-90deg);
  transform-origin: 0 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.work-case .journey-lead--1{ left: 5.260576%;  top: 46.201536%; width: 8.311494%; }
.work-case .journey-lead--2{ left: 32.216735%; top: 42.347442%; width: 7.263197%; }
.work-case .journey-lead--3{ left: 59.172895%; top: 42.622735%; width: 7.338076%; }
.work-case .journey-lead--4{ left: 77.873755%; top: 34.988613%; width: 2.658180%; }
.work-case .journey-lead--1{ opacity: 1; visibility: visible; }
.work-case .journey-annot{
  position: absolute;
  font-size: var(--fs-annotation);
  line-height: var(--lh-annotation);
  font-weight: var(--fw-bold);
  color: var(--c-ink);
  
  opacity: 0;
  visibility: hidden;
}
.work-case .journey-annot .a-grey{ font-weight: var(--fw-regular); color: var(--c-grey); }
.work-case .journey-annot p{ margin: 0; }
.work-case .journey-annot--1{ left: var(--journey-a1-x); top: var(--journey-a-y);  width: var(--journey-a1-w); }
.work-case .journey-annot--2{ left: var(--journey-a2-x); top: var(--journey-a-y);  width: var(--journey-a2-w); }
.work-case .journey-annot--3{ left: var(--journey-a3-x); top: var(--journey-a-y);  width: var(--journey-a3-w); }
.work-case .journey-annot--4{ left: var(--journey-a4-x); top: var(--journey-a4-y); width: var(--journey-a4-w); text-align: center; }
.work-case .journey-annot--1{ opacity: 1; visibility: visible; }
.work-case .journey-annot--1[data-caption-on]{ width: var(--journey-a1-w-cap); }
.work-case .journey-pin{
  position: absolute;
  left: var(--journey-pin-x);
  top: var(--journey-pin-y);
  width: var(--journey-pin-w);
  height: var(--journey-pin-h);
  opacity: 0;
  visibility: hidden;
}
.work-case .journey-pin-pill{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.work-case .journey-pin-label{
  
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: calc(100% * 25 / 31);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-pin);
  font-weight: var(--fw-black);
  line-height: var(--lh-pin);
  letter-spacing: var(--ls-pin);
  color: var(--c-white);
  text-align: center;
  white-space: nowrap;
}
.work-case .journey-replay{
  position: absolute;
  left: var(--journey-replay-x);
  top: calc(50% - (var(--journey-plate-h) / 2) + var(--journey-replay-y));
  width: var(--journey-replay);
  height: var(--journey-replay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: calc(var(--journey-replay) * 0.5714286);  
  background: none;
  color: inherit;
  cursor: pointer;
  pointer-events: auto;
}
.work-case .journey-replay img{ width: 100%; height: 100%; }
.work-case .journey-replay:hover:not(:disabled) img{ opacity: 0.62; }
.work-case .journey-replay:focus-visible{
  outline: 2px solid var(--c-ink);
  outline-offset: 3px;
}
.work-case .journey-replay:disabled{ cursor: default; }
.work-case #stats{
  margin-top: var(--sec-stats-mt);
  min-height: var(--sec-stats-h);
}
.work-case #stats .section-bg{
  top: var(--stats-card-y);
  bottom: auto;
  height: var(--stats-card-h);
  background: var(--grad-stats);
}
.work-case .stats-row{
  position: relative; z-index: 1;
  padding-top: var(--stats-row-y);
  
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));   
  column-gap: var(--stats-gap);
  row-gap: var(--stats-gap);
  align-items: start;
}
.work-case .stat{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.work-case .stat-icon-band{
  display: flex;
  align-items: center;
  height: var(--stat-icon);
}
.work-case .stat-icon{ flex: none; height: auto; }
.work-case .stat-icon--coal{ width: 32px; }
.work-case .stat-icon--train{ width: 26px; margin-left: 3px; }
.work-case .stat-icon--rock{ width: 26px; margin-left: 6px; }
.work-case .stat-figure{
  margin-top: var(--stat-figure-mt);
  font-family: var(--font-mono);   
  font-size: var(--fs-stat);
  font-weight: var(--fw-medium);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-stat);
  color: var(--text-1);
  white-space: nowrap;
}
.work-case .stat-figure .stat-count{ font: inherit; letter-spacing: inherit; }
.work-case .stat-label{
  margin-top: var(--stat-label-mt);
  padding-left: var(--stat-label-pl);   
  font-size: var(--fs-stat-label);   
  font-weight: var(--fw-regular);
  line-height: var(--lh-chip);
  letter-spacing: var(--ls-stat-label);
  color: var(--text-2);
  white-space: nowrap;
}
.work-case #pivot{
  margin-top: var(--sec-pivot-mt);
  min-height: var(--sec-pivot-h);
  overflow: hidden;
}
.work-case .pivot-col{ padding-top: var(--pivot-heading-y); }
.work-case .pivot-line{
  width: var(--pivot-heading-w);
  max-width: 100%;
  font-size: var(--fs-pivot);   
  font-weight: var(--fw-regular);
  line-height: var(--lh-pivot);
  letter-spacing: var(--ls-pivot);
  color: var(--text-2);
}
.work-case .pivot-line .accent{ color: var(--text-1); }
.work-case .pivot-line > span{ display: block; }
.work-case .pivot-stage{
  position: absolute;
  left: var(--pivot-device-x);
  top: var(--pivot-device-y);
  width: var(--pivot-device-w);
  height: var(--pivot-device-h);
  overflow: hidden;
}
.work-case .pivot-device-art{
  position: absolute;
  left: var(--pivot-art-x);
  top: var(--pivot-art-y);
  width: var(--pivot-art-w);
  aspect-ratio: var(--pivot-art-ar);
}
.work-case .pivot-device-frame{ position: absolute; inset: 0; width: 100%; height: 100%; }
.work-case .pivot-screen{
  position: absolute;
  left: var(--pivot-screen-x);
  top: var(--pivot-screen-y);
  width: var(--pivot-screen-w);
  height: var(--pivot-screen-h);
  border-radius: var(--pivot-screen-radius);
  overflow: hidden;
}
.work-case .pivot-screen img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--pivot-screen-radius);
}
.work-case #walkthrough{
  margin-top: var(--sec-walkthrough-mt);
  min-height: var(--sec-walkthrough-h);
  
  display: flow-root;
}
.work-case #walkthrough .section-bg{
  bottom: 0;
  height: auto;
  min-height: var(--walkthrough-card-h);
  background: var(--c-panel);
}
.work-case #walkthrough .walkthrough-copy{
  position: absolute; left: 0; right: 0; top: 0;
  z-index: 1;
}
@media (min-width: 1440px){.work-case #walkthrough .walkthrough-copy{
    --gutter: 204px;
    --content-max: 1032px;   
  }}
.work-case #walkthrough .walkthrough-copy .container{
  height: var(--walkthrough-copy-h);
}
.work-case .walkthrough-heading{
  position: absolute; left: 0;
  top: var(--walkthrough-heading-y);
  width: var(--walkthrough-heading-w); max-width: 100%;
  font-size: var(--fs-h3);   
  font-weight: var(--fw-light);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
  color: var(--text-1);
}
.work-case .walkthrough-heading .accent{ font-size: var(--fs-h3-accent); line-height: var(--lh-h3); }
.work-case .walkthrough-para{
  position: absolute; left: 0;
  top: var(--walkthrough-para-y);
  width: var(--walkthrough-para-w); max-width: 100%;
  font-size: var(--fs-body);   
  font-weight: var(--fw-light);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--text-2);
}
.work-case #walkthrough .walkthrough-stage{
  position: relative; z-index: 1;
  margin-top: var(--walkthrough-device-y);
  
  margin-bottom: var(--walkthrough-device-mb);
}
.work-case .wt-figure{ margin: 0; }
.work-case .wt-device-frame{
  left: var(--walkthrough-bezel-x);
  top: var(--walkthrough-bezel-y);
  width: var(--walkthrough-bezel-w);
  height: var(--walkthrough-bezel-h);
}
.work-case .wt-state{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  visibility: hidden;
}
.work-case .wt-state[data-walkthrough-state="00"]{ opacity: 1; visibility: visible; }
.work-case .wt-captions{
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
}
.work-case .wt-caption{ margin: 0; }
.work-case .wt-caption strong{ font-weight: var(--fw-bold); }
.work-case .wt-replay{
  position: absolute;
  left: var(--wt-replay-x);
  top: var(--wt-replay-y);
  width: var(--wt-replay-w);
  height: var(--wt-replay-h);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 57.142857%;   
  background: none;
  color: inherit;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
}
.work-case .wt-replay img{ width: 100%; height: 100%; }
.work-case .wt-replay-glyph--dark{ display: none; }
.work-case .wt-replay:hover:not(:disabled) img{ opacity: 0.62; }
.work-case .wt-replay:focus-visible{
  outline: 2px solid var(--c-white);
  outline-offset: 3px;
}
.work-case .wt-replay:disabled{ cursor: default; }
.work-case #services{
  margin-top: var(--sec-services-mt);
  min-height: var(--sec-services-h);
}
.work-case #build-partner{
  margin-top: var(--sec-build-mt);
  min-height: var(--sec-build-h);
}
.work-case #platform{
  margin-top: var(--sec-platform-mt);
  min-height: var(--sec-platform-h);
}
@media (min-width: 1440px){.work-case #services{ --gutter: 199px; --content-max: 1042px; }
.work-case #build-partner{ --gutter: 199px; --content-max: 1042px; }
.work-case #platform{ --gutter: 199px; --content-max: 1042px; }}
.work-case .credit{
  max-width: var(--credit-w);
  display: flex;
  flex-direction: column;
  gap: var(--credit-gap);
}
.work-case .credit-label{
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  color: var(--text-1);   
}
.work-case .credit-value{
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);   
  line-height: var(--lh-chip);
  letter-spacing: var(--ls-chip-title);
  color: var(--text-2);
  white-space: nowrap;
}
.work-case #footer{
  margin-top: var(--sec-footer-mt);
  min-height: var(--sec-footer-h);
  color: var(--c-offwhite);
  background-color: var(--c-near-black);
}
.work-case #footer .section-bg{
  left: var(--footer-bg-x);
  right: auto;
  width: var(--footer-bg-w);
  
  min-width: calc(100% + (var(--footer-bg-x) * -2));
  background: var(--grad-footer);
}
.work-case .footer-col{
  position: relative; z-index: 1;
  padding-top: var(--footer-col-y);
}
.work-case .footer-label{
  font-size: var(--fs-num);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-num);
  color: var(--c-white-70);
}
.work-case .footer-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--credit-gap);
  padding-top: var(--footer-row-y);
}
@media (max-width: 1023px){.work-case .intro-hero{
    height: auto;
    
    padding-top: calc(var(--header-nav-h) + var(--intro-hero-pt));
  }
.work-case .intro-services{
    position: relative;
    top: auto;
    padding-top: 96px;
    padding-bottom: 64px;
  }
.work-case .intro-carousel{ padding-block: 72px; }
.work-case .intro-carousel-nav{ position: relative; top: auto; height: auto; }
.work-case .intro-carousel-track{
    position: relative;
    top: auto;
    height: auto;
    aspect-ratio: var(--carousel-panel-ar);
    margin-top: 48px;
    overflow: hidden;
  }
.work-case .intro-cue{ position: relative; top: auto; padding: 48px 0; }
.work-case .hook-heading{ height: auto; white-space: normal; }
.work-case .hook-heading > span,
.work-case .hook-heading > span:nth-child(1),
.work-case .hook-heading > span:nth-child(2){ position: relative; top: auto; }
.work-case .journey-view{
    left: min(0px, calc(50% - var(--journey-rest-fx)));
    top:  min(0px, calc(50% - var(--journey-rest-fy)));
  }
.work-case .journey-replay{
    left: auto; top: auto;
    right: 20px; bottom: 20px;
  }
.work-case .pivot-stage{
    position: relative;
    left: auto; top: auto;
    width: 100%;
    height: auto;
    margin-top: var(--intro-copy-gap);
    overflow: visible;
  }
.work-case .pivot-device-art{ position: relative; left: auto; top: auto; width: 100%; }
.work-case .stats-row{ grid-template-columns: repeat(var(--stats-cols), minmax(0, 1fr)); }
.work-case #walkthrough .walkthrough-copy{ position: relative; top: auto; }
.work-case #walkthrough .walkthrough-copy .container{ height: auto; }
.work-case .walkthrough-heading,
.work-case .walkthrough-para{ position: relative; top: auto; }
.work-case .walkthrough-para{ margin-top: var(--hook-sub-gap); }
.work-case .wt-captions{
    position: relative;
    width: min(520px, 100% - (var(--gutter) * 2));
    height: var(--wt-caption-h);
    margin: var(--wt-caption-mt) auto 0;
    padding: 0;
    overflow: visible;
    clip-path: none;
  }
.work-case .wt-caption{
    position: absolute;
    left: 0; right: 0; top: 0;
    font-size: var(--wt-caption-fs);
    font-weight: var(--fw-bold);
    line-height: 1.35;
    letter-spacing: var(--ls-body);
    color: var(--c-ink);
    text-align: center;
    opacity: 0;
    visibility: hidden;
  }
.work-case .wt-caption[data-wt-beat="00"]{ opacity: 1; visibility: visible; }
.work-case .wt-replay{
    left: auto; right: 0;
    top: 100%;
    width: 44px; height: 44px;
    margin-top: 10px;
    border-radius: 25.142857px;   
  }
.work-case .wt-replay-glyph--light{ display: none; }
.work-case .wt-replay-glyph--dark{ display: block; }
.work-case .wt-replay:focus-visible{ outline-color: var(--c-ink); }
.work-case #stats .section-bg{ top: 0; bottom: 0; height: auto; }
.work-case .services-heading{ position: relative; top: auto; padding-bottom: 40px; }
.work-case .services-bar{ position: relative; top: auto; padding-block: 8px 32px; }
.work-case .services-row{ flex-wrap: wrap; justify-content: flex-start; min-height: 0; }
.work-case .services-row > .svc-chip:last-child{ padding-right: var(--services-chip-pad); }
.work-case .header-col{ min-height: 0; padding-bottom: 96px; }
.work-case .footer-row{ flex-wrap: wrap; row-gap: 32px; }
.work-case .footer-col{ padding-bottom: var(--footer-col-y); }}
.work-case #footer.footer-v2{ margin-top: var(--sec-footer-mt, 120px); background: none; color: inherit; overflow: hidden; min-height: 0; }
.work-case .footer-v2 .i-svg{ display: block; }
.work-case .footer-v2 .i-flip{ transform: scaleX(-1); }
.work-case .footer-v2 .i-rot180{ transform: rotate(180deg); }
.work-case .footer-next{ background: #fbfbfb; padding: 68px 0 52px; }
.work-case .footer-next .footer-label{ font-size: 13px; font-weight: var(--fw-bold, 700); letter-spacing: 1.6px; text-transform: uppercase; color: #1d1d1f; margin: 0 0 22px; line-height: 1; }
.work-case .footer-next .footer-row{ display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 0; }
.work-case .footer-nextchip{ color: inherit; text-decoration: none; filter: none; }
.work-case .footer-nextchip--disabled{ cursor: default; }
.work-case .footer-chrome{ background: linear-gradient(184.38deg, rgb(73,91,105) -110.56%, rgb(22,22,22) 85.69%); color: #fbfbfb; padding: 52px 0 44px; }
.work-case .footer-chrome-inner{ display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.work-case .footer-chrome-left{ display: flex; flex-direction: column; gap: 30px; }
.work-case .footer-back{ display: inline-flex; align-items: center; gap: 12px; color: rgba(255,255,255,0.55); text-decoration: none; font-size: var(--fs-chip, 18px); transition: color .2s ease; }
.work-case .footer-back:hover{ color: rgba(255,255,255,0.9); }
.work-case .footer-back-arrow{ display: inline-flex; width: 16px; height: 16px; color: #fbfbfb; }
.work-case .footer-back-label{ line-height: 1; }
.work-case .footer-logo svg{ width: 224px; height: auto; display: block; }
.work-case .footer-top{ -webkit-appearance: none; appearance: none; background: transparent; border: 1px solid rgba(217,217,217,0.35); width: 52px; height: 52px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fbfbfb; cursor: pointer; transition: border-color .2s ease, background .2s ease; flex: none; }
.work-case .footer-top:hover{ border-color: rgba(255,255,255,0.85); background: rgba(255,255,255,0.06); }
.work-case .footer-top-arrow{ display: inline-flex; width: 15px; height: 15px; }
@media (max-width: 1023px){.work-case .footer-next{ padding: 48px 0 36px; }
.work-case .footer-next .footer-row{ flex-wrap: wrap; row-gap: 28px; }
.work-case .footer-chrome{ padding: 40px 0 36px; }
.work-case .footer-logo svg{ width: 184px; }}
@media (max-width: 600px){.work-case .footer-chrome-inner{ flex-direction: column; align-items: flex-start; gap: 26px; }
.work-case .footer-top{ align-self: flex-end; margin-top: -52px; }}
.work-case .topnav{ -webkit-backdrop-filter: none; backdrop-filter: none; background: none; }
html.su-nav-restore .work-case #header-hero .header-logo,
html.su-nav-restore .work-case #header-hero .header-h1,
html.su-nav-restore .work-case #header-hero .header-sub,
html.su-nav-restore .work-case #header-hero .header-rule,
html.su-nav-restore .work-case #header-hero .header-chips,
html.su-nav-restore .work-case #header-hero .header-chips .chip{
  opacity: 1 !important; visibility: visible !important; transform: none !important;
}
html.su-nav-restore.su-no-vt .work-case{ background: #161616 !important; }
html.su-nav-restore.su-no-vt .work-case{ visibility: hidden; }
html.su-nav-restore.su-no-vt.su-nav-ready .work-case{ visibility: visible; }
@media (min-width: 1024px){.work-case #walkthrough .device{ width: min(var(--device-max), 100% - (var(--gutter-device) * 2), (100vh - var(--su-inset, 108px) - 64px) * 1280 / 749.847); }}
@media (min-width: 1024px){.work-case #footer.footer-v2{ min-height: 0; }
.work-case .footer-next{ background: #F7F7F8; padding: 80px 0; }
.work-case .footer-next .footer-label{ font-size: 16px; font-weight: 700; letter-spacing: 2.4px;
                                 line-height: 1.1; color: #16181B; margin: 0 0 32px; }
.work-case .footer-next .footer-row{ gap: 48px; }
.work-case .footer-chrome{ height: 263px; padding: 0; color: #fbfbfb;
                     background: linear-gradient(196deg, #2B333B 0%, #1D2227 48%, #14171A 100%); }
.work-case .footer-chrome .container{ position: relative; height: 100%; }
.work-case .footer-chrome-inner,
.work-case .footer-chrome-left{ display: contents; }
.work-case .footer-back{ position: absolute; left: 0; top: 52px; display: flex; align-items: center; gap: 12px;
                   padding: 12px 12px 12px 0; font-size: 20px; font-weight: 500; letter-spacing: 0.4px;
                   color: rgba(255,255,255,0.5); filter: drop-shadow(0 12px 10px rgba(17,33,45,0.25));
                   transition: color 0.3s ease-out; }
.work-case .footer-back:hover{ color: #FFFFFF; }
.work-case .footer-back-arrow{ width: 24px; height: 24px; }
.work-case .footer-back-arrow .i-svg{ width: 24px; height: 24px; }
.work-case .footer-logo{ position: absolute; left: 0; top: 130px; }
.work-case .footer-logo svg{ width: 260px; height: 42px; }
.work-case .footer-top{ position: absolute; right: 0; top: 125px; width: 52px; height: 52px; margin: 0;
                  border: 3.25px solid rgba(217,217,217,0.3); border-radius: 50%; background: transparent;
                  transition: border-color 0.4s cubic-bezier(0.22,1,0.36,1); }
.work-case .footer-top:hover{ border-color: rgba(217,217,217,0.7); background: transparent; }
.work-case .footer-top-arrow{ width: 22.75px; height: 22.75px; }
.work-case .footer-top-arrow .i-svg{ width: 22.75px; height: 22.75px; }}
@media (min-width: 1024px) and (max-width: 1439px){.work-case .header-col{ min-height: 0; padding-bottom: 64px; }}
@media (min-width: 1024px){.work-case #header-hero,
.work-case #header-hero .header-col{ min-height: calc(100vw * 988 / 1440); }}
body.page-case{ background: var(--color-background-inverse); }
html.lenis, html.lenis body { height: auto; }
html.lenis.lenis-smooth { scroll-behavior: auto !important; }