/* Call-to-action band in the logo red. */
.cta{background:var(--red);color:var(--white);padding:72px var(--gutter);display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center}
.cta img{width:88px}
.cta h2{color:var(--white);font-weight:var(--fw-bold);font-size:var(--fs-cta);max-width:20ch}
.cta p{color:var(--on-red-2);margin-top:6px}
@media (max-width:760px){.cta{grid-template-columns:1fr;padding:48px var(--gutter-m)}.cta img{width:64px}}
/* coming in: the red band is uncovered from right to left, then its logo, words and button slide in from the right, one after another */
.js .cta.reveal{transform:none;transition:none}   /* hidden while waiting by opacity, not clip-path: a clipped band never counts as on screen */
.js .cta.reveal.in{animation:cta-wipe .9s var(--ease-out) backwards}
@keyframes cta-wipe{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0)}}
.js .cta>.reveal.in{animation:cta-in .8s var(--ease-out) backwards;animation-delay:calc(.35s + var(--i,0) * .18s)}   /* an animation, so the button's own hover moves keep no delay */
@keyframes cta-in{from{opacity:0;transform:translateX(48px)}}
@media (prefers-reduced-motion:reduce){.js .cta.reveal.in,.js .cta>.reveal.in{animation:none}}