/* The mark only fades; the surrounding planes move independently. */
.brand-plane img{transform:none!important}
.brand-plane::before{translate:calc(var(--hero-drift,0)*1px) calc(var(--hero-drift,0)*-.6px)}
.brand-plane::after{translate:calc(var(--hero-drift,0)*-.7px) calc(var(--hero-drift,0)*.5px)}
.work-heading{margin-bottom:48px}
.work-heading>p{max-width:410px}
.work-statement{font-size:clamp(30px,3.5vw,49px);line-height:1.3;letter-spacing:-.045em;max-width:1000px;margin:0 0 25px;color:var(--muted)}
.work-statement strong{font-weight:650;color:var(--deep)}
.work-context{max-width:730px;font-size:18px;line-height:1.7;color:var(--muted);margin:0 0 50px}
.case-section{padding-block:80px;overflow:visible}
.case-scroll{position:relative}
.case-scroll.is-pinned{height:calc(var(--pin-height) + var(--scroll-distance))}
.is-pinned .case-pin{position:sticky;top:20px}
.case-pin .case-intro{display:block;margin:0 0 26px}
.case-pin .case-intro h2{font-size:clamp(44px,5.5vw,72px)!important}
.case-pin .case-subtitle{margin:12px 0 0;font-size:18px}
.case-story{border-radius:20px;background:#fff;color:var(--deep);overflow:hidden;box-shadow:0 25px 70px #17033230}
.story-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 28px;border-bottom:1px solid #ece7f1}
.story-hint{font-size:13px;color:var(--muted);gap:12px;align-items:center}
.story-toolbar .switch{width:auto}
.story-toolbar .switch button{padding:10px 18px;min-height:42px}
.story-map{position:relative;height:280px;margin:8px 26px 0;background:radial-gradient(ellipse at center,#f4effb 0,transparent 65%)}
.story-wires{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke-linecap:round;stroke-linejoin:round}
.story-wires path{vector-effect:non-scaling-stroke;stroke-width:1.5px}
.story-crossings{stroke:#a8a1b0;opacity:calc(.65*(1 - var(--resolve)))}
.story-connections{stroke:color-mix(in srgb,#a8a1b0 calc((1 - var(--resolve))*100%),#6b0aea);opacity:.65}
.story-mobile-static{display:none;stroke:#6b0aea;opacity:.65}
.story-node{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%) rotate(var(--tilt,0deg));width:23%;max-width:225px;min-height:49px;display:flex;align-items:center;gap:10px;padding:12px 16px;border:1px solid color-mix(in srgb,#d7d3dc calc((1 - var(--resolve))*100%),#dfcef6);border-radius:10px;background:color-mix(in srgb,#f3f2f5 calc((1 - var(--resolve))*100%),#f3ebfe);color:color-mix(in srgb,#706b79 calc((1 - var(--resolve))*100%),#210647);font-size:14px;line-height:1.35;font-weight:650;box-shadow:0 4px 14px #21064706}
.node-dot{width:6px;height:6px;flex:0 0 6px;border-radius:50%;background:color-mix(in srgb,#b2acb9 calc((1 - var(--resolve))*100%),#6b0aea)}
.story-hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:100px;height:100px;border:1px solid #e2dce9;border-radius:24px;background:#efedf1;display:grid;place-items:center;box-shadow:0 0 0 calc(var(--resolve)*10px) #6b0aea08}
.story-hub>span{font-size:13px;line-height:1.5;text-align:center;color:#6e6479;opacity:calc(1 - var(--resolve))}
.story-hub>div{position:absolute;inset:-1px;border-radius:24px;background:linear-gradient(135deg,#6b0aea,#3b087f);display:grid;place-items:center;opacity:var(--resolve)}
.story-hub img{width:70px;height:70px}
.story-caption{display:grid;margin:4px 30px 24px;min-height:46px;align-items:center;text-align:center}
.story-caption p{grid-area:1/1;font-size:15px;line-height:1.6;margin:0}
.caption-before{color:var(--muted);opacity:calc(1 - var(--resolve))}
.caption-after{color:var(--deep);opacity:var(--resolve)}
.story-metrics{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #ece7f1}
.story-metric{padding:22px 28px 20px;border-right:1px solid #ece7f1;min-width:0}
.story-metric:last-child{border-right:0}
.metric-label{display:block;font-size:14px;font-weight:650;line-height:1.4;min-height:40px}
.metric-values{height:85px;position:relative;margin:10px 0 5px;white-space:nowrap;font-variant-numeric:tabular-nums;letter-spacing:-.055em}
.metric-before{display:inline-block;position:absolute;left:0;top:14px;font-size:clamp(30px,3.5vw,48px);font-weight:650;color:#746a7d;transform:translateY(calc(var(--metrics)*-15px)) scale(calc(1 - var(--metrics)*.5));transform-origin:top left}
.metric-before::after{content:'';position:absolute;height:2px;left:0;right:0;top:54%;background:#9c8faa;transform-origin:left;transform:scaleX(var(--metrics))}
.metric-after{position:absolute;left:0;bottom:0;font-size:52px;font-weight:700;line-height:1;color:var(--purple);opacity:var(--metrics);transform:translateY(calc((1 - var(--metrics))*12px))}
.metric-values small{font-size:.55em;letter-spacing:0}
.metric-period{font-size:12px;color:var(--muted)}
.story-progress{height:3px;background:#f0eaf7}
.story-progress i{display:block;height:100%;background:var(--purple);transform:scaleX(var(--progress));transform-origin:left}
.case-notes{margin-top:35px}
.case-notes .case-disclaimer{background:none;padding:0;max-width:1050px;color:#d7c8eb;font-size:12px;line-height:1.75}
.case-notes .case-bottom{margin-top:28px}
.story-hint{visibility:hidden}
.is-pinned .story-hint{visibility:visible}
@media(max-width:800px){
 .case-section{padding-block:60px}.story-map{height:270px;margin-inline:15px}.story-node{padding:10px;font-size:12px;gap:7px;max-width:none;width:25%}.story-hub{width:84px;height:84px;border-radius:21px}.story-hub>div{border-radius:21px}.story-hub img{width:59px;height:59px}.story-toolbar{padding:12px 18px}.story-hint{font-size:12px;max-width:140px}.story-metric{padding:18px}.metric-label{font-size:13px;min-height:40px}.metric-before{font-size:32px}.metric-after{font-size:47px}.story-caption p{font-size:14px}.work-context{font-size:17px}
}
@media(max-width:540px){
 .work-heading{margin-bottom:32px}.work-statement{font-size:32px;line-height:1.3}.work-context{font-size:16px;margin-bottom:36px}.case-section{padding-block:48px}.case-pin .case-intro{margin-bottom:20px}.case-pin .case-intro h2{font-size:44px!important}.case-pin .case-subtitle{font-size:16px;line-height:1.45;margin-top:10px}.story-toolbar{padding:10px;justify-content:center}.story-toolbar .switch{width:100%}.story-toolbar .switch button{font-size:13px}.story-hint{display:none!important}.story-map{height:256px;margin:8px 5px 0}.story-node{width:29%;min-height:55px;padding:8px 5px;text-align:center;justify-content:center;font-size:11px;border-radius:8px}.node-dot{display:none}.story-hub{width:74px;height:74px;border-radius:18px}.story-hub>div{border-radius:18px}.story-hub img{width:53px;height:53px}.story-hub>span{font-size:11px}.story-caption{margin:0 16px 14px;min-height:60px}.story-caption p{font-size:12px;line-height:1.6}.story-metric{padding:15px 9px 13px}.metric-label{font-size:11px;min-height:46px}.metric-values{height:66px;margin:3px 0 5px}.metric-before{font-size:clamp(20px,5.4vw,28px);top:12px;letter-spacing:-.06em}.metric-after{font-size:37px}.metric-period{font-size:11px}.case-notes{margin-top:25px}.case-notes .case-bottom p{font-size:18px}
 /* Static layout is complete even before JavaScript or with it disabled. */
 .story-node:nth-of-type(1){--x:18%!important;--y:15%!important}.story-node:nth-of-type(2){--x:50%!important;--y:15%!important}.story-node:nth-of-type(3){--x:82%!important;--y:15%!important}.story-node:nth-of-type(4){--x:18%!important;--y:85%!important}.story-node:nth-of-type(5){--x:50%!important;--y:85%!important}.story-node:nth-of-type(6){--x:82%!important;--y:85%!important}
 .js .story-node{left:var(--node-x,var(--x));top:var(--node-y,var(--y))}
}
@media(prefers-reduced-motion:reduce){.brand-plane::before,.brand-plane::after{translate:none!important}.case-scroll.is-pinned{height:auto}.is-pinned .case-pin{position:static}}
@media(min-width:541px) and (max-height:850px){.case-pin .case-intro h2{font-size:52px!important}.case-pin .case-intro{margin-bottom:18px}.story-map{height:205px}.story-toolbar{padding-block:10px}.story-caption{min-height:35px;margin-bottom:14px}.story-metric{padding-block:15px}.metric-values{height:72px;margin-top:2px}.metric-after{font-size:44px}}
@media(max-width:540px) and (max-height:790px){.case-pin .case-intro h2{font-size:39px!important}.story-map{height:216px}.case-pin .case-intro{margin-bottom:16px}.story-caption{min-height:55px}.metric-label{min-height:44px}}
@media(max-width:540px){html:not(.js) .story-connections{display:none}html:not(.js) .story-mobile-static{display:block}}
@media(max-width:540px){.metric-before{transform:translateY(calc(var(--metrics)*-12px)) scale(calc(1 - var(--metrics)*.3))}}
