.motion-page { background: #101010; color: #f5f5f2; }
.motion-page .eyebrow { font-size: 11px; letter-spacing: 3px; color: #7df9ff; margin-bottom: 25px; }
.motion-hero { padding-top: clamp(65px,8vw,120px); padding-bottom: 80px; }
.motion-hero h1 { font-size: clamp(58px,8vw,112px); line-height: .98; letter-spacing: -.055em; margin-bottom: 48px; }
.motion-hero h1 span { color: #7df9ff; }
.motion-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.motion-intro p { color: #b9b9b9; font-size: 17px; line-height: 1.8; }
.motion-intro .motion-lead { color: #f5f5f2; font-size: clamp(22px,2.3vw,30px); line-height: 1.4; }
.motion-work { padding-bottom: 100px; }
.motion-section-heading { display:flex; justify-content:space-between; align-items:end; gap:30px; padding-top:40px; border-top:1px solid #333; margin-bottom:35px; }
.motion-section-heading h2,.motion-approach h2,.motion-contact h2 { font-size:clamp(36px,4.8vw,64px); letter-spacing:-.04em; line-height:1.08; }
.motion-section-heading p:last-child { color:#aaa; max-width:280px; line-height:1.6; }
.motion-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px; }
.motion-tile { display:block; padding:0; min-width:0; border:1px solid #303030; border-radius:16px; overflow:hidden; background:#191919; color:inherit; text-align:left; font:inherit; }
.motion-play { cursor:pointer; transition:border-color .2s,transform .2s; }
.motion-play:hover { border-color:#7df9ff; transform:translateY(-4px); }
.motion-art { display:flex; position:relative; align-items:center; justify-content:center; width:100%; aspect-ratio:16/9; background:#14191a; overflow:hidden; }
.motion-art img { display:block; width:100%; height:100%; object-fit:cover; }
.motion-play-icon { display:grid; place-items:center; width:50px; height:50px; border-radius:50%; background:#7df9ff; color:#101010; position:absolute; font-size:18px; padding-left:3px; box-shadow:0 3px 20px #0007; }
.motion-duration { position:absolute; right:12px; bottom:12px; background:#000b; padding:3px 8px; border-radius:4px; font-size:11px; letter-spacing:1px; }
.motion-tile-copy { display:block; padding:26px; }
.motion-kicker { display:block; color:#aaa; font-size:10px; letter-spacing:1.7px; margin:0 0 13px; }
.motion-title { display:block; font-size:22px; font-weight:700; line-height:1.2; letter-spacing:-.4px; margin:0 0 12px; }
.motion-caption { display:block; font-size:14px; color:#a9a9a9; line-height:1.6; margin:0; }
.motion-action { display:block; font-size:12px; color:#7df9ff; margin-top:23px; }
.motion-placeholder-number { position:absolute; right:16px; bottom:-26px; color:#233034; font-size:130px; font-weight:700; letter-spacing:-9px; line-height:1; }
.motion-status { position:relative; color:#a6b3b6; font-size:10px; letter-spacing:3px; border:1px solid #3d4b4e; padding:11px 16px; background:#14191ad9; }
.motion-approach { border-top:1px solid #333; padding-top:75px; padding-bottom:90px; }
.motion-approach .motion-intro { margin-top:42px; }
.motion-services { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:36px; margin-top:55px; }
.motion-services article { border-top:1px solid #333; padding-top:25px; }
.motion-services span { font-size:10px; color:#7df9ff; letter-spacing:2px; }
.motion-services h3 { font-size:25px; line-height:1.2; margin:18px 0; }
.motion-services p,.motion-contact p:not(.eyebrow) { color:#b9b9b9; line-height:1.8; font-size:16px; }
.motion-contact { background:#191919; padding:75px 0; }
.motion-contact p:not(.eyebrow) { max-width:570px; margin:25px 0 30px; }
.motion-dialog { position:fixed; inset:0; margin:auto; width:min(1000px,94vw); max-height:94dvh; padding:20px; border:1px solid #444; border-radius:14px; background:#171717; color:#fff; overflow:auto; }
.motion-dialog::backdrop { background:#000d; backdrop-filter:blur(6px); }
.motion-dialog video { display:block; width:100%; max-height:70dvh; aspect-ratio:16/9; background:#000; }
.motion-player-heading,.motion-player-bottom { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.motion-player-heading { margin-bottom:16px; }
.motion-player-heading h2 { font-size:16px; letter-spacing:1px; }
.motion-dialog button { background:#292929; border:1px solid #555; color:#fff; border-radius:5px; padding:10px 14px; cursor:pointer; font:inherit; font-size:13px; }
.motion-player-bottom { margin-top:15px; }
.motion-player-bottom p,.motion-player-status { font-size:12px; color:#bbb; line-height:1.6; }
.motion-player-status:empty { display:none; }
.motion-dialog [hidden] { display:none; }
@media(max-width:750px) { .motion-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; } .motion-intro { grid-template-columns:1fr; gap:24px; } .motion-section-heading { align-items:start; flex-direction:column; } .motion-services { grid-template-columns:1fr; } .motion-tile-copy { padding:20px; } .motion-title { font-size:20px; } }
@media(max-width:480px) { .motion-grid { grid-template-columns:1fr; } .motion-hero { padding-bottom:50px; } .motion-player-bottom { flex-direction:column; align-items:start; } .motion-dialog { padding:12px; } .motion-player-heading h2 { font-size:13px; } }