/* K = direction. O = a frame for an action. No new logo geometry. */
.brand-arrow{display:inline-block;width:1em;height:1em;flex:none;vertical-align:-.12em;pointer-events:none}
.hero-down{display:grid;place-items:center;width:48px;height:48px;padding:7px;transition:transform .2s cubic-bezier(.22,1,.36,1)}
.hero-down .brand-arrow{width:30px;height:30px}
.all-work-link>.brand-arrow{color:var(--red);width:1.15em;height:1.15em}
.footer-cta{align-items:center}
.footer-cta>.brand-arrow{width:.84em;height:.84em;transition:transform .25s cubic-bezier(.22,1,.36,1)}
.footer-cta:is(:hover,:focus-visible)>.brand-arrow{transform:translate(5px,-5px)}
.contact-email>.brand-arrow{align-self:center}
.progress-top .brand-arrow{margin-left:.25em}
.menu-arrow{display:inline-flex;align-self:center}
.menu-nav a:focus-visible .menu-arrow{opacity:1;transform:none}
.carousel-controls button{display:grid;place-items:center;min-width:44px;min-height:44px}
.carousel-controls .brand-arrow{width:25px;height:25px}
.project-next a:last-child{display:inline-flex;gap:.25em;align-items:center}
.device-link>.brand-arrow{color:var(--red)}
.themed-project .device-link>.brand-arrow{color:var(--ink)}

.motif-paper{fill:#fff}
.project-cue{position:absolute;right:12px;bottom:12px;width:36px;aspect-ratio:150/154;z-index:2;color:var(--red);opacity:0;transform:translate(-2px,2px);pointer-events:none;transition:opacity .18s ease,transform .22s cubic-bezier(.22,1,.36,1)}
.project-cue svg{display:block;width:100%;height:100%}
:is(.feed-card,.work-card)>a:is(:hover,:focus-visible) .project-cue{opacity:1;transform:none}

.film-play .play-o{display:block;width:clamp(62px,6vw,90px);aspect-ratio:150/154;color:var(--red);transition:transform .22s cubic-bezier(.22,1,.36,1)}
.film-play .play-o svg{display:block;width:100%;height:100%;margin:0}
.film-play:is(:hover,:focus-visible) .play-o{transform:scale(1.06)}
.film-play:focus-visible{outline-offset:-6px}

@media(hover:none){.project-cue{opacity:1;transform:none;width:30px;right:10px;bottom:10px}}
@media(max-width:600px){.footer-cta>.brand-arrow{width:.7em;height:.7em}}
@media(prefers-reduced-motion:reduce){.project-cue,.hero-down,.footer-cta>.brand-arrow,.film-play .play-o{transition:none!important;transform:none!important}}