/* Original silent motion artwork, with the entire frame visible at every size. */
.at-motion {
 display: grid;
 grid-template-columns: .91fr 1.25fr;
 align-items: center;
 gap: 8px;
 margin-top: 72px;
 border-radius: 28px;
 overflow: hidden;
 background: #131719;
 color: #f5f5f0;
}
.at-motion-copy { padding: 48px 0 48px 48px; min-width: 0; position: relative; z-index: 1; }
.at-motion-copy .at-eyebrow { color: #c7cac0; font-size: 11px; letter-spacing: .15em; }
.at-motion-dot { width: 6px; height: 6px; background: #d5ff43; border-radius: 50%; flex: none; }
.at-site .at-motion h2 { margin-top: 27px; font-size: clamp(45px, 4.2vw, 68px); line-height: 1.04; letter-spacing: -.065em; font-weight: 650; }
.at-motion h2 em { color: #d5ff43; font-style: normal; }
.at-motion-copy > p { margin-top: 24px; color: #b8beb8; font-size: 15px; line-height: 1.8; }
.at-motion-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 28px; }
.at-motion-actions .at-button { min-height: 49px; padding: 12px 18px; font-size: 13px; gap: 10px; }
.at-motion-signature { display: block; margin-top: 42px; color: #767f7a; font-size: 10px; font-weight: 700; letter-spacing: .24em; }
.at-motion-visual { min-width: 0; padding: 22px 24px 20px 0; }
.at-motion-stage { position: relative; width: 100%; aspect-ratio: 8 / 5; overflow: hidden; isolation: isolate; }
.at-motion-stage::after { content: ""; position: absolute; z-index: 2; inset: 0; pointer-events: none; background: linear-gradient(90deg, #131719, transparent 8%, transparent 92%, #131719), linear-gradient(0deg, #131719, transparent 8%, transparent 92%, #131719); }
.at-motion-video, .at-motion-poster { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: contain; background: #131719; }
.at-motion-poster { z-index: 1; }
.at-motion.has-frame .at-motion-poster { visibility: hidden; }
.at-motion-caption { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 16px 0; }
.at-motion-caption > span { display: inline-flex; align-items: center; gap: 9px; color: #9da69e; font-size: 10px; line-height: 1.6; }
.at-motion-caption > span > span { width: 4px; height: 4px; border-radius: 50%; background: #d5ff43; flex: none; }
.at-motion-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; min-width: 84px; padding: 8px 12px; border: 1px solid #4d5651; border-radius: 24px; color: #dce2d9; background: transparent; font-size: 11px; font-weight: 650; flex: none; }
.at-motion-toggle:hover { background: #27302a; border-color: #82907f; }
.at-motion-toggle svg { width: 14px; height: 14px; fill: currentColor; }
.at-motion-toggle .at-motion-play-icon { display: none; }
.at-motion:not(.is-playing) .at-motion-toggle .at-motion-pause-icon { display: none; }
.at-motion:not(.is-playing) .at-motion-toggle .at-motion-play-icon { display: block; }
.at-motion-toggle:focus-visible { outline-color: #d5ff43; }
@media (max-width: 1180px) {
 .at-motion-copy { padding: 38px 0 38px 34px; }
 .at-motion-visual { padding-right: 12px; }
 .at-motion-actions { gap: 8px; }
 .at-motion-actions .at-button { padding-inline: 14px; }
 .at-motion-caption { padding-inline: 8px; }
}
@media (max-width: 820px) {
 .at-motion { grid-template-columns: 1fr; gap: 0; }
 .at-motion-copy { padding: 34px 34px 0; }
 .at-site .at-motion h2 { font-size: clamp(44px, 7.4vw, 64px); margin-top: 20px; }
 .at-motion-signature { display: none; }
 .at-motion-visual { padding: 0 20px 22px; }
 .at-motion-stage { max-width: 680px; margin-inline: auto; }
 .at-motion-caption { padding-inline: 8px; }
}
@media (max-width: 640px) {
 .at-motion { margin-top: 46px; border-radius: 22px; }
 .at-motion-copy { padding: 28px 24px 0; }
 .at-motion-copy .at-eyebrow { font-size: 9px; letter-spacing: .13em; }
 .at-site .at-motion h2 { font-size: clamp(38px, 10.7vw, 59px); margin-top: 21px; }
 .at-motion-copy > p { margin-top: 20px; font-size: 13px; }
 .at-motion-actions { margin-top: 22px; gap: 8px; }
 .at-motion-actions .at-button { font-size: 11px; padding: 11px 12px; min-height: 44px; gap: 8px; }
 .at-motion-actions .at-button svg { width: 15px; height: 15px; }
 .at-motion-visual { padding: 0 8px 18px; }
 .at-motion-caption { padding: 1px 12px 0; gap: 7px; }
 .at-motion-caption > span { font-size: 9px; gap: 6px; color: #bec7bd; }
 .at-motion-toggle { min-width: 74px; min-height: 40px; font-size: 10px; padding: 7px 10px; }
}
@media (prefers-reduced-motion: reduce) {
 .at-motion-poster { visibility: visible; }
 .at-motion.has-frame .at-motion-poster { visibility: hidden; }
}