.case-facts{display:flex;flex-wrap:wrap;gap:20px 48px;margin:0}
.case-facts dt{font-size:36px;font-weight:400;line-height:42px;letter-spacing:-.01em;white-space:nowrap}
.case-facts dd{margin:1px 0 0;font-size:14px;line-height:20px}
.case-hero{grid-column:1/-1;grid-row:1}
.case-hero .ar-title mark{background:none;padding:0;margin:0;color:inherit}
@media (min-width:561px){
  .case-page{padding-top:11px}
  .case-hero{position:relative;display:flex;min-height:clamp(560px,calc(100vh - 271px),820px);border-radius:var(--r);overflow:hidden;color:#fff;background:#1d2b31}
  .case-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .case-hero::before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(105deg,rgba(10,40,50,.74) 0%,rgba(10,50,60,.48) 40%,rgba(8,40,55,.14) 70%,rgba(8,35,50,.2) 100%)}
  .case-hero::after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(5,20,28,.6) 0%,rgba(5,20,28,0) 45%)}
  .case-hero-in{position:relative;z-index:2;flex:1;min-width:0;display:flex;flex-direction:column;padding:48px}
  .case-hero .ar-meta{margin:0 0 20px;color:rgba(255,255,255,.8)}
  .case-hero .ar-head-text{max-width:60%;padding:0}
  .case-hero .ar-title{color:#fff;font-size:clamp(40px,min(4.2vw,7.4vh),76px);line-height:1.08}
  .case-hero .ar-lead{max-width:30em;margin-top:20px;color:rgba(255,255,255,.88);font-size:clamp(18px,1.4vw,22px);line-height:1.45;text-wrap:balance}
  .case-hero .case-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;max-width:60%;margin-top:auto;padding-top:48px}
  .case-hero .case-facts>div{padding-top:16px;border-top:1px solid rgba(255,255,255,.35)}
  .case-hero .case-facts dd{margin-top:4px;color:rgba(255,255,255,.78)}
}
@media (min-width:561px) and (max-width:1024px){
  .case-hero{min-height:520px}
  .case-hero-in{padding:32px}
  .case-hero .ar-head-text{max-width:80%}
  .case-hero .ar-title{font-size:36px}
  .case-hero .case-facts{max-width:none;gap:20px}
}
@media (min-width:1025px){
  .case-page>.case-client{grid-column:3;grid-row:3;align-self:start;margin-top:48px}
  .case-page .ar-body{grid-row:3/6}
  .ar-page.case-page{grid-template-rows:auto auto auto auto 1fr}
}
@media (max-width:1024px){.case-page>.case-client{grid-column:1/-1;margin-top:40px}}
@media (min-width:561px) and (max-width:1024px){
  .case-page>.case-client{max-width:820px}
  .case-page>.case-client .case-client-meta{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 32px}
}
.case-client{border:1px solid var(--line);border-radius:var(--r);padding:28px 32px}
.case-client-logo{display:block;width:auto;height:32px;max-width:180px}
.case-client-meta{display:grid;gap:12px;margin:20px 0 0}
.case-client-meta dt{font-size:12px;font-weight:500;line-height:16px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-2)}
.case-client-meta dd{margin:2px 0 0;font-size:16px;line-height:22px;color:var(--text)}
.case-client-meta a{border-bottom:1px solid rgba(17,17,17,.25);transition:border-color .25s,color .25s}
@media (hover:hover){.case-client-meta a:hover{color:var(--accent);border-color:currentColor}}
.case-client-ext{display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:14px;margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.case-client-ext-mark{grid-row:1/3;width:24px;height:auto;margin-top:2px}
.case-client-ext-title,.case-client-ext-sub{grid-column:2}
.case-client-ext-title{display:flex;align-items:center;gap:6px;font-size:16px;font-weight:500;line-height:22px;color:var(--text);transition:color .25s}
.case-client-ext-title svg{flex:none;color:var(--text-2);transition:color .25s,transform .25s}
.case-client-ext-sub{display:block;margin-top:2px;font-size:13px;line-height:18px;color:var(--text-2)}
@media (hover:hover){.case-client-ext:hover .case-client-ext-title,.case-client-ext:hover .case-client-ext-title svg{color:var(--accent)}.case-client-ext:hover .case-client-ext-title svg{transform:translate(2px,-2px)}}
@media (min-width:1025px){
  .case-client-meta{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 24px}
}
.case-crumbs a{border-bottom:0}
@media (hover:hover){.case-hero .case-crumbs a:hover{color:#fff}}
@media (hover:hover) and (max-width:560px){.case-hero .case-crumbs a:hover{color:var(--accent)}}
.case-cta .btn{background:var(--dark);border:1px solid var(--dark);color:#fff}
@media (hover:hover){.case-cta .btn:hover{background:#333;border-color:#333}}
.case-more{margin-top:72px;padding-bottom:64px}
.case-more .container::before{content:'';display:block;height:1px;margin-bottom:48px;background:var(--line)}
.case-more-title{margin:0 0 32px;font-size:28px;font-weight:400;line-height:36px}
.case-more-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:32px}
.case-more-head .case-more-title{margin:0}
.case-more-head .cases-nav{margin-bottom:-7px}
.case-more .cases-row{margin-bottom:0}
.case-more .cases-overflow{margin:-2px 0;padding:2px 0}
@media (max-width:1024px){
  .case-more{padding-bottom:48px}
}
@media (max-width:560px){
  .case-hero{display:grid;grid-template-columns:minmax(0,1fr);margin:0 calc(-1 * var(--px))}
  .case-hero-in{display:contents}
  .case-hero .ar-meta{grid-row:1;margin-left:var(--px);margin-right:var(--px)}
  .case-hero .ar-head-text{grid-row:2;margin:0 var(--px)}
  .case-hero-img{grid-row:3;grid-column:1;display:block;width:100%;height:clamp(400px,calc(100svh - 320px),560px);margin-top:28px;object-fit:cover}
  .case-hero .case-facts{grid-row:3;grid-column:1;align-self:end;display:flex;flex-wrap:nowrap;gap:12px;padding:96px var(--px) 20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--px);overscroll-behavior-x:contain;scrollbar-width:none;color:#fff;
    background:linear-gradient(to top,rgba(5,15,20,.8) 0%,rgba(5,15,20,.5) 50%,rgba(5,15,20,0) 100%)}
  .case-hero .case-facts::-webkit-scrollbar{display:none}
  .case-hero .case-facts>div{flex:1 0 100px;scroll-snap-align:start}
  .case-hero .case-facts dt{line-height:26px}
  .case-hero .case-facts dd{margin-top:2px;font-size:12px;line-height:16px;color:rgba(255,255,255,.8)}
  .case-page>.case-client{margin-top:24px}
  .case-page>.case-client .case-client-meta{grid-template-columns:minmax(min-content,1fr) fit-content(60%)}
  .case-facts dt{font-size:28px;line-height:34px}
  .case-more{margin-top:56px;padding-bottom:40px}
  .case-more .container::before{margin-bottom:36px}
  .case-more-title{margin-bottom:24px;font-size:24px;line-height:32px}
}
@media (min-width:1025px){
  .ar-page.case-page .ar-aside{grid-row:4/6;display:flex;flex-direction:column;margin-top:24px}
  .case-page .ar-rail{flex:1 1 auto}
}
@media (min-width:1025px){
  .case-product{margin-top:24px}
  .case-product .dir-card{display:flex;flex-direction:column;padding:24px}
  .case-product .dir-card>.dir-media--art,.case-product .dir-card>.dir-media--art:last-child{display:block;align-self:stretch;width:100%;margin:24px 0 0;aspect-ratio:520/240}
  .case-product .dir-card>.dir-text{padding-top:0}
  .case-product .hub-card-title{font-size:24px;line-height:30px}
  .case-product .hub-card-desc{font-size:16px;line-height:22px}
  .case-product .dir-foot{padding-top:16px}
}
@media (max-width:1024px){
  .case-page .ar-rail{display:block;margin-bottom:0}
  .case-page .ar-toc{display:none}
  .case-product{margin-top:64px}
  .case-page .ar-sub-box{margin-top:24px}
}
@media (max-width:560px){.case-product{margin-top:48px}}
.case-product .dir-card::before{display:none}
.case-product .dir-foot{padding-right:0}
@media (min-width:1025px),(max-width:560px){
  .case-product .dir-media--art:not(:empty) + .dir-foot .hub-card-metrics{border-top:0;padding-top:0}
}
@media (min-width:1025px){.case-product .dir-media--art:not(:empty) + .dir-foot{padding-top:24px}}
.case-product .dir-media--art:empty{display:none}
.case-product .dir-card:has(> .dir-media--art:empty){grid-template-columns:minmax(0,1fr)}
.case-product .dir-card + .dir-card{margin-top:16px}
.case-product .dir-card{grid-template-rows:none}
@media (min-width:1025px){
  .case-page .ar-rail{margin-bottom:0}
  .case-stick{position:sticky;top:96px}
  .case-stick.is-static{position:static}
  .case-page .case-stick .ar-toc{position:static}
  .case-page .ar-aside > .ar-sub-box{position:static;margin-top:40px}
}
@media (max-width:1024px){.case-product{max-width:none}}
@media (min-width:1025px){
  .case-page{grid-template-columns:minmax(0,1fr) var(--ar-gap) var(--case-side,400px)}
  .case-product,.case-page .ar-sub-box{max-width:none}
  .case-page .ar-toc{max-width:calc(100% + 20px)}
}
@media (min-width:1025px) and (max-width:1280px){
  .case-page{--ar-gap:clamp(40px,calc(100vw - 1180px),64px);--case-side:clamp(300px,calc(300px + (100vw - 1025px) * .4),400px);column-gap:0}
  .case-page .ar-body{grid-column:1;max-width:none}
  .ar-page.case-page .ar-aside{grid-column:3;max-width:none}
  .case-page .ar-rail{display:block}
  .case-page .ar-aside > .ar-sub-box{grid-template-columns:minmax(0,1fr);gap:20px;align-items:normal;padding:24px}
  .case-page .ar-sub-title{font-size:20px;line-height:26px}
  .case-page .ar-sub-text{margin-top:8px;font-size:14px;line-height:20px}
}
.case-page .ar-body > p:first-child{font-size:28px;line-height:38px;letter-spacing:-.005em;color:var(--text)}
@media (max-width:1024px){.case-page .ar-body > p:first-child{font-size:26px;line-height:36px}}
@media (max-width:560px){.case-page .ar-body > p:first-child{font-size:20px;line-height:30px}}
.case-page .ar-body > :is(h2,h3){margin-top:36px;font-size:32px;font-weight:400;line-height:40px;letter-spacing:-.01em}
.case-page .ar-body > :is(h2,h3):first-child{margin-top:0}
.case-page .ar-body > :is(h2,h3)+*{margin-top:16px}
@media (max-width:1024px){.case-page .ar-body > :is(h2,h3){margin-top:32px;font-size:28px;line-height:36px}}
@media (max-width:560px){.case-page .ar-body > :is(h2,h3){margin-top:28px;font-size:22px;line-height:28px}.case-page .ar-body > :is(h2,h3)+*{margin-top:12px}}