.case-page{background:#fafafa;color:#202023;--case-accent:#7661e9;--case-line:#e3e1e8;--case-sans:"Geist","Helvetica Neue",Arial,sans-serif;--case-mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,monospace;--case-label:#35323d;font-family:var(--case-sans)}
.case-container{width:min(1200px,88vw);margin:0 auto}
.case-hero{padding-top:42px}
.back-link{font-size:13px;text-decoration:none;color:#6c6b71}
.back-link:hover,.case-end a:hover{text-decoration:underline;text-underline-offset:5px}
.case-eyebrow{margin:58px 0 20px;font-size:12px;letter-spacing:.035em;color:#706d7b}
.case-hero h1{font-size:clamp(64px,9vw,116px);line-height:1;letter-spacing:-.065em;font-weight:500;margin:0 0 24px}
.case-hero .tagline{font-size:clamp(22px,2.6vw,32px);letter-spacing:-.035em;line-height:1.35;max-width:none;margin:0 0 35px;color:#343139}
.case-hero .meta{display:grid;grid-template-columns:1fr 1.1fr 1fr 1.3fr;gap:28px;padding:25px 0;border-top:1px solid var(--case-line);border-bottom:1px solid var(--case-line);font-size:14px;line-height:1.7;color:#75717f;margin:30px 0}
.meta b{display:block;color:#35323d;font-size:11px;text-transform:uppercase;letter-spacing:.07em;margin-bottom:8px}
.case-hero>p:not(.tagline){max-width:none;font-size:17px;line-height:1.75;color:#55515d;margin:18px 0}
.case-hero .cta{display:inline-flex;align-items:center;background:#222125;color:#fff;text-decoration:none;border-radius:30px;padding:13px 22px;font-size:14px;margin:10px 0 8px;transition:background .2s}
.case-hero .cta:hover{background:#5f4acb}
.case-page figure{margin:35px 0}
.case-page figure img,.case-page figure video{display:block;width:100%;height:auto;border-radius:12px;background:transparent;border:0}
.case-page figure video{max-height:none;object-fit:contain}
.case-hero figure{margin-top:35px}
.case-page figcaption{font-size:13px;line-height:1.55;color:#7c7588;margin-top:13px}
.story-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,740px) minmax(0,1fr);gap:28px;padding-top:90px}
.story-content{grid-column:2;min-width:0}
.story-nav{grid-column:1;align-self:start;position:sticky;top:110px}
.story-nav nav{display:flex;flex-direction:column;gap:8px}
.story-nav a{position:relative;font-size:14px;line-height:1.5;color:#77717f;text-decoration:none;padding:8px 0 8px 14px;transition:color .2s}
.story-nav a::before{content:"";position:absolute;left:0;top:50%;width:2px;height:18px;border-radius:2px;background:var(--case-accent);transform:translateY(-50%);opacity:0;transition:opacity .2s}
.story-nav a:hover,.story-nav a[aria-current=true]{color:#49398f}
.story-nav a:hover::before,.story-nav a[aria-current=true]::before{opacity:1}
.story-section{padding:0 0 58px;margin:0 0 62px;border-bottom:1px solid var(--case-line);scroll-margin-top:30px}
.story-section h2{font-size:clamp(30px,3.2vw,44px);letter-spacing:-.04em;font-weight:500;line-height:1.15;max-width:740px;margin:0 0 26px}
.story-section>p,.story-section>ul{font-size:17px;line-height:1.8;max-width:740px;color:#504b59;margin:18px 0}
.story-section strong{font-weight:600;color:#29252f}
.story-section ul{padding-left:22px}
.story-section li+li{margin-top:9px}
.story-section h3{font-size:clamp(23px,2.2vw,30px);font-weight:500;letter-spacing:-.025em;line-height:1.25;margin:64px 0 22px;max-width:740px}
.decision-number{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#817a8c;margin-bottom:12px}
.story-section .rule{border-left:3px solid var(--case-accent);background:#f1edf9;padding:20px 24px;border-radius:0 8px 8px 0;margin:28px 0}
.case-page .pair{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.case-page .pair .lbl{font-size:11px;text-transform:uppercase;letter-spacing:.065em;margin-bottom:12px;color:#7a7186}
.case-page .narrow .image-expand{max-width:300px;margin:auto}
.case-page .narrow figcaption{text-align:center}
.asset-note{display:block;font-size:11px;margin-top:6px;color:#8c8495}
.story-section .note{font-size:13px;color:#807a89;font-style:italic}
.image-expand{display:block;position:relative;width:100%;padding:0;border:0;background:transparent;border-radius:12px;cursor:zoom-in;text-align:left}
.image-expand-hint{position:absolute;right:12px;bottom:12px;font-size:11px;padding:8px 11px;border-radius:20px;background:#fffefa;color:#514a5d;box-shadow:0 2px 8px #0001;opacity:0;transition:opacity .2s}
.image-expand:hover .image-expand-hint,.image-expand:focus-visible .image-expand-hint{opacity:1}
.case-end{display:flex;justify-content:space-between;align-items:end;padding:0 0 60px;gap:24px}
.case-end a{text-decoration:none;font-size:clamp(23px,3vw,38px);letter-spacing:-.03em}
.case-end small{display:block;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:#777;margin-bottom:16px}
.case-end .back-to-top{font-size:14px;line-height:1.2;letter-spacing:0;color:#fff;background:#222125;white-space:nowrap;border-radius:999px;padding:13px 20px;gap:8px;transition:background .2s}
.case-end .back-to-top:hover{background:#5f4acb;text-decoration:none}
.case-end .back-to-top:focus-visible{outline:2px solid var(--case-accent);outline-offset:4px}
.image-dialog{width:min(1500px,96vw);max-width:96vw;max-height:94svh;padding:14px;border:0;border-radius:12px;background:#fafafa}
.image-dialog::backdrop{background:#15121edb}
.image-dialog-bar{display:flex;justify-content:space-between;align-items:center;padding:0 0 12px;gap:20px}
.image-dialog-bar a,.image-dialog-close{font-size:13px;color:#555;background:none;border:0;padding:8px;text-decoration:none}
.image-dialog>img{display:block;width:auto;max-width:100%;height:auto;max-height:calc(94svh - 80px);object-fit:contain;margin:auto}
@media(max-width:1100px){.story-layout{grid-template-columns:1fr;padding-top:48px;gap:35px}.story-nav{position:static;grid-column:1}.story-content{grid-column:1;width:100%;max-width:740px;margin-inline:auto}.story-nav nav{flex-direction:row;flex-wrap:wrap;gap:8px 20px}.story-nav a{padding:6px 0}.story-nav a::before{left:50%;top:auto;bottom:0;width:18px;height:2px;transform:translateX(-50%)}.case-hero .meta{grid-template-columns:1fr 1fr}.story-section>p,.story-section>ul{max-width:none}.story-section{padding-bottom:40px;margin-bottom:40px}}
@media(max-width:600px){.case-eyebrow{margin-top:35px;font-size:11px}.case-hero{padding-top:28px}.case-hero .meta{gap:22px 18px}.case-hero .tagline{font-size:24px}.case-page .pair{grid-template-columns:1fr;gap:28px}.story-section>p,.story-section>ul{font-size:16px;line-height:1.75}.story-section h3{margin-top:42px}.case-page figure{margin:26px 0}.case-page figcaption{font-size:12px}.image-expand-hint{display:none}.case-end{align-items:start;flex-direction:column}.case-hero .cta{font-size:13px}.story-nav a{font-size:13px}}
@media(prefers-reduced-motion:reduce){.case-hero .cta,.story-nav a,.image-expand-hint{transition:none}}

.link-arrow{display:inline-block;vertical-align:middle;width:20px;height:20px;flex-shrink:0}.arrow-left{transform:rotate(180deg)}.case-hero .cta,.back-link,.original-image,.back-to-top{align-items:center;gap:8px}.back-link,.original-image,.back-to-top{display:inline-flex}.image-expand-hint .link-arrow{width:13px;height:13px}.case-end>a>.link-arrow{width:24px;height:24px}

.case-end .back-to-top>.link-arrow{width:1em;height:1em}

/* The original SVG remains fully visible without JavaScript or with reduced motion. */
.case-page .case-graphic{display:block;width:100%;height:auto;border-radius:12px}
.case-graphic.line-ready .draw-line{stroke-dasharray:var(--draw-length);stroke-dashoffset:var(--draw-length)}
.case-graphic.is-drawing .draw-line{animation:case-line-draw var(--draw-duration,1100ms) cubic-bezier(.22,.61,.36,1) var(--draw-delay) both}
@keyframes case-line-draw{from{stroke-dashoffset:var(--draw-length)}to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.case-graphic.line-ready .draw-line{stroke-dasharray:none;stroke-dashoffset:0;animation:none}}

/* Adopt the reviewed typefaces and sizes while retaining the original layout. */
.case-eyebrow,.meta b,.decision-number,.case-page .pair .lbl,.case-end small{font-family:var(--case-mono);font-weight:500}
.case-eyebrow,.meta b{color:var(--case-label)}

.case-end .case-next-project{display:flex;flex-direction:column;align-items:flex-start;text-align:left}
.case-next-project-name{display:block}

/* Scroll reveals keep the existing document layout and spacing. */
.scroll-reveal{transition:opacity .65s ease,transform .75s cubic-bezier(.22,1,.36,1)}
.scroll-reveal:not(.is-revealed){opacity:0;transform:translateY(22px)}
.scroll-reveal.reveal-scale{transform-origin:center;transition-duration:.85s,1s}
.scroll-reveal.reveal-scale:not(.is-revealed){transform:translateY(24px) scale(.94)}
.highlight-sweep{font-weight:700;color:#29252f}
.highlight-line{white-space:nowrap;background-image:linear-gradient(transparent 45%,#dfd6ff 45%,#dfd6ff 96%,transparent 96%);background-repeat:no-repeat;background-size:0% 100%;transition:background-size .65s linear;transition-delay:0s}
.highlight-sweep.is-highlighted .highlight-line{background-size:100% 100%;transition-delay:calc(.12s + var(--highlight-line-index)*.65s)}
.comparison-scroll{position:relative;margin:35px 0}
.case-page .comparison-pin{margin:0;text-align:center}
.comparison-scroll.is-scroll-linked .comparison-pin{position:sticky;top:var(--pin-top,100px)}
.comparison-panel{width:min(100%,420px,max(160px,calc((100svh - 270px)*.6631)));margin-inline:auto}
.comparison-labels{display:flex;justify-content:space-between;gap:20px;margin-bottom:12px;font:500 11px/1.4 var(--case-mono);letter-spacing:.065em;text-transform:uppercase;color:#7a7186}
.comparison-stage{position:relative;width:100%;aspect-ratio:744/1122;overflow:hidden;border-radius:12px;background:#fff;isolation:isolate}
.case-page .comparison-stage img{display:block;width:100%;height:100%;object-fit:contain;border-radius:0}
.case-page .comparison-stage .comparison-after{position:absolute;inset:0;clip-path:inset(0 0 0 calc(100% - var(--after-progress)))}
.comparison-divider{position:absolute;top:0;bottom:0;left:calc(100% - var(--after-progress));width:1px;transform:translateX(-50%);background:#7661e9;pointer-events:none}
.comparison-control{display:flex;flex-direction:column;gap:6px;margin-top:14px;font-size:12px;line-height:1.5;color:#7c7588}
.comparison-control input{display:block;appearance:none;-webkit-appearance:none;background:transparent;width:100%;height:28px;margin:0;cursor:ew-resize}
.comparison-control input::-webkit-slider-runnable-track{height:2px;border-radius:2px;background:linear-gradient(to right,var(--case-accent) 0 var(--slider-progress,50%),#ddd9e5 var(--slider-progress,50%) 100%)}
.comparison-control input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:10px;height:10px;border:0;border-radius:50%;background:var(--case-accent);margin-top:-4px}
.comparison-control input::-moz-range-track{height:2px;border-radius:2px;background:#ddd9e5}
.comparison-control input::-moz-range-progress{height:2px;background:var(--case-accent)}
.comparison-control input::-moz-range-thumb{width:10px;height:10px;border:0;border-radius:50%;background:var(--case-accent)}
.comparison-control input:focus-visible{outline:2px solid var(--case-accent);outline-offset:3px;border-radius:8px}
.case-page .comparison-pin figcaption{margin-top:10px}
@media(prefers-reduced-motion:reduce){
 .scroll-reveal,.scroll-reveal:not(.is-revealed),.scroll-reveal.reveal-scale:not(.is-revealed){opacity:1;transform:none;transition:none}
 .highlight-sweep .highlight-line{background-size:100% 100%;transition:none}
 .comparison-scroll.is-scroll-linked .comparison-pin{position:static}
}