@font-face{font-family:'JetBrains Mono';src:url('assets/fonts/JetBrainsMono-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
.case-v2{font:300 17px/22px 'JetBrains Mono',monospace;--case-gap:32px;--case-space:150px;--footer-gap:1470px}
.case-v2 main{width:100%;overflow:clip}.case-v2 figure{margin:0}.case-v2 p,.case-v2 h1,.case-v2 h2,.case-v2 h3{margin:0}.case-v2 .copy,.case-v2 .note{letter-spacing:-.02em}.case-v2 .copy p+p{margin-top:22px}
.case-hero{height:26.927083vw;position:relative;overflow:hidden}.case-hero>img{width:100%;height:114.51%;object-fit:fill;object-position:top}
.case-meta{margin:15px 10px 0;display:grid;grid-template-columns:1fr 1fr;gap:10px;text-transform:uppercase;color:#0006}.case-meta>div{display:flex;justify-content:space-between;gap:20px}
.case-intro{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:176px 10px 0;min-height:264px;align-items:start}.case-intro h1{max-width:812px;font-size:76px;line-height:.95;font-weight:800;letter-spacing:-.02em;text-transform:uppercase}.intro-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.intro-summary h2{font-size:17px;line-height:22px;text-transform:uppercase;font-weight:700;margin-bottom:4px}.intro-summary p{letter-spacing:-.02em}
.case-block{position:relative;margin:0 10px var(--case-space);border-top:1px solid #000;display:grid;grid-template-columns:18.894737% 31.368421% minmax(0,1fr);padding-top:20px;align-items:start}.case-label{grid-column:1;text-transform:uppercase;white-space:nowrap}.case-title{grid-column:2;max-width:215px;font-size:17px;line-height:22px;font-weight:700;text-transform:uppercase}.case-content{grid-column:3;display:flex;flex-direction:column;gap:var(--case-gap);min-width:0}.case-content>*{flex-shrink:0}.case-v2 .accent{font-size:38px;line-height:44px;font-weight:700;letter-spacing:-.02em;text-transform:uppercase}.case-v2 .note{font-style:italic}.case-figure{min-width:0}.case-figure.wide{width:calc(200% + 10px);margin-left:calc(-100% - 10px)}.case-figure img{width:100%;height:auto;border-radius:var(--media-radius)}.case-figure .gallery-item{position:relative;overflow:hidden;border-radius:var(--media-radius)}.case-figure .rounded{border:1px solid #ebebeb;border-radius:var(--media-radius)}.case-figure figcaption{margin-top:8px;opacity:.4;font-size:17px;line-height:22px}.case-figure.wide figcaption{width:calc(50% - 5px);margin-left:auto}.case-figure video{border-radius:var(--media-radius);display:block;width:100%;height:auto;background:#fff}.concept-pair{position:relative}.concept-first{position:absolute;right:calc(100% + 10px);top:0;width:100%}.concept-second{width:100%}.case-results h3{font-size:17px;line-height:22px;text-transform:uppercase;font-weight:700;margin-bottom:4px}.case-results>.copy{padding:16px 0;border-top:1px solid #000;text-transform:uppercase}.case-results>.copy:last-child{padding-bottom:0}.case-v2 #results{margin-bottom:0}.case-v2 .site-footer{font-weight:700}.case-v2 .expand-hint{font-size:14px;line-height:20px;padding:9px 12px;right:12px;bottom:12px}
@media(min-width:1921px){.case-v2{font-size:clamp(17px,.8854167vw,23px);line-height:1.294}.case-v2 .accent{font-size:1.979167vw;line-height:1.1579}.case-intro h1{font-size:3.958333vw;max-width:43vw}.case-title{max-width:12vw}}
@media(min-width:1024px) and (max-width:1700px){.case-v2{font-size:14px;line-height:18px;--case-gap:28px;--case-space:120px;--footer-gap:900px}.case-meta{font-size:14px;line-height:18px}.case-intro{margin-top:130px;min-height:240px}.case-intro h1{font-size:58px;max-width:620px}.intro-summary{gap:18px}.intro-summary h2,.case-title,.case-results h3{font-size:14px;line-height:18px}.case-title{max-width:180px}.case-v2 .accent{font-size:30px;line-height:35px}.case-figure figcaption{font-size:14px;line-height:18px}.case-v2 .copy p+p{margin-top:18px}}
@media(max-width:1023px){.case-v2{font-size:15px;line-height:21px;--case-gap:24px;--case-space:72px;--footer-gap:180px}.case-hero{padding-top:33px;height:40vw;min-height:200px}.case-hero>img{height:100%;object-fit:cover}.case-meta{font-size:10px;line-height:15px;margin:10px 6px 0;grid-template-columns:1fr 3fr}.case-meta>div{gap:8px}.case-intro{grid-template-columns:1fr;margin:64px 6px 64px;gap:32px;min-height:0}.case-intro h1{font-size:clamp(38px,7vw,65px);max-width:700px}.intro-summary{gap:16px}.intro-summary h2{font-size:13px;line-height:18px}.case-block{margin-inline:6px;grid-template-columns:1fr;padding-top:14px;gap:16px}.case-label{grid-column:1;font-size:12px;line-height:17px}.case-title{grid-column:1;max-width:420px;font-size:20px;line-height:25px}.case-content{grid-column:1;margin-top:12px}.case-v2 .accent{font-size:27px;line-height:32px}.case-figure.wide{width:100%;margin-left:0}.case-figure.wide figcaption{width:100%;margin-left:0}.case-figure figcaption{font-size:12px;line-height:17px}.concept-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}.concept-first{position:static;width:100%}.case-v2 .copy p+p{margin-top:21px}}
@media(max-width:540px){.intro-summary{grid-template-columns:1fr;gap:20px}.case-meta>div{flex-direction:column;gap:2px;align-items:flex-end}.concept-pair{grid-template-columns:1fr;gap:24px}.case-v2 .accent{font-size:25px;line-height:30px}}

.case-v2 .case-figure.wide img{aspect-ratio:1900/1050;object-fit:cover}.case-v2 .case-figure.half img{aspect-ratio:1440/866;object-fit:cover}
/* Keep the desktop canvas equal to the Figma width without a scrollbar gutter. */
html:has(.case-v2){scrollbar-width:none}
html:has(.case-v2)::-webkit-scrollbar{display:none}
.case-v2 .note{font-synthesis:style}
.case-v2 #context{margin-bottom:110px}
.case-v2 #research{margin-bottom:135px}
.case-v2 .case-hero .site-header{padding-top:10px}
@media(min-width:1701px){.case-v2{--footer-gap:3126px}}
@media(max-width:1023px){.case-v2 #context,.case-v2 #research{margin-bottom:72px}}
@media(min-width:1701px){.case-v2 #research{margin-bottom:133px}.case-v2 #concepts{margin-bottom:123px}.case-v2 #solution{margin-bottom:293px}.case-v2{--footer-gap:3121px}}



/* Fixed desktop backdrop; intrinsic media ratio and responsive mobile framing. */




.case-figure video{display:block;width:100%;height:auto;max-width:100%;border-radius:var(--media-radius);box-shadow:none}

/* Consistent section spacing and subtle dividers. */
.case-v2 .case-block{margin-bottom:130px;border-top-color:#d9d9d9}
.case-v2 #context,.case-v2 #research,.case-v2 #concepts,.case-v2 #solution{margin-bottom:130px}
.case-v2 .case-results>.copy{border-top-color:#d9d9d9}
.case-v2 .case-intro{min-height:0;margin-bottom:130px}
.case-v2 #results{margin-bottom:0}

/* Results follow the last solution paragraph with a 130px gap. */
.case-v2 #solution{min-height:0;height:auto;margin-bottom:130px}
/* Match the footer gap to the spacing between case sections. */
.case-v2{--footer-gap:130px}

/* Keep secondary case typography within the 17px reference size. */
.case-v2{font-size:17px;line-height:22px}
.case-v2 .intro-summary h2,.case-v2 .case-title,.case-v2 .case-results h3{font-size:17px;line-height:22px;font-weight:400}
@media(max-width:1023px){.case-v2{font-size:15px;line-height:21px}.case-v2 .case-title{font-size:17px;line-height:22px}}

/* Section headings in the middle column retain bold emphasis. */
.case-v2 .case-title{font-weight:700}

/* Result labels use the same bold hierarchy as section headings. */
.case-v2 .case-results h3{font-weight:700}

/* Cap summary columns; distribute surplus width between them. */
@media(min-width:541px){.intro-summary{grid-template-columns:repeat(3,minmax(0,280px));justify-content:space-between}}

/* First-screen layout follows the image ratio and available viewport height. */
.case-v2 .case-opening{display:grid;grid-template-rows:auto auto var(--opening-spacer,100px) auto;padding-bottom:10px;margin-bottom:130px}
.case-v2 .case-hero{height:auto;min-height:0}
.case-v2 .case-hero>img{width:100%;height:auto;object-fit:contain}
.case-v2 .case-meta{margin-top:10px}
.case-v2 .case-intro{grid-row:4;margin:0 10px;min-height:0}
@media(max-width:1023px){.case-v2 .case-intro{margin-inline:6px}}

/* Match the homepage light text while preserving bold headings and accents. */
.case-v2 .intro-summary h2{font-weight:700}

/* Edge-to-edge cover images have square outer corners. */
.case-hero,.case-hero>img,.hero,.hero>img{border-radius:0}

/* Two uncaptioned details directly below each strategy video. */
.case-demo-group{--detail-gap:10px;display:flex;flex-direction:column;gap:var(--detail-gap);min-width:0}
.case-media-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--detail-gap);width:calc(200% + 10px);margin-left:calc(-100% - 10px)}
.case-media-pair img{width:100%;height:auto;aspect-ratio:auto;object-fit:contain}
@media(max-width:1023px){.case-media-pair{grid-template-columns:1fr;width:100%;margin-left:0}}