/* ---- Homepage "Our work": case-study carousel (title + section colour unchanged) ---- */
.wk{position:relative; margin-top:56px; --gap:24px; --navy:#0e294b; --cream:#fff6e7; --mag:#d41b5b}
.wk-bar{position:relative; height:2px; background:rgba(14,41,75,.22); margin:0 0 32px}
.wk-thumb{position:absolute; left:0; top:-1px; height:4px; background:var(--navy); border-radius:2px; transition:transform .5s cubic-bezier(.2,.8,.2,1), width .5s}
.wk-track{display:flex; gap:var(--gap); overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; scroll-behavior:smooth; overscroll-behavior-x:contain}
.wk-track::-webkit-scrollbar{display:none}
.wk-track.drag{scroll-snap-type:none; scroll-behavior:auto; cursor:grabbing}
.wk-card{position:relative; flex:0 0 calc((100% - 2 * var(--gap)) / 3); aspect-ratio:1/1; scroll-snap-align:start; overflow:hidden; border-radius:4px;
  display:block; color:#fff!important; text-decoration:none!important; background:var(--navy); isolation:isolate}
.wk-card img.wk-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform 1.1s cubic-bezier(.2,.8,.2,1)}
.wk-card::before{content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(10,29,53,.55) 0%, rgba(10,29,53,0) 30%, rgba(10,29,53,.15) 50%, rgba(10,29,53,.88) 100%); transition:background-color .6s}
.wk-card::after{content:""; position:absolute; inset:0; z-index:-1; background:rgba(10,29,53,.5); opacity:0; transition:opacity .6s ease}
.wk-logo{position:absolute; top:24px; right:24px; height:34px; max-width:42%; display:flex; justify-content:flex-end}
.wk-logo img{max-height:100%; max-width:100%; object-fit:contain; filter:brightness(0) invert(1)}
.wk-tag{position:absolute; top:28px; left:24px; max-width:48%; font:700 11px/1.3 "Inter",sans-serif; letter-spacing:.14em; text-transform:uppercase; opacity:.85}
.wk-txt{position:absolute; left:24px; right:24px; bottom:24px; display:grid; grid-template-rows:auto 0fr; transition:grid-template-rows .6s cubic-bezier(.2,.8,.2,1)}
.wk-card h3{font:700 clamp(20px,1.75vw,27px)/1.12 "Inter",sans-serif!important; letter-spacing:-.02em; margin:0!important; color:#fff!important; text-transform:none}
.wk-body{overflow:hidden; min-height:0}
.wk-body p{font-size:15px!important; line-height:1.5!important; margin:14px 0 0!important; color:#fff!important; opacity:0; transform:translateY(12px);
  transition:opacity .45s ease, transform .6s cubic-bezier(.2,.8,.2,1)}
.wk-card:hover::after,.wk-card:focus-visible::after{opacity:1}
.wk-card:hover img.wk-bg{transform:scale(1.06)}
.wk-card:hover .wk-txt,.wk-card:focus-visible .wk-txt{grid-template-rows:auto 1fr}
.wk-card:hover .wk-body p,.wk-card:focus-visible .wk-body p{opacity:.92; transform:none; transition-delay:.12s}
.wk-card:focus-visible{outline:3px solid var(--mag); outline-offset:3px}
.wk-arr{all:unset; box-sizing:border-box; position:absolute; top:calc(50% + 17px); width:48px; height:48px; margin-top:-24px; border-radius:50%; display:grid; place-items:center;
  cursor:pointer; color:var(--navy); background:var(--cream); box-shadow:0 6px 20px -8px rgba(14,41,75,.45); z-index:3; transition:background .3s, color .3s, opacity .3s, transform .3s}
.wk-arr svg{width:18px; height:18px}
.wk-arr:hover{background:var(--navy); color:var(--cream)}
.wk-arr:focus-visible{outline:2px solid var(--mag); outline-offset:3px}
.wk-arr[disabled]{opacity:.3; pointer-events:none}
.wk-prev{left:-64px} .wk-next{right:-64px}
/* the live grid is replaced, keep the old cells hidden if theme JS looks for them */
@media (max-width:1400px){ .wk-prev{left:-12px} .wk-next{right:-12px} }
@media (max-width:900px){
  .wk{--gap:14px; margin-top:36px}
  .wk-card{flex-basis:84%}
  .wk-arr{display:none}
}
@media (hover:none){
  .wk-txt{grid-template-rows:auto 1fr}
  .wk-body p{opacity:.92; transform:none}
  .wk-card::after{opacity:.6}
}
/* arrows sit on the card edges so nothing hangs off the page */
.our-works{overflow-x:clip}
.wk-prev{left:-24px} .wk-next{right:-24px}
@media (max-width:1500px){ .wk-prev{left:12px} .wk-next{right:12px} }
/* phones / touch: no hover, so each card reveals its text as it scrolls (or swipes) into view */
@media (hover:none), (max-width:900px){
  .wk-txt{grid-template-rows:auto 0fr}
  .wk-body p{opacity:0; transform:translateY(12px)}
  .wk-card::after{opacity:0}
  .wk-card.on::after{opacity:1}
  .wk-card.on img.wk-bg{transform:scale(1.06)}
  .wk-card.on .wk-txt{grid-template-rows:auto 1fr}
  .wk-card.on .wk-body p{opacity:.92; transform:none; transition-delay:.12s}
}
@media (max-width:900px){ .wk-card{aspect-ratio:4/5} .wk-tag{max-width:46%} }
.wk-tag{display:none}.wk-card::before{background:none}