.case-page{overflow:clip}.case-title{position:relative;margin:176px 0 256px calc((100% - 48px)/3 + 24px)}.case-title h1{font:400 clamp(48px,4.79vw,82.777px)/.973 'DM Serif Display',serif;width:auto;max-width:672px}.case-title h1 span{color:var(--accent)}.case-back{position:absolute;right:calc(100% + 40px);top:13px;width:56px;height:56px;border:2px solid var(--accent);border-radius:100px;color:var(--accent);font:36px/50px Arial;text-align:center}.case-back:hover{text-decoration:none!important}.case-intro{display:grid;grid-template-columns:1fr 2fr;gap:24px;align-items:start}.case-context{padding-top:88px;max-width:410px}.case-copy h2{font:700 28px/32px Inter,sans-serif;margin:0 0 14px}.case-copy p{font:400 20px/24px Inter,sans-serif;margin:0}.case-copy p+p{margin-top:28px}.case-context .case-copy+.case-copy{margin-top:64px}.case-panel{background:var(--black);border-radius:40px}.case-comparison{min-height:800px;padding:48px 10% 64px;display:flex;gap:10%;justify-content:center;align-items:start}.case-comparison figure{margin:0;width:40%;max-width:300px}.case-comparison figcaption{color:white;font-size:20px;line-height:24px;font-weight:700;margin-bottom:24px}.case-comparison img{display:block;width:100%;height:auto}.phone-strip{margin-top:144px;padding:72px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) .5fr;gap:56px;align-items:start}.phone-strip img{width:100%;height:auto;display:block}.phone-strip p{color:white;font-size:20px;line-height:24px;margin-top:12px}.case-research{display:grid;grid-template-columns:1fr 1fr;gap:80px;margin:80px 0 120px calc((100% - 48px)/3 + 24px)}.case-research .case-copy{max-width:410px}.case-solution{display:grid;grid-template-columns:2fr 1fr;gap:80px;align-items:center}.case-solution>.case-copy{max-width:410px}.solution-diagram{margin-left:11%;background:var(--black);border-radius:40px;display:flex;gap:36px;justify-content:center;padding:50px 8% 0;overflow:hidden;aspect-ratio:898/713;color:white}.diagram-notes{background:#ffffff1a;border-radius:24px 24px 0 0;padding:24px 18px;width:51%;font-size:clamp(8px,.712vw,12.3px);line-height:1.19;flex-shrink:0}.diagram-notes>div+div{margin-top:12px}.diagram-notes b{font-weight:500;display:block;margin-bottom:4px}.wire-phone{position:relative;width:49%;align-self:flex-start;aspect-ratio:288/624;background:#ffffff1a;border-radius:31px;padding:12px;overflow:hidden;font-size:clamp(7px,.71vw,12px)}.wire-status{display:flex;justify-content:space-between;margin:0 8px 24px;font-size:1.1em}.wire-search{height:22px;background:#ffffff1a;border-radius:8px;margin-bottom:16px}.wire-promos{display:grid;grid-template-columns:1fr 1fr;gap:8px}.wire-promos>div{background:#ffffff33;border-radius:12px;padding:10px;min-height:72px}.wire-promos>div:last-child{grid-column:1/-1;min-height:100px}.wire-tabs{margin:14px 0}.wire-phone h3{font-size:1.1em;font-weight:500}.wire-products{display:grid;grid-template-columns:1fr 1fr;gap:8px}.wire-products i{background:#ffffff20;border-radius:12px;aspect-ratio:1}.wire-story{padding:20px 0}.wire-home{position:absolute;bottom:8px;left:32%;width:36%;height:4px;background:white;border-radius:4px}.case-decisions{display:grid;grid-template-columns:410px 410px;gap:74px;margin:128px 0 112px}.case-decisions>.case-copy+ .case-copy,.case-impact>.case-copy:nth-child(2){padding-top:46px}.after-strip{margin-top:0;grid-template-columns:repeat(4,minmax(0,1fr));padding:72px 12.75%;gap:56px}.case-impact{display:grid;grid-template-columns:1fr 1fr 1fr;gap:64px;margin-top:112px}.case-impact .case-copy{max-width:410px}.case-related{margin-top:160px}.case-related>h2{font:400 clamp(48px,4.79vw,82.777px)/.973 'DM Serif Display',serif;margin-bottom:64px}.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.related-placeholder{background:var(--black);border-radius:40px;aspect-ratio:528/601;margin-bottom:24px}.related-grid .case-copy p{max-width:410px}.project-meta{font-size:20px;line-height:24px;margin-top:24px}.case-page .case-footer{margin-top:144px;justify-content:flex-end}.case-footer .footer-links{padding-top:0}
@media(max-width:1300px){.case-title{margin-bottom:128px}.case-comparison{min-height:0;padding:48px 8%}.case-context{padding-top:0}.phone-strip{padding:48px 32px;gap:24px}.case-research{gap:40px}.case-solution{gap:40px}.case-decisions{grid-template-columns:1fr 1fr;max-width:850px;gap:48px}.case-impact{gap:32px}.solution-diagram{margin-left:0;padding:32px 5% 0;gap:20px}.after-strip{padding:48px 10%}}
@media(max-width:1000px){.case-title{margin:112px 0 80px 80px}.case-title h1{max-width:620px}.case-back{right:calc(100% + 24px);top:0}.case-intro{display:flex;flex-direction:column;gap:64px}.case-comparison{order:-1;width:100%;padding:48px 10%}.case-context{display:grid;grid-template-columns:1fr 1fr;gap:40px;max-width:none}.case-context .case-copy+.case-copy{margin-top:0}.phone-strip{margin-top:80px;grid-template-columns:repeat(4,1fr);gap:20px}.before-strip p{grid-column:1/-1;margin:0}.case-research{margin:64px 0 80px}.case-solution{display:flex;flex-direction:column;gap:40px;align-items:stretch}.case-solution>.case-copy{max-width:650px}.solution-diagram{max-width:898px;padding:40px 12% 0;gap:32px}.diagram-notes{font-size:12px}.wire-phone{font-size:12px}.case-decisions{margin:80px 0}.case-impact{grid-template-columns:1fr 1fr;margin-top:64px;gap:40px}.case-impact>.case-copy:last-child{grid-column:1/-1;max-width:650px}.case-related{margin-top:96px}.related-grid{grid-template-columns:1fr 1fr}.related-grid article:last-child{display:none}.case-page .case-footer{display:flex;margin-top:96px}.case-copy p{font-size:20px;line-height:26px}}
@media(max-width:650px){.case-title{margin:72px 0 48px;padding-top:64px}.case-title h1{font-size:48px;line-height:48px;width:auto}.case-back{left:0;right:auto;top:0;width:40px;height:40px;font-size:28px;line-height:34px}.case-panel,.solution-diagram,.related-placeholder{border-radius:24px}.case-comparison{padding:32px 20px;gap:20px}.case-comparison figure{width:50%}.case-comparison figcaption{font-size:16px;line-height:20px;margin-bottom:16px}.case-context,.case-research,.case-decisions,.case-impact{display:flex;flex-direction:column;gap:40px}.case-intro{gap:48px}.case-copy h2{font-size:26px;line-height:30px}.case-copy p{font-size:18px;line-height:24px}.case-copy p+p{margin-top:24px}.phone-strip{grid-template-columns:1fr 1fr;padding:32px 24px;gap:24px;margin-top:64px}.case-research{margin:48px 0 64px}.solution-diagram{padding:24px 5% 0;gap:12px;aspect-ratio:898/760}.diagram-notes{padding:12px 8px;font-size:7px;border-radius:12px 12px 0 0}.diagram-notes>div+div{margin-top:7px}.wire-phone{font-size:7px;border-radius:16px;padding:8px}.wire-status{margin:0 0 12px}.wire-search{height:12px;margin-bottom:8px}.wire-promos{gap:4px}.wire-promos>div{min-height:35px;padding:5px;border-radius:6px}.wire-promos>div:last-child{min-height:58px}.wire-tabs{margin:8px 0}.wire-phone h3{margin:8px 0}.wire-products{gap:4px}.wire-products i{border-radius:6px}.case-decisions{margin:64px 0}.case-decisions>.case-copy+.case-copy,.case-impact>.case-copy:nth-child(2){padding-top:0}.after-strip{margin-top:0}.case-impact{margin-top:48px}.case-related{margin-top:80px}.case-related>h2{font-size:48px;line-height:48px;margin-bottom:32px}.related-grid{grid-template-columns:1fr;gap:48px}.related-placeholder{aspect-ratio:1}.case-page .case-footer{margin-top:80px}.case-footer .footer-links{width:100%}}
@media(min-width:1301px){.case-title{margin-bottom:104px}.case-intro{grid-template-columns:calc((100% - 48px)/3) 1fr}.case-comparison{min-height:800px;padding:46px 10% 56px}.case-comparison figure{max-width:297px}}
@media(max-width:1000px){.related-grid article:last-child{display:block}}
.diagram-note{display:flex;gap:1em}.diagram-note>span{font-size:1.5em}.diagram-note>div{flex:1;min-width:0}.diagram-note b{margin-bottom:.75em;font-weight:400}.wire-status-icons{display:flex;gap:3px;align-items:center}.wire-battery{position:relative;display:inline-flex}.wire-battery img:last-child{position:absolute;left:1.5px;top:1.5px}.wire-tabs{display:flex;align-items:center;gap:4px}.wire-tabs img{flex:none}
/* Figma arrow states: 56px circle → 133px Back pill. Grow away from the title. */
.case-back{width:56px;height:56px;border-width:3px;display:flex;align-items:center;justify-content:flex-start;overflow:hidden;text-align:left;line-height:normal;transition:width .55s cubic-bezier(.34,1.56,.64,1);background:#f8f7f0}
.back-icon{position:absolute;left:13px;top:13px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;transform:rotate(180deg);transition:left .55s cubic-bezier(.34,1.56,.64,1)}
.back-label{position:absolute;left:53px;white-space:nowrap;font:700 20px/23px Inter,Arial,sans-serif;opacity:0;transform:translateX(-6px);transition:opacity .16s,transform .4s cubic-bezier(.34,1.56,.64,1)}
@media(hover:hover) and (pointer:fine){.case-back:hover{width:133px}.case-back:hover .back-icon{left:21px}.case-back:hover .back-label{opacity:1;transform:translateX(0)}}
.case-back:focus-visible{width:133px}.case-back:focus-visible .back-icon{left:21px}.case-back:focus-visible .back-label{opacity:1;transform:translateX(0)}
@media(max-width:650px){
 .case-title{padding-top:80px}
 .related-grid{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scroll-padding-inline:0;padding-bottom:16px;scrollbar-width:thin;scrollbar-color:var(--accent) transparent}
 .related-grid article{flex:0 0 86%;min-width:0;scroll-snap-align:start}
 .related-grid article:last-child{display:block}
 .related-grid:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
}
@media(prefers-reduced-motion:reduce){.case-back,.back-icon,.back-label{transition:none}}
/* Three fluid cards stay on one track; below 320px per card the track scrolls. */
.related-grid{display:flex;flex-wrap:nowrap;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scroll-padding-inline:0;padding-bottom:16px;scrollbar-width:thin;scrollbar-color:var(--accent) transparent}
.related-grid article,.related-grid article:last-child{display:block;flex:0 0 clamp(min(320px,86%),calc((100% - 48px)/3),528px);min-width:0;scroll-snap-align:start}
.related-grid .case-copy h2{font-size:24px;line-height:28px;margin-bottom:14px;color:var(--black)}
.related-grid .case-copy p{font-size:18px;line-height:22px}
.related-grid .project-meta{font-size:16px;line-height:21px;margin-top:16px;color:rgba(42,34,22,.8);opacity:.8}
.related-grid:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
/* Let sliding cards reach the screen edges while keeping the resting alignment. */
.related-grid{margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);scroll-padding-inline:var(--gutter);scrollbar-width:none;-ms-overflow-style:none}
.related-grid::-webkit-scrollbar{display:none;width:0;height:0}
/* Case Body is 20/24 in Figma; preserve the smaller mobile size and card styles. */
.case-copy p,.case-copy li{line-height:24px}
.related-grid .case-copy p{line-height:22px}
/* Reserve the expanded Back pill (including spring overshoot) inside page gutters. */
@media(min-width:651px){
 .case-title{margin-left:clamp(189px,calc(100vw - 1176px),552px)}
 .case-back{right:calc(100% + 24px);left:auto}
}
/* Touch users see the complete action without hover. */
@media(hover:none),(pointer:coarse),(max-width:650px){
 .case-back{width:133px}
 .case-back .back-icon{left:21px}
 .case-back .back-label{opacity:1;transform:none}
}
@media(max-width:650px){
 .case-title{margin-left:0;padding-top:80px}
 .case-back{left:0;right:auto;top:0}
}