/* UX/UI case study page */
.subnav{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.subnav a{border:1px solid var(--line);border-radius:999px;padding:10px 20px;font-weight:600;text-decoration:none;background:var(--surface);transition:border-color .2s,color .2s}
.subnav a:hover{border-color:var(--accent-text);color:var(--accent-text)}
.crumb{margin:0 0 14px;color:var(--muted);font-size:.95rem}
.crumb a{color:var(--accent-text);text-decoration:none}
.crumb a:hover{text-decoration:underline}

.cases{padding:clamp(48px,8vw,104px) 0 0;border-top:1px solid var(--line);margin-top:clamp(32px,5vw,64px)}
.case{margin-top:clamp(32px,5vw,56px);padding:clamp(22px,3vw,40px);border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface);box-shadow:var(--sh-1)}
.case-head h2{font-size:clamp(1.5rem,3vw,2.2rem);font-weight:700}
.case-head .for{margin:6px 0 0;color:var(--accent-text);font-weight:600}
.case-body{display:grid;grid-template-columns:5fr 7fr;gap:clamp(20px,4vw,48px);margin-top:24px;align-items:start}
.case-cover{margin:0}
.case-cover img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:14px;border:1px solid var(--line)}
.case-cover figcaption,.persona figcaption,.case-extra figcaption{margin-top:8px;color:var(--muted);font-size:.9rem}
.case-text{display:grid;grid-template-columns:1fr 1fr;gap:22px 28px}
.case-text .blk:nth-child(n+3){grid-column:span 2}
.blk h3{margin:0 0 6px;font:700 .95rem var(--display);color:var(--accent-text)}
.blk p{margin:0;color:var(--muted)}
.blk ul{margin:0;padding:0;list-style:none;display:grid;gap:8px;color:var(--muted)}
.blk li{padding-left:20px;position:relative}
.blk li::before{content:"";position:absolute;left:0;top:.7em;width:10px;height:2px;background:var(--accent)}
.case-extra{margin-top:28px}
.case-extra h3{margin:0 0 12px;font:700 .95rem var(--display)}
.strip{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.strip figure{margin:0}
.strip img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:12px;border:1px solid var(--line)}
.case-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-top:28px;padding-top:22px;border-top:1px solid var(--line)}
.persona{margin:0;display:flex;align-items:center;gap:14px}
.persona img{width:84px;height:84px;object-fit:cover;object-position:35% 30%;border-radius:50%;border:1px solid var(--line)}
.persona figcaption{margin:0}
.persona b{display:block;color:var(--ink)}
@media (max-width:900px){.case-body{grid-template-columns:1fr}.strip{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.case-text{grid-template-columns:1fr}.case-text .blk:nth-child(n+3){grid-column:auto}}


/* "Open the example site" buttons: a blue fill sweeps in from the left, the arrow springs out */
.case-foot .btn{position:relative;overflow:hidden;isolation:isolate;transition:transform .45s var(--ease-out-expo),color .25s,border-color .25s,box-shadow .45s var(--ease-out-expo)}
.case-foot .btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--accent);transform:scaleX(0);transform-origin:left center;transition:transform .55s var(--ease-out-expo)}
.case-foot .btn .arrow{transition:transform .5s var(--ease-out-expo),background-color .25s}
.case-foot .btn:hover,.case-foot .btn:focus-visible{color:var(--on-accent);border-color:var(--accent);transform:translateY(-2px);box-shadow:0 10px 24px -14px rgba(0,0,0,.55)}
.case-foot .btn:hover::before,.case-foot .btn:focus-visible::before{transform:scaleX(1)}
.case-foot .btn:hover .arrow,.case-foot .btn:focus-visible .arrow{transform:translateX(5px);background-color:var(--on-accent)}
.case-foot .btn:active{transform:translateY(0) scale(.98)}
@media (prefers-reduced-motion:reduce){
  .case-foot .btn,.case-foot .btn:hover,.case-foot .btn:focus-visible,.case-foot .btn:active{transform:none;transition:color .1s,border-color .1s}
  .case-foot .btn::before{transform:none;opacity:0;transition:opacity .1s}
  .case-foot .btn:hover::before,.case-foot .btn:focus-visible::before{opacity:1}
  .case-foot .btn .arrow,.case-foot .btn:hover .arrow{transform:none;transition:background-color .1s}
}