/* Claude v4 story, scoped to avoid changing other portfolio sections. */
@font-face{font-family:CaseAnton;src:url('../fonts/case-anton.woff2') format('woff2');font-display:swap;font-weight:400}
.case-story{--cs-bg:#fff6ec;--cs-ink:#161616;--cs-muted:#6b6560;--cs-orange:#ff5a1f;--cs-dark:#0e0d0c;position:relative;background:var(--cs-bg);color:var(--cs-ink);font-family:var(--f-body,Inter,system-ui,sans-serif);isolation:isolate;scroll-margin-top:76px}
.case-story *{box-sizing:border-box}
.case-story .cs-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.cs-stage{position:relative;overflow:hidden}
.cs-track{display:block}
.cs-panel{position:relative;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:5vw;align-items:center;min-height:780px;padding:120px 6vw 90px;overflow:hidden}
.cs-panel.cs-start{background:var(--cs-bg)}
.cs-panel.cs-work{background:var(--cs-orange);color:var(--cs-bg);grid-template-columns:repeat(2,minmax(0,1fr));gap:6vw}
.cs-panel.cs-result{background:var(--cs-dark);color:var(--cs-bg)}
.cs-label{display:flex;align-items:center;gap:14px;margin:0 0 26px;font:500 13px/1.4 var(--f-mono,monospace);letter-spacing:.12em;text-transform:uppercase}
.cs-label::before{content:'';width:40px;height:1px;background:currentColor;opacity:.6;flex:none}
.cs-start .cs-label{color:var(--cs-muted)}
.cs-result .cs-label{color:#b9aea2}
.cs-big{font:400 clamp(64px,11.5vw,176px)/.95 CaseAnton,Impact,sans-serif;text-transform:uppercase;margin:0;letter-spacing:0}
.cs-big-line{display:block;overflow:hidden;padding:.02em 0 .06em;white-space:nowrap}
.cs-char,.cs-number{display:inline-block;white-space:pre;transform-origin:50% 100%}
.cs-number{font-variant-numeric:tabular-nums}
.cs-result .cs-highlight{color:var(--cs-orange)}
.cs-sub{margin:24px 0 0;font:500 13px/1.6 var(--f-mono,monospace);letter-spacing:.08em;text-transform:uppercase;color:var(--cs-muted)}
.cs-cue{display:flex;align-items:center;gap:14px;margin-top:32px;font:500 12px/1.5 var(--f-mono,monospace);letter-spacing:.14em;text-transform:uppercase;color:var(--cs-muted)}
.cs-cue svg{width:44px;height:14px}
.cs-lede{font-size:clamp(20px,2.1vw,32px);line-height:1.35;font-weight:500;letter-spacing:-.015em;max-width:26ch;margin:0}
.cs-facts{display:flex;gap:40px;margin:34px 0 0;flex-wrap:wrap}
.cs-facts dt{font:500 12px/1.4 var(--f-mono,monospace);text-transform:uppercase;letter-spacing:.1em;margin-bottom:10px}
.cs-facts dd{font-size:clamp(22px,2vw,30px);font-weight:600;margin:0}
.cs-chart{position:relative;height:min(45vh,420px);display:flex;align-items:flex-end;gap:clamp(20px,3vw,46px);margin-top:72px}
.cs-chart::before{content:'';position:absolute;inset:auto 0 0;border-top:2px dashed #fff6ec80}
.cs-bar-col{position:relative;flex:1;height:100%;display:flex;align-items:flex-end}
.cs-bar{width:100%;border-radius:22px 22px 0 0;transform-origin:bottom}
.cs-bar.cs-before{height:44.49%;background:#fff6ec66}
.cs-bar.cs-after{height:100%;background:var(--cs-dark)}
.cs-bar-val{position:absolute;left:0;right:0;text-align:center;font:400 clamp(30px,3.4vw,54px)/1 CaseAnton,Impact,sans-serif}
.cs-before-val{bottom:calc(44.49% + 14px)}
.cs-after-val{bottom:calc(100% + 14px)}
.cs-bar-val small{display:block;font:500 12px/1.4 var(--f-mono,monospace);text-transform:uppercase;letter-spacing:.08em;margin-top:8px}
.cs-mult{position:absolute;left:4%;top:-125px;font:400 clamp(70px,8vw,120px)/1 CaseAnton,Impact,sans-serif}
.cs-ghost{position:absolute;left:0;bottom:12px;white-space:nowrap;font:400 clamp(110px,15vw,230px)/1 CaseAnton,Impact,sans-serif;text-transform:uppercase;color:transparent;-webkit-text-stroke:1px #fff6ec40;pointer-events:none;z-index:0}
.cs-copy,.cs-chart{position:relative;z-index:1;min-width:0}
.cs-note{margin:22px 0 0;font-size:16px;line-height:1.5;color:#b9aea2}
.cs-actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:28px}
.case-story .cs-cta{display:inline-flex;align-items:center;gap:10px;padding:18px 28px;border-radius:999px;background:var(--cs-orange);color:#fff;font-weight:600;font-size:18px;line-height:1.3;text-decoration:none;box-shadow:0 18px 40px -20px #ff5a1f99;transition:background .2s,transform .2s}
.cs-cta svg{width:21px;height:21px;flex:none}
.case-story .cs-cta:hover{background:#ff762e;color:#fff;transform:translateY(-2px)}
.case-story .cs-library{font-size:18px;line-height:1.4;color:var(--cs-bg);text-decoration:underline;text-underline-offset:5px}
.cs-card-wrap{display:grid;justify-items:center;align-content:center;gap:14px;min-width:0;perspective:1400px}
.cs-card-rise{width:min(100%,420px)}
.cs-proof-card{display:flex;flex-direction:column;width:100%;height:clamp(360px,70svh,700px);border:1px solid #fff6ec26;border-radius:30px;background:#242321;color:var(--cs-bg);padding:0;overflow:hidden;text-align:left;cursor:pointer;box-shadow:0 50px 70px -40px #3c1e0a88;transform-style:preserve-3d}
.cs-result .cs-proof-card{box-shadow:0 50px 90px -30px #ff5a1f66}
.cs-card-head{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;font:500 14px/1.4 var(--f-mono,monospace);flex:none}
.cs-card-head svg{width:18px;height:18px}
.cs-shot-image{display:block;flex:1;min-height:0;width:100%;background:#242321;overflow:hidden}
.cs-shot-image img{display:block;width:100%;height:100%;object-fit:contain;object-position:center;transform:none!important}
.cs-total{display:block;padding:16px 22px;border-top:1px solid #fff6ec26;flex:none;background:#242321}
.cs-total strong{display:block;font-variant-numeric:tabular-nums;white-space:nowrap;font-size:clamp(22px,2vw,30px);line-height:1.2;font-weight:600;letter-spacing:-.02em}
.cs-total small{display:block;font-size:14px;line-height:1.4;color:#c7bfb7;margin-top:4px}
.cs-hud,.cs-nav{display:none}
.cs-enhanced .cs-stage{height:100svh;min-height:480px}
.cs-enhanced .cs-track{display:flex;width:300%;height:100%}
.cs-enhanced .cs-panel{flex:0 0 calc(100% / 3);width:calc(100% / 3);height:100%;min-height:0}
.cs-enhanced .cs-hud{position:absolute;z-index:5;top:80px;left:6vw;right:6vw;display:flex;justify-content:space-between;gap:20px;font:500 12px/1.4 var(--f-mono,monospace);letter-spacing:.12em;text-transform:uppercase;pointer-events:none}
.cs-enhanced .cs-nav{position:absolute;z-index:5;left:6vw;right:6vw;bottom:24px;display:flex;align-items:center;gap:22px}
.cs-nav button{border:0;background:none;color:inherit;font:500 12px/1.4 var(--f-mono,monospace);letter-spacing:.1em;text-transform:uppercase;min-height:44px;padding:8px 0;opacity:.6;cursor:pointer;white-space:nowrap}
.cs-nav button[aria-pressed=true],.cs-nav button:hover{opacity:1}
.cs-progress{flex:1;height:2px;background:#16161633;overflow:hidden}
.cs-progress-fill{display:block;height:100%;background:var(--cs-orange);transform:scaleX(0);transform-origin:left}
.cs-enhanced[data-chapter='1'] .cs-hud,.cs-enhanced[data-chapter='1'] .cs-nav,.cs-enhanced[data-chapter='2'] .cs-hud,.cs-enhanced[data-chapter='2'] .cs-nav{color:var(--cs-bg)}
.cs-enhanced[data-chapter='1'] .cs-progress-fill{background:var(--cs-bg)}
.case-story :is(button,a):focus-visible{outline:3px solid var(--cs-orange);outline-offset:5px}
.case-story .cs-work :is(button,a):focus-visible{outline-color:var(--cs-dark)}
@media(max-width:980px){
 .cs-panel{gap:4vw;padding:120px 5vw 80px;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
 .cs-big{font-size:clamp(60px,10.5vw,104px)}
 .cs-label{font-size:12px;margin-bottom:20px}
 .cs-card-rise{max-width:340px}
 .cs-proof-card{height:clamp(350px,64svh,650px)}
 .cs-lede{font-size:clamp(20px,2.8vw,28px)}
 .cs-actions{gap:16px}
 .case-story .cs-cta{font-size:16px;padding:15px 20px}
 .case-story .cs-library{font-size:16px}
 .cs-mult{font-size:90px}
 .cs-facts{gap:24px}
 .cs-facts dd{font-size:22px}
}
@media(max-width:600px){
 .cs-enhanced .cs-stage{min-height:600px}
 .cs-panel,.cs-panel.cs-work{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);align-content:center;gap:18px;padding:112px 22px 76px;min-height:700px}
 .cs-enhanced .cs-panel{min-height:0}
 .cs-enhanced .cs-hud{top:76px;left:22px;right:22px;font-size:10px;letter-spacing:.06em}
 .cs-hud .cs-hud-title{max-width:27ch}
 .cs-enhanced .cs-nav{left:22px;right:22px;bottom:12px;gap:18px}
 .cs-nav button{font-size:11px;letter-spacing:.04em}
 .cs-nav .cs-progress{position:absolute;left:0;right:0;bottom:0}
 .cs-label{font-size:11px;letter-spacing:.07em;gap:10px;margin-bottom:12px}
 .cs-label::before{width:24px}
 .cs-big{font-size:clamp(52px,14vw,80px)}
 .cs-big-line{padding-bottom:.04em}
 .cs-sub{margin-top:12px;font-size:11px;letter-spacing:.04em}
 .cs-cue{display:none}
 .cs-card-wrap{height:100%;gap:8px;min-height:0;grid-template-rows:minmax(0,1fr)}
 .cs-card-rise{width:min(80%,270px);height:100%;min-height:0}
 .cs-proof-card{height:100%;min-height:0;border-radius:22px}
 .cs-card-head{font-size:11px;padding:11px 14px}
 .cs-total{padding:10px 14px}
 .cs-total strong{font-size:20px}
 .cs-total small{font-size:11px;margin-top:3px}
 .cs-lede{font-size:clamp(23px,6vw,30px);max-width:24ch}
 .cs-facts{margin-top:18px;gap:25px}
 .cs-facts dt{font-size:11px;margin-bottom:6px}
 .cs-facts dd{font-size:20px}
 .cs-chart{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:44px minmax(0,1fr);row-gap:72px;height:100%;min-height:0;margin:0 12px;align-self:stretch}
 .cs-work .cs-lede{font-size:clamp(16px,4.5vw,20px);line-height:1.4;max-width:32ch}
 .cs-work .cs-facts{margin-top:14px;gap:22px}
 .cs-work .cs-facts dd{font-size:18px}
 .cs-chart .cs-bar-col{grid-row:2;min-height:0}
 .cs-chart .cs-after-val{bottom:calc(100% + 8px)}
 .cs-chart .cs-before-val{bottom:calc(44.49% + 8px)}
 .cs-mult{position:static;grid-column:1 / -1;grid-row:1;font-size:44px;line-height:1}
 .cs-bar-val{font-size:32px}
 .cs-bar-val small{font-size:11px;margin-top:5px}
 .cs-ghost{font-size:100px;bottom:20px}
 .cs-note{font-size:13px;margin-top:10px}
 .cs-actions{margin-top:14px;gap:14px}
 .case-story .cs-cta{font-size:14px;padding:12px 17px}
 .case-story .cs-library{font-size:14px}
 .cs-result .cs-card-rise{width:min(75%,250px)}
}
@media(max-height:700px) and (min-width:601px){
 .cs-enhanced .cs-stage{min-height:360px}
 .cs-panel{padding-top:106px;padding-bottom:74px;gap:3vw}
 .cs-big{font-size:clamp(56px,9vw,126px)}
 .cs-label{font-size:11px;margin-bottom:12px}
 .cs-sub,.cs-note{margin-top:12px;font-size:13px}
 .cs-cue{display:none}
 .cs-proof-card{height:calc(100svh - 190px);min-height:165px;border-radius:20px}
 .cs-card-rise{width:min(100%,280px)}
 .cs-card-head{padding:8px 14px;font-size:11px}
 .cs-total{padding:8px 14px}
 .cs-total strong{font-size:20px}
 .cs-total small{font-size:11px}
 .cs-card-wrap{gap:6px}
 .cs-actions{margin-top:14px;gap:16px}
 .case-story .cs-cta{padding:11px 18px;font-size:14px}
 .case-story .cs-library{font-size:14px}
 .cs-lede{font-size:clamp(18px,2.1vw,26px)}
 .cs-facts{margin-top:18px}
 .cs-facts dd{font-size:20px}
 .cs-chart{height:35svh;margin-top:50px}
 .cs-mult{font-size:60px;top:-80px}
 .cs-bar-val{font-size:30px}
 .cs-bar-val small{font-size:10px}
}
@media(max-width:600px) and (max-height:750px){
 .cs-panel{padding-top:106px;gap:12px}
 .cs-label{margin-bottom:8px}
 .cs-big{font-size:clamp(48px,13.5vw,66px)}
 .cs-sub{margin-top:8px}
 .cs-note{font-size:12px}
 .cs-actions{gap:10px;margin-top:10px}
 .case-story .cs-cta{font-size:13px;padding:10px 14px}
 .case-story .cs-library{font-size:13px}
 .cs-total strong{font-size:18px}
}
@media(max-height:500px) and (min-width:601px){
 .cs-panel{padding:100px 5vw 68px}
 .cs-big{font-size:clamp(42px,6.5vw,58px)}
 .cs-label{font-size:10px;margin-bottom:6px}
 .cs-sub,.cs-note{font-size:12px;margin-top:6px}
 .cs-actions{margin-top:8px;gap:16px}
 .case-story .cs-cta{font-size:12px;padding:10px 15px}
 .case-story .cs-library{font-size:12px}
 .cs-proof-card{height:calc(100svh - 208px);min-height:150px}
 .cs-card-rise{width:min(100%,240px)}
 .cs-card-head{font-size:10px;padding:6px 12px}
 .cs-total{padding:6px 12px}
 .cs-total strong{font-size:18px}
 .cs-total small{font-size:10px}
 .cs-enhanced .cs-nav{bottom:12px}
 .cs-lede{font-size:18px}
 .cs-facts{margin-top:12px}
 .cs-facts dd{font-size:18px}
 .cs-chart{height:29svh;margin-top:38px}
 .cs-mult{font-size:46px;top:-59px}
 .cs-bar-val{font-size:24px}
}
@media(prefers-reduced-motion:reduce){.case-story :is(a,button){transition:none}.cs-cue{display:none}}