/* Case study listings: a recognisable workflow, then the business benefit. */
.work-section{padding-top:72px;padding-bottom:88px;scroll-margin-top:0}
.case-library.work-section{max-width:1440px}
.work-heading{gap:36px;margin-bottom:42px}
.work-heading .section-kicker{color:var(--accent);font-size:10px;letter-spacing:1.8px;margin:0 0 18px}
.work-heading h1,.work-heading h2{font-family:Manrope,sans-serif;font-size:clamp(36px,3.7vw,54px);line-height:1.16;letter-spacing:-1.9px;font-weight:500;margin:0}
.work-heading h1 em,.work-heading h2 em{color:#bea8ed;font-style:normal}
.work-heading .reference-note{max-width:255px;font-size:15px;line-height:1.75;margin:0 0 4px}
.work-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.work-card{--work-accent:#cfb1f8;display:flex;flex-direction:column;min-width:0;border:1px solid #393249;border-radius:16px;background:#191824;overflow:hidden;transition:border-color .25s ease}
.work-card--sales{--work-accent:#c7c0ff;border-color:#35344e}
.work-card--support{--work-accent:#b1c8f1;border-color:#313c51}
.work-card:focus-visible{outline:2px solid var(--work-accent);outline-offset:5px}
.work-visual{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;background:radial-gradient(ellipse at 68% 54%,#63477c55,transparent 72%),#211c30;border-bottom:1px solid #383047}
.work-card--sales .work-visual{background:radial-gradient(ellipse at 68% 54%,#5a569051,transparent 72%),#201f34;border-color:#34324a}
.work-card--support .work-visual{background:radial-gradient(ellipse at 68% 54%,#47618e50,transparent 72%),#1c2537;border-color:#303b50}
.work-visual::before{content:'';position:absolute;inset:0;z-index:-1;background-image:radial-gradient(#b2a3d929 .7px,transparent .7px);background-size:18px 18px;mask-image:linear-gradient(transparent,#000 35%,#000 70%,transparent)}
.work-category{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:23px 25px 0;color:var(--work-accent);font-size:10px;font-weight:550;letter-spacing:1.6px;text-transform:uppercase;line-height:1.5}
.work-index{font-variant-numeric:tabular-nums;letter-spacing:1px;opacity:.65}
.work-art{display:block;width:100%;height:auto;max-height:264px;margin:auto 0;font-family:'DM Sans',sans-serif;flex:1 0 auto}
.work-caption{display:block;text-align:center;padding:0 12px 22px;color:#c2b6d2;font-size:10px;line-height:1.5;letter-spacing:.1px}
.work-card--sales .work-caption{color:#bdb9d9}
.work-card--support .work-caption{color:#b3c2da}
.work-copy{display:flex;flex:1;flex-direction:column;padding:28px 25px 23px}
.work-copy h2,.work-copy h3{font-family:Manrope,sans-serif;font-size:clamp(22px,2vw,28px);line-height:1.3;font-weight:500;letter-spacing:-.8px;margin:0 0 17px;text-wrap:balance}
.work-copy h2 span,.work-copy h3 span{display:block}
.work-copy h2 span+span,.work-copy h3 span+span{color:var(--work-accent)}
.work-copy>p{font-size:14px;line-height:1.75;color:#b9b6c7;margin:0 0 28px;max-width:35em}
.work-footer{display:flex;justify-content:flex-end;align-items:center;flex-wrap:wrap;gap:14px 10px;border-top:1px solid #ffffff12;padding-top:18px;margin-top:auto}
.work-link{display:inline-flex;align-items:center;gap:9px;font-size:11px;font-weight:500;line-height:1.5;color:#e4ddee}
.work-link .icon{width:16px;height:16px;transition:translate .25s ease}
.work-card--support .work-link{color:#d7e1f2}
.art-flow{opacity:0;stroke-dasharray:.12 .88;stroke-dashoffset:1}

/* One short sequence on entry; pointer and keyboard focus can replay it.
   The resting artwork is complete with JavaScript disabled or motion reduced. */
@media(prefers-reduced-motion:no-preference){
  .is-illustrating .art-source{animation:case-source-in 1.4s cubic-bezier(.2,.7,.3,1) both}
  .is-illustrating .art-source-two{animation-delay:.14s}
  .is-illustrating .art-source-three{animation-delay:.28s}
  .is-illustrating .art-flow{animation:case-flow 1.7s .2s ease-in-out both}
  .is-illustrating .art-flow.art-delay{animation-delay:.42s}
  .is-illustrating .art-result{animation:case-result-in 1.1s .6s cubic-bezier(.2,.7,.3,1) both}
  .is-illustrating .art-row{animation:case-row-in .7s 1s ease both}
  .is-illustrating .art-row-two{animation-delay:1.15s}
  .is-illustrating .art-row-three{animation-delay:1.3s}
  .is-illustrating .art-stamp{animation:case-stamp-in .7s 1.65s cubic-bezier(.2,.7,.3,1) both}
}
@keyframes case-source-in{from{opacity:.35;translate:-10px 6px}to{opacity:1;translate:0 0}}
@keyframes case-flow{0%{opacity:0;stroke-dashoffset:1}20%{opacity:1}80%{opacity:1}100%{opacity:0;stroke-dashoffset:0}}
@keyframes case-result-in{from{opacity:.25;translate:0 9px}to{opacity:1;translate:0 0}}
@keyframes case-row-in{from{opacity:0;translate:0 4px}to{opacity:1;translate:0 0}}
@keyframes case-stamp-in{from{opacity:0;translate:0 6px}to{opacity:1;translate:0 0}}
@media(hover:hover) and (pointer:fine){
  .work-card:hover{border-color:var(--work-accent)}
  .work-card:hover .work-link .icon{translate:2px -2px}
}
@media(min-width:1061px) and (max-width:1199px){
  .work-copy{padding:25px 22px 22px}
  .work-category{padding-left:22px;padding-right:22px}
  .work-footer{gap:12px 8px}
  .work-link{font-size:10px;gap:6px}
}
@media(max-width:1060px){
  .work-grid{grid-template-columns:1fr;gap:22px}
  .work-card{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}
  .work-visual{border-bottom:0;border-right:1px solid #ffffff0d}
  .work-copy{padding:30px}
  .work-copy h2,.work-copy h3{font-size:26px}
  .work-copy>p{margin-bottom:24px}
  .work-section .work-card{--reveal-delay:0ms}
}
@media(max-width:760px){
  .work-section{padding-top:56px;padding-bottom:60px}
  .work-heading{gap:18px;margin-bottom:30px}
  .work-heading h1,.work-heading h2{font-size:clamp(32px,7vw,44px);letter-spacing:-1.2px}
  .work-heading .section-kicker{margin-bottom:15px}
  .work-heading .reference-note{max-width:330px;font-size:14px;margin:0}
  .work-copy{padding:24px}
  .work-copy h2,.work-copy h3{font-size:24px}
  .work-category{padding:20px 22px 0}
  .work-caption{font-size:9px;padding-bottom:20px}
}
@media(max-width:620px){
  .work-grid{gap:24px}
  .work-card{display:flex}
  .work-visual{border-right:0;border-bottom:1px solid #ffffff0d}
  .work-art{max-height:258px;flex:none}
  .work-copy{padding:25px 23px 23px}
  .work-copy h2,.work-copy h3{font-size:25px}
  .work-copy>p{font-size:14px;margin-bottom:24px}
  .work-caption{font-size:10px}
}
@media(prefers-reduced-motion:reduce){
  .work-card,.work-link .icon{transition:none}
  .work-card:hover .work-link .icon{translate:none}
  .work-art *{animation:none!important}
}