/* "Other Projects" ticker + black footer for the hand-built project pages.
   Mirrors the Framer section on the original project pages (bankly-web etc). */
.op-wrap{position:relative;z-index:1;will-change:transform;margin-top:120px}
.op-wrap.op-slide::after{content:"";position:absolute;left:0;right:0;top:100%;height:var(--op-gap,0);background:#000}
.op{position:relative;background:#000;min-height:90vh;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.op-head{width:100%;max-width:1200px;margin:0 auto 90px;padding:0;box-sizing:border-box}
.op-head h2{margin:0;font-family:Poppins,sans-serif;font-weight:600;font-size:64px;line-height:68px;letter-spacing:-1.5px;color:#fff}
.op-head h2 span{color:#8fd45b}
.op-track{display:flex;gap:24px;width:max-content;will-change:transform}
.op-card{position:relative;flex:none;width:400px;height:400px;border-radius:24px;overflow:hidden;display:block;background:#111;color:#fff;text-decoration:none}
.op-card img{display:block;width:100%;height:100%;object-fit:cover;transition:filter .3s}
.op-hover{position:absolute;inset:0;background:rgba(255,255,255,.18);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);opacity:0;transition:opacity .3s;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}
.op-name{font-family:Inter,sans-serif;font-weight:600;font-size:18px;line-height:27px;color:#fff;white-space:nowrap}
.op-arrow{width:40px;height:40px;border-radius:99px;background:#8fd45b;display:grid;place-items:center}
.op-arrow svg{width:18px;height:18px}
.op-strip{display:none}
@media (hover:hover) and (min-width:1200px){.op-card:hover img{filter:grayscale(1)}.op-card:hover .op-hover{opacity:1}}
.op-foot{background:#000;height:72px;position:relative;z-index:1;max-width:none!important;width:100%!important;margin:0!important;border:0!important}
.op-foot div{max-width:1200px;height:100%;margin:0 auto;display:flex;align-items:center;justify-content:flex-end;padding-right:64px;box-sizing:border-box}
.op-foot a{display:block;width:24px;height:24px}
.op-foot svg{display:block;width:24px;height:24px}
@media (max-width:1199px){
  .op-head{max-width:714px;margin-bottom:56px}
  .op-head h2{font-size:48px;line-height:52px;letter-spacing:-1px}
  .op-card{width:342px;height:300px}
  .op-hover{display:none}
  .op-strip{display:flex;position:absolute;left:0;right:0;bottom:0;height:107px;border-radius:16px;background:rgba(255,255,255,.18);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);flex-direction:column;align-items:center;padding-top:16px;box-sizing:border-box;gap:8px}
  .op-card.light .op-strip{background:rgba(0,0,0,.38)}
  .op-foot div{max-width:714px;padding-right:0}
}
@media (max-width:809px){
  .op-head{max-width:none;padding:0 48px;margin-bottom:36px}
  .op-head h2{font-size:32px;line-height:36px;letter-spacing:-.7px}
  .op-foot div{padding:0 24px}
}
@media (min-width:1200px) and (max-width:1320px){.op-head{padding:0 40px}}