/* White faces, black typography, coloured illustrations. Scroll timing is independent of hover. */
@media (min-width: 761px) and (prefers-reduced-motion: no-preference) {
  #expertise.xdeck.xbig { height: 500vh; }
}
#expertise.xdeck .xd-front { background: #fff !important; }
#expertise.xdeck .xd-front h3 { color: #000; text-shadow: none; }
#expertise.xdeck .xd-ltr { color: #fff; -webkit-text-stroke-color: #000; }
#expertise.xdeck .xd-front .xc span {
  color: #000 !important;
  background: color-mix(in srgb, var(--gc) 15%, #fff) !important;
  border-color: color-mix(in srgb, var(--gc) 70%, #555) !important;
}
/* Immediate hover response; clicking opens the full split and service list. */
#expertise.xdeck .xd-art,
#expertise.xdeck .xrow[data-card="strategy"].xd-on:hover .xd-art-t {
  transition: translate .28s cubic-bezier(.2,.8,.2,1),
    transform .24s cubic-bezier(.2,.8,.2,1), scale .22s ease;
}
#expertise.xdeck .xrow.xd-on .xd-in {
  transition: transform .24s cubic-bezier(.2,.8,.2,1);
}
#expertise.xdeck .xrow.xd-on:hover .xd-in {
  transform: translateY(-1.8cqw) rotate(-1.5deg) rotateY(calc((1 - var(--flip, 0)) * 180deg));
  transition: transform .22s cubic-bezier(.2,.8,.2,1);
}
@media (hover:hover) and (pointer:fine) {
  #expertise.xdeck .xrow.xd-on:hover:not(.xd-open) .xd-art-t { translate: 0 -4%; }
  #expertise.xdeck .xrow.xd-on:hover:not(.xd-open) .xd-art-b { translate: 0 4%; }
}
#expertise.xdeck .xd-ltr { transition: translate .2s ease; }
#expertise.xdeck .xd-a,
#expertise.xdeck .xrow[data-card="strategy"].xd-on:hover .xd-a {
  transition: transform .24s cubic-bezier(.2,.8,.2,1);
}
#expertise.xdeck .xd-front h3 { transition: opacity .16s .06s, scale .22s .06s ease; }
#expertise.xdeck .xrow.xd-open h3 { transition: opacity .12s, scale .2s; }
#expertise.xdeck .xrow.xd-open .xc span {
  transition: opacity .16s calc(.08s + var(--i) * 25ms),
    scale .28s calc(.08s + var(--i) * 25ms) cubic-bezier(.2,1.25,.4,1),
    rotate .28s calc(.08s + var(--i) * 25ms) ease,
    translate .28s calc(.08s + var(--i) * 25ms) ease,
    background-color .15s, color .15s;
}
@media (prefers-reduced-motion: reduce) {
  #expertise.xdeck { height: auto; }
  #expertise.xdeck .xd-stage { position: relative; height: auto; }
  #expertise.xdeck .xd-art, #expertise.xdeck .xc span,
  #expertise.xdeck h3 { transition-duration: .01s !important; transition-delay: 0s !important; }
}


/* Preserve the original deal/flip distances; use 152vh for the calm exit.
   Brands' heading reaches the bottom edge exactly when the cards start leaving. */
@media(min-width:761px) and (prefers-reduced-motion:no-preference){
 #expertise.xdeck.xbig{background:transparent!important;z-index:12;pointer-events:none}
 #expertise.xdeck .xlist{pointer-events:auto}
 #clients.clients{--brands-head-top:clamp(80px,11vh,130px);margin-top:calc(-152vh - var(--brands-head-top))!important}
 #clients .cl-head{top:var(--brands-head-top)}
}

/* Strategy: the hand drives the pawn DOWN into A; the letter reacts after contact.
   This card does not use the generic outward hover split. Click-to-open still does. */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  #expertise.xdeck .xrow[data-card="strategy"].xd-on:hover:not(.xd-open) .xd-art-t {
    translate: 0 0;
    transform: translate(-1%, 4.5%) rotate(-1.2deg);
    animation: xd-pawn-impact .28s both;
  }
  #expertise.xdeck .xrow[data-card="strategy"].xd-on:hover:not(.xd-open) .xd-art-b {
    translate: 0 0;
  }
  #expertise.xdeck .xrow[data-card="strategy"].xd-on:hover:not(.xd-open) .xd-a {
    transform: translate(.08em, .3em) rotate(17deg);
    animation: xd-letter-impact .4s both;
  }
  #expertise.xdeck .xrow[data-card="strategy"].xd-open:hover .xd-art-t,
  #expertise.xdeck .xrow[data-card="strategy"].xd-open:hover .xd-a { transform: none; }
}
@keyframes xd-pawn-impact {
  0% { transform: translate(0, 0) rotate(0); animation-timing-function: cubic-bezier(.45,0,.9,.65); }
  64% { transform: translate(-1%, 5.5%) rotate(-1.2deg); animation-timing-function: ease-out; }
  100% { transform: translate(-1%, 4.5%) rotate(-1.2deg); }
}
@keyframes xd-letter-impact {
  0%, 44% { transform: none; animation-timing-function: cubic-bezier(.15,.8,.3,1); }
  76% { transform: translate(.1em, .4em) rotate(24deg); animation-timing-function: ease-out; }
  100% { transform: translate(.08em, .3em) rotate(17deg); }
}