/* About page: vision and mission, two plain cards side by side (one under the other on phones).
   They drop in one after the other, right to left (motion.js tags them; the drop and the gap are set here). */
.vm{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:0 var(--gutter) 88px}
.vm-card{border-radius:var(--r-24);padding:32px 40px 36px;cursor:pointer;border:1px solid transparent;
  transition:background-color .5s var(--ease-out),border-color .5s var(--ease-out),color .5s var(--ease-out)}
.vm-card h2{font-size:var(--fs-36);font-weight:var(--fw-bold);line-height:1.2}
.vm-card p{margin-top:14px;font-size:var(--fs-18);line-height:1.9;max-width:52ch}
.vm-vision{background:var(--red);border-color:var(--red);color:var(--on-red)}
.vm-mission{background:var(--ink);border-color:var(--ink-line);color:var(--head)}
/* a click on either card swaps the colours: vision goes dark, mission goes red (js/sections/about-vm.js) */
.vm.is-swapped .vm-vision{background:var(--ink);border-color:var(--ink-line);color:var(--head)}
.vm.is-swapped .vm-mission{background:var(--red);border-color:var(--red);color:var(--on-red)}
.vm-card:focus-visible{outline:2px solid var(--white);outline-offset:3px}
.js .vm>.reveal{transform:translateY(-36px);transition-property:opacity,transform,background-color,border-color,color;
  transition-duration:var(--reveal-t),var(--reveal-t),.5s,.5s,.5s;transition-delay:calc(var(--i,0) * .5s),calc(var(--i,0) * .5s),0s,0s,0s}
.js .vm>.reveal.in{transform:none}
@media (prefers-reduced-motion:reduce){.vm-card{transition:none}}
@media (max-width:760px){.vm{grid-template-columns:1fr;gap:16px;padding:0 var(--gutter-m) 56px}.vm-card{padding:26px 24px 28px}.vm-card h2{font-size:var(--fs-28)}.vm-card p{font-size:var(--fs-16-5);margin-top:10px}}