/* Our Work page: built on the shared site.css and growth-strategy.css page system. */
.work-page .page-hero__aside .btn{margin-top:1.75rem}

.work{background:var(--stone)}
.work__list{display:grid;gap:clamp(4.5rem,9vw,8rem)}

.case{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.case:nth-child(even){grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr)}
.case:nth-child(even) .case__stage{order:2}

/* Device stage */
.case__stage{position:relative;isolation:isolate;overflow:hidden;padding:clamp(1.25rem,3.5vw,3rem) clamp(1.25rem,3.5vw,3rem) clamp(2.5rem,5vw,4.5rem);border-radius:var(--r-xl);background:radial-gradient(60% 70% at 85% 0%,rgba(54,213,182,.28),transparent 65%),radial-gradient(50% 60% at 0% 100%,rgba(0,125,104,.4),transparent 70%),linear-gradient(160deg,#0d4a3b,var(--deep) 60%,var(--deeper));box-shadow:var(--shadow-lg)}
.case__stage::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 20%,transparent 75%)}

.browser{position:relative;overflow:hidden;border-radius:14px;background:#fff;box-shadow:0 40px 80px -30px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.08)}
.browser__bar{display:flex;align-items:center;gap:.4rem;height:34px;padding:0 .9rem;background:#eef2f1;border-bottom:1px solid rgba(11,61,46,.08)}
.browser__bar>i{width:9px;height:9px;border-radius:50%;background:#cdd7d3}
.browser__bar>i:first-child{background:var(--mint)}
.browser__address{display:flex;align-items:center;gap:.4rem;width:min(46%,320px);height:20px;margin-inline:auto;padding:0 .65rem;border-radius:999px;background:#e1e8e5;color:#9aaba6}
.browser__address .i{width:11px;height:11px;stroke-width:2}
.browser__address span{flex:1;height:5px;border-radius:5px;background:#cfd9d5}

.screen{position:relative;overflow:hidden;container-type:size;background:#f2f5f4}
.browser .screen{aspect-ratio:16/10}
.screen img{position:absolute;top:0;left:0;width:100%;height:auto;max-width:none;will-change:transform;animation:work-pan var(--pan,36s) ease-in-out infinite alternate;animation-play-state:paused}
.case.is-visible .screen img{animation-play-state:running}
.case__stage:hover .screen img,.case__stage:focus-within .screen img{animation-play-state:paused}
@keyframes work-pan{0%,8%{transform:translateY(0)}92%,100%{transform:translateY(calc(-100% + 100cqh))}}

.phone{position:absolute;right:clamp(.75rem,3vw,2.5rem);bottom:clamp(.75rem,2.5vw,2rem);z-index:2;width:clamp(96px,19%,190px);padding:6px;border-radius:28px;background:#0a1d18;box-shadow:0 30px 60px -20px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.1)}
.phone::before{content:"";position:absolute;top:13px;left:50%;z-index:3;width:30%;height:12px;border-radius:999px;background:#0a1d18;transform:translateX(-50%)}
.phone .screen{aspect-ratio:9/19.5;border-radius:22px}

.case__live{position:absolute;left:clamp(1.25rem,3.5vw,3rem);bottom:clamp(.9rem,1.8vw,1.4rem);z-index:2;display:inline-flex;align-items:center;gap:.55rem;padding:.45rem .85rem .45rem .7rem;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(6,42,34,.7);color:var(--mint-soft);font-size:.78rem;font-weight:500;letter-spacing:.06em;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}

/* Case details */
.case__num{display:block;color:var(--sage);font-family:var(--serif);font-size:clamp(3rem,6vw,4.75rem);font-style:italic;line-height:.9}
.case__name{margin-top:.75rem;font-size:clamp(2rem,3.4vw,3rem)}
.case__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem .9rem;margin-top:1rem;color:var(--body);font-size:.98rem}
.case__meta span{display:inline-flex;align-items:center;gap:.4rem}
.case__meta .i{color:var(--teal)}
.case__status{display:inline-flex;align-items:center;gap:.55rem;margin-top:1.5rem;padding:.4rem .85rem .4rem .7rem;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--emerald);font-size:.82rem;font-weight:500}
.case__status .pulse{width:7px;height:7px}
.delivered{margin-top:2rem;border-top:1px solid var(--line)}
.delivered li{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:1rem;padding:1.05rem 0;border-bottom:1px solid var(--line)}
.delivered .icon-badge{width:46px;height:46px;border-radius:13px;background:#fff}
.delivered .icon-badge .i{width:21px;height:21px}
.delivered strong{display:block;color:var(--ink);font-weight:500;font-size:1.05rem;letter-spacing:-.01em}
.delivered small{display:block;color:var(--body);font-size:.92rem}

@media (max-width:980px){
  .case,.case:nth-child(even){grid-template-columns:1fr}
  .case:nth-child(even) .case__stage{order:0}
}
@media (max-width:640px){
  .browser__bar{height:26px;padding:0 .6rem}
  .browser__bar>i{width:7px;height:7px}
  .browser__address{height:14px}
  .phone{width:30%;padding:4px;border-radius:20px}
  .phone .screen{border-radius:16px}
  .phone::before{top:9px;height:8px}
  .case__live{font-size:.7rem}
}
@media (prefers-reduced-motion:reduce){
  .screen img{animation:none}
}

/* Keep the complete work heading and CTA below the floating navigation. */
.work-page .growth-hero{height:auto;min-height:60svh;max-height:none;padding:140px 0 64px}
.work-page .growth-hero .page-hero__layout{align-items:center}
.work-page .growth-hero .page-hero__title{font-size:clamp(2.3rem,4.4vw,4.5rem);line-height:1.04}
.work-page .growth-hero .crumbs{margin-bottom:2rem}
@media(max-width:980px){.work-page .growth-hero{padding:126px 0 48px}.work-page .growth-hero .page-hero__layout{gap:1.5rem}}
@media(max-width:640px){.work-page .growth-hero{padding:108px 0 40px}.work-page .growth-hero .page-hero__title{font-size:clamp(2rem,8vw,2.8rem)}}