/* Reference proportions with the portfolio's existing fonts and dark palette. */
:root{--case-width:1080px;--case-text-width:680px;--case-placeholder:#202020;--case-muted:#999;--case-rule:#ffffff14}
.home-page{width:min(897px,calc(100% - 35px));padding-bottom:96px}
.home-page .hero{width:100%;margin-left:0}
.home-page .products{width:100%;margin-left:0}
.home-page .product-grid{justify-content:space-between}
.solved{width:100%;margin-top:40px}
.case-cards{display:flex;flex-direction:column;gap:56px;margin-top:24px}
.case-card{display:block;border-radius:22px}
.image-placeholder{background:var(--case-placeholder)}
.case-card-preview{width:100%;aspect-ratio:897/528;border-radius:22px;object-fit:cover;transition:transform 180ms ease,background-color 180ms ease}
.case-card-caption{display:grid;grid-template-columns:1.12fr 1fr;gap:48px;padding-top:24px}
.case-company{display:flex;align-items:flex-start;gap:16px;min-width:0}
.case-company-logo{width:56px;height:56px;flex:none;border-radius:8px;object-fit:contain}
.case-company-copy{display:flex;flex-direction:column;gap:2px;min-width:0;font-size:14px;line-height:20px;color:var(--case-muted)}
.case-company-name{font-weight:600;color:var(--text)}
.case-card-copy h3{font-size:18px;font-weight:600;line-height:24.5px;letter-spacing:-.2px}
.case-card-copy>p{margin-top:6px;font-family:var(--font-story);font-size:16px;line-height:24px;color:var(--case-muted)}
body.case-active{min-height:100dvh}
#case-page{width:min(var(--case-width),calc(100% - 35px));margin:0 auto;padding-top:56px;padding-bottom:140px}
.case-study{font-family:var(--font-story);font-size:16px;line-height:24px;color:#d6d6d6}
.case-text{width:100%;max-width:var(--case-text-width);margin-left:auto;margin-right:auto}
.case-hero{display:flex;flex-direction:column;gap:10px;padding-bottom:18px}
.case-hero h1{font-family:var(--font-sans);color:var(--text);font-size:22px;font-weight:500;line-height:1.3;letter-spacing:-.35px}
.case-hero h1:focus{outline:none}
.case-meta{color:var(--case-muted);font-size:14px;line-height:20px}
.case-summary{margin-top:8px;margin-bottom:56px;font-family:var(--font-sans)}
.case-summary>div{display:grid;grid-template-columns:110px minmax(0,1fr);gap:10px;padding:11px 0;border-bottom:1px solid var(--case-rule)}
.case-summary>div:last-child{border-bottom:0}
.case-summary dt{color:var(--case-muted)}
.case-summary dd{color:#ddd}
.case-section,.case-intro{display:flex;flex-direction:column;gap:8px;margin-top:50px;min-width:0}
.case-intro{margin-top:28px}
.case-label{font-family:var(--font-sans);font-size:16px;line-height:24px;font-weight:400;color:var(--case-muted)}
.case-section-title,.case-subheading{font-family:var(--font-sans);font-size:16px;line-height:24px;font-weight:600;color:var(--text)}
.case-subheading:not(:first-child){margin-top:18px}
.case-paragraph{overflow-wrap:break-word}
.case-text strong{font-weight:600;color:var(--text)}
.case-text code{font-family:var(--font-mono);font-size:.875em;color:#eee;background:#ffffff0a;padding:2px 5px;border-radius:4px;overflow-wrap:anywhere}
.case-quote{border-left:2px solid #ffffff30;padding:4px 0 4px 20px;margin-top:12px;margin-bottom:12px;overflow-wrap:break-word}
.case-presentation{display:block;width:100%;aspect-ratio:16/9;border:1px solid var(--case-rule);border-radius:8px;background:#202020}
.case-paragraph+.case-label{margin-top:24px}
.case-figure{margin:20px auto;width:100%;max-width:680px;min-width:0}
.case-figure-wide{max-width:1080px}
.case-study>.case-figure{margin-top:0;margin-bottom:0}
.case-figure-image{display:block;width:100%;border-radius:8px;object-fit:contain}
.case-figure figcaption{max-width:680px;margin:8px auto 0;font-size:14px;line-height:20px;color:var(--case-muted)}
.case-results{list-style:none;padding:0;display:flex;flex-direction:column;gap:8px;margin-top:16px;margin-bottom:16px}
.case-results strong{color:var(--text);font-weight:600}
.case-results li>span{color:#bbb}
.case-list{padding-left:20px;display:flex;flex-direction:column;gap:5px;margin-top:8px;margin-bottom:8px}
.case-table-wrap{margin-top:16px;margin-bottom:16px;overflow-x:auto}
.case-table-wrap table{width:100%;border-collapse:collapse;text-align:left}
.case-table-wrap th{font-weight:400;color:var(--case-muted)}
.case-table-wrap td,.case-table-wrap th{padding:10px 12px 10px 0;border-bottom:1px solid var(--case-rule)}
.case-table-wrap td:first-child{font-family:var(--font-mono);font-size:13px}
.case-inline-link{text-decoration:underline;text-underline-offset:4px;transition:color 160ms ease}
.case-navigation{position:fixed;z-index:10;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;gap:12px;padding:34px 16px 30px;pointer-events:none;background:linear-gradient(transparent,#000 62%)}
.case-navigation a{display:flex;align-items:center;justify-content:center;height:40px;background:#1e1e1e;pointer-events:auto;border:1px solid #ffffff0d;transition:background-color 160ms ease,transform 160ms ease}
.case-nav-arrow{width:40px;border-radius:50%}
.case-nav-arrow:first-child img{transform:rotate(180deg)}
.case-nav-home{min-width:76px;padding:0 20px;border-radius:24px;font-size:14px;font-weight:500}
.case-navigation a:active{transform:scale(.96)}
@media(hover:hover){.case-card:hover .case-card-preview{transform:translateY(-2px);background-color:#262626}.case-navigation a:hover{background:#333}.case-inline-link:hover{color:#fff}}
.case-card:focus-visible .case-card-preview{background-color:#292929}
@media(max-width:760px){.case-card-caption{grid-template-columns:1fr;gap:16px;padding-top:16px}.case-company-logo{width:40px;height:40px;order:1;margin-left:auto}.case-company{gap:16px}.case-card-preview,.case-card{border-radius:16px}.case-card-copy h3{font-size:18px}}
@media(max-width:640px){.case-summary>div{grid-template-columns:1fr;gap:2px}.case-summary{margin-bottom:40px}.case-section{margin-top:50px}.case-navigation{padding-bottom:32px}}
@media(max-width:520px){
.home-page{width:calc(100% - 28px)}.case-cards{gap:44px}#case-page{width:calc(100% - 28px);padding-top:41px}.case-section{margin-top:52px}.case-hero h1{font-size:22px}.case-figure{margin-top:16px;margin-bottom:16px}.case-card-copy>p{font-size:15px;line-height:23px}}
@media(max-width:384px){.case-company-logo{width:36px;height:36px}.case-company-copy{font-size:13px}}
@media(prefers-reduced-motion:reduce){.case-card-preview,.case-navigation a,.case-inline-link{transition:none!important;transform:none!important}}