/* Case study page */
.case .c-hero{padding-top:72px;padding-bottom:56px}
.c-title{font-size:clamp(48px,8.6vw,140px);font-weight:600;line-height:.94;letter-spacing:-.045em;margin:24px 0 48px}
.c-title .h1b{color:#8A8A83}
.c-meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:32px}
.c-meta span,.c-stats span,.c-trio span,.week span{display:block;font-size:13px;letter-spacing:1.2px;text-transform:uppercase;color:#8A8A83;margin-bottom:8px}
.c-meta b{font-size:18px;font-weight:500;line-height:1.35}

.c-stats{border-top:1px solid #2A2A27;border-bottom:1px solid #2A2A27}
.c-stats .wrap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.c-stats .stat{padding:40px 24px 40px 0;border-right:1px solid #2A2A27}
.c-stats .stat+.stat{padding-left:24px}
.c-stats .stat:last-child{border-right:0}
.c-stats b{display:block;font-size:clamp(40px,5vw,72px);font-weight:600;letter-spacing:-.04em;line-height:1;margin-bottom:12px;font-variant-numeric:tabular-nums}
.c-stats span{margin:0}

.c-sec{padding-top:96px;padding-bottom:96px}
.c-head{max-width:760px;margin-bottom:48px}
.c-head .eyebrow{margin-bottom:20px}
.c-lead{font-size:20px;line-height:1.5;color:#B4B4AD;margin-top:24px;max-width:520px}
.light .c-lead{color:#45453F}
.c-split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:end}
.c-split .c-head{margin-bottom:0}
.cap,.c-note{font-size:14px;color:#8A8A83;margin-top:20px}

/* Before / after bars */
.ba{display:grid;gap:20px}
.ba-row{display:grid;grid-template-columns:150px minmax(0,1fr) 200px;align-items:center;gap:24px}
.ba-row .k{font-size:15px;color:#8A8A83}
.ba-row .n{font-size:clamp(28px,3.4vw,48px);font-weight:600;letter-spacing:-.03em;text-align:right}
.tk{display:block;height:56px;background:#141413;position:relative;overflow:hidden}
.fill{display:block;height:100%;width:var(--w);background:#EDEDE7;transform-origin:left;transform:scaleX(1);transition:transform 1.4s cubic-bezier(.2,.7,.1,1)}
.ba-row.before .fill{background:#4A4A45}
.ba-row.after .fill{transition-delay:.25s}

/* Line chart */
.c-panel{border:1px solid #2A2A27;background:#121211;padding:24px 24px 16px}
.chart{display:block;width:100%;height:auto;overflow:visible}
.chart .g{stroke:#24241F;stroke-width:1}
.chart .ax{fill:#6E6E68;font-size:16px;font-family:inherit}
.chart .area{fill:url(#none);fill:rgba(237,237,231,.06)}
.chart .ln{fill:none;stroke:#EDEDE7;stroke-width:3;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 2s cubic-bezier(.4,.1,.2,1)}
.chart .dot0{fill:#4A4A45}
.chart .dot1{fill:#EDEDE7}
.chart .lab{fill:#8A8A83;font-size:15px;font-weight:600;font-family:inherit}
.chart .lab.hi{fill:#EDEDE7;font-size:20px}
.c-panel .cap{margin-top:8px}

/* Monthly bars */
.bars{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:12px;height:340px;align-items:end;border-bottom:1px solid #3A3A36}
.bar{height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;position:relative}
.bar .col{display:block;height:var(--h);background:#3A3A36;transform-origin:bottom;transform:scaleY(1);transition:transform 1s cubic-bezier(.2,.7,.1,1) calc(var(--i)*60ms),background .3s}
.bar.peak .col,.bar:hover .col{background:#EDEDE7}
.bar .v{font-size:13px;font-weight:600;text-align:center;margin-bottom:8px;color:#B4B4AD;font-variant-numeric:tabular-nums;transition:opacity .6s calc(var(--i)*60ms + .5s)}
.bar.peak .v{color:#fff}
.bar .m{position:absolute;bottom:-30px;left:0;right:0;text-align:center;font-size:13px;color:#8A8A83}
.bars+.cap{margin-top:48px}

/* Reach split bar (light section) */
.split-bar{display:flex;height:120px;gap:4px}
.sb{width:var(--w);padding:20px;display:flex;flex-direction:column;justify-content:space-between;transform-origin:left;transition:transform 1.2s cubic-bezier(.2,.7,.1,1),opacity .8s}
.sb b{font-size:clamp(28px,3.6vw,52px);font-weight:600;letter-spacing:-.04em;line-height:1}
.sb span{font-size:14px}
.sb.in{background:#C9C9C1;color:#0B0B0A}
.sb.out{background:#0B0B0A;color:#EDEDE7;transition-delay:.2s}
.c-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:56px;border-top:1px solid #0B0B0A;padding-top:24px}
.c-trio b,.week b{display:block;font-size:clamp(32px,4vw,56px);font-weight:600;letter-spacing:-.04em;line-height:1;margin-bottom:10px}
.light .c-trio span{color:#5E5E58}

/* Engagement */
.hbars{display:grid;gap:14px}
.hrow{display:grid;grid-template-columns:110px minmax(0,1fr) 84px;gap:20px;align-items:center}
.hrow .k{font-size:15px;color:#B4B4AD}
.hrow .n{font-size:18px;font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.hrow .tk{height:28px}
.hrow .fill{transition-delay:calc(var(--i)*90ms)}
.hrow:not(:first-child) .fill{background:#6E6E68}
.hrow.total{border-top:1px solid #3A3A36;padding-top:14px;margin-top:6px}
.hrow.total .tk{background:none;height:auto}
.hrow.total .n{font-size:22px}

/* Rings */
.rings{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.ring{min-width:0;position:relative;border:1px solid #2A2A27;padding:32px;margin:0}
.ring svg{width:160px;height:160px;display:block}
.ring .rt{fill:none;stroke:#1E1E1C;stroke-width:12}
.ring .rf{fill:none;stroke:#EDEDE7;stroke-width:12;stroke-linecap:butt;stroke-dasharray:var(--p) 100;transition:stroke-dasharray 1.6s cubic-bezier(.2,.7,.1,1)}
.ring .rv-num{position:absolute;top:32px;left:32px;width:160px;height:160px;display:flex;align-items:center;justify-content:center;font-size:40px;font-weight:600;letter-spacing:-.03em}
.ring figcaption{margin-top:24px;min-width:0}
.ring figcaption b{display:block;font-size:20px;font-weight:600;line-height:1.3}
.ring figcaption span{display:block;font-size:14px;color:#8A8A83;margin-top:6px}

/* Top posts */
.posts{list-style:none;padding:0;margin:0;border-bottom:1px solid #2A2A27}
.posts li{position:relative;display:grid;grid-template-columns:64px minmax(0,1fr) 200px;gap:24px;align-items:center;padding:28px 0;border-top:1px solid #2A2A27;overflow:hidden}
.posts .pn{font-size:14px;color:#8A8A83}
.posts .pt b{display:block;font-size:13px;letter-spacing:1.2px;text-transform:uppercase;color:#8A8A83;font-weight:500;margin-bottom:8px}
.posts .pt span{font-size:clamp(20px,2.2vw,28px);font-weight:500;letter-spacing:-.02em;line-height:1.25}
.posts .pv{text-align:right}
.posts .pv b{display:block;font-size:clamp(28px,3vw,44px);font-weight:600;letter-spacing:-.04em;line-height:1}
.posts .pv span{font-size:13px;color:#8A8A83}
.posts .pbar{position:absolute;left:0;bottom:0;height:3px;width:var(--w);background:#EDEDE7;transform-origin:left;transition:transform 1.4s cubic-bezier(.2,.7,.1,1) .2s}

/* Week */
.c-week{background:#121211;border-top:1px solid #2A2A27;border-bottom:1px solid #2A2A27}
.week{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.week>div{border-top:1px solid #EDEDE7;padding-top:24px}
.week b{font-size:clamp(48px,6.5vw,104px)}

.c-cta .big{font-size:clamp(48px,8vw,128px);font-weight:600;letter-spacing:-.045em;line-height:.95;margin-bottom:40px}
.c-cta .actions{justify-content:flex-start}
.c-proof{font-size:17px;color:#8A8A83;margin:-16px 0 32px;max-width:560px}

/* Reveal: only hides things when JS is running and motion is allowed */
.cs-js .cs{opacity:0;transform:translateY(32px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.1,1)}
.cs-js .cs.on{opacity:1;transform:none}
.cs-js .cs:not(.on) .fill,.cs-js .cs:not(.on) .sb,.cs-js .cs:not(.on).posts li .pbar,.cs-js li.cs:not(.on) .pbar{transform:scaleX(0)}
.cs-js .cs:not(.on) .sb{opacity:0}
.cs-js .cs:not(.on) .col{transform:scaleY(0)}
.cs-js .cs:not(.on) .bar .v{opacity:0}
.cs-js .cs:not(.on) .ln{stroke-dashoffset:1}
.cs-js .cs:not(.on) .rf{stroke-dasharray:0 100}

@media (max-width:1023px){
  .c-meta{grid-template-columns:repeat(2,minmax(0,1fr))}
  .c-stats .wrap{grid-template-columns:repeat(2,minmax(0,1fr))}
  .c-stats .stat{padding:32px 16px 32px 0}
  .c-stats .stat:nth-child(2){border-right:0}
  .c-stats .stat:nth-child(3){padding-left:0}
  .c-stats .stat:nth-child(n+3){border-top:1px solid #2A2A27}
  .c-split{grid-template-columns:1fr;gap:40px}
  .rings{grid-template-columns:1fr 1fr}
  .c-sec{padding-top:72px;padding-bottom:72px}
}
@media (max-width:640px){
  .case .c-hero{padding-top:48px}
  .c-title{font-size:13vw}
  .c-meta{grid-template-columns:1fr;gap:16px}
  .c-stats .stat,.c-stats .stat+.stat{padding:24px 12px 24px 0}
  .c-stats .stat:nth-child(even){padding-left:12px}
  .c-stats b{font-size:34px}
  .ba-row{grid-template-columns:1fr auto;gap:10px}
  .ba-row .tk{grid-column:1 / -1;grid-row:2;height:40px}
  .ba-row .n{font-size:24px}
  .bars{gap:4px;height:260px}
  .bar .v{font-size:10px;writing-mode:vertical-rl;transform:rotate(180deg);margin:0 auto 6px}
  .bar .m{font-size:10px}
  .split-bar{height:auto;flex-direction:column}
  .sb{width:100%;min-height:96px;gap:16px}
  .sb.in{width:28%;min-width:100%}
  .sb:empty{min-height:12px}
  .c-trio,.week{grid-template-columns:1fr}
  .hrow{grid-template-columns:84px minmax(0,1fr) 60px;gap:10px}
  .hrow .k{font-size:13px}
  .hrow .n{font-size:15px}
  .rings{grid-template-columns:1fr}
  .ring{display:flex;align-items:center;gap:20px;padding:20px}
  .ring svg{width:110px;height:110px;flex:none}
  .ring .rv-num{top:20px;left:20px;width:110px;height:110px;font-size:28px}
  .ring figcaption{margin-top:0}
  .posts li{grid-template-columns:36px minmax(0,1fr);gap:12px}
  .posts .pv{grid-column:2;text-align:left;display:flex;align-items:baseline;gap:8px}
  .c-panel{padding:12px 8px 12px}
  .chart .ax{font-size:20px}
  .chart .lab{font-size:22px}
  .chart .lab.hi{font-size:28px}
}
@media (prefers-reduced-motion: reduce){
  .fill,.col,.ln,.rf,.sb,.pbar{transition:none!important}
}