#case-content .motion-video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background:#a8d6df;border-radius:12px}
.case-motion{margin:0 0 50px}
.case-motion #case-content .motion-video{border:1px solid #2222}
.case-motion figcaption{font-size:11px;line-height:1.6;color:#5b5b56;margin-top:13px}
.technology-chips{display:flex;flex-wrap:wrap;gap:7px;margin:17px 0 6px}
.technology-chips span{font-size:10px;padding:6px 10px;border:1px solid #2223;border-radius:30px;line-height:1.2}
.technical-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:30px 0 50px}
.technical-tile{border:1px solid #2222;border-radius:16px;padding:25px}
.case-body .technical-tile h4{margin:0 0 13px;font-size:20px}
.technical-tile p{font-size:15px;line-height:1.65;margin:0;color:#4d4d49}
.technical-tile .technology-chips{margin:0 0 17px}
.document-card{display:grid;grid-template-columns:minmax(140px,230px) 1fr;gap:40px;align-items:center;border:1px solid #2222;border-radius:18px;padding:28px;background:#efeff3;margin:35px 0 50px}
.document-cover{display:block;transform:rotate(-3deg);transition:transform .35s}
.document-cover:hover{transform:rotate(0deg)}
.document-cover img{width:100%;display:block;border:1px solid #2222;box-shadow:0 8px 18px #2221}
.case-body .document-card h4{margin:12px 0 15px;font-size:28px;line-height:1.1;letter-spacing:-.6px}
.document-card p{font-size:15px;line-height:1.6;margin:0 0 22px;color:#4d4d49}
.document-links{display:flex;align-items:center;gap:25px;flex-wrap:wrap}
.document-links .underlined{font-size:13px}
.document-card .document-note{font-size:11px;margin:20px 0 0;line-height:1.5;color:#5b5b56}
@media(max-width:700px){
 #case-content .motion-video{aspect-ratio:4/5}
 .technical-grid{grid-template-columns:1fr;gap:13px;margin:25px 0 35px}
 .technical-tile{padding:21px}
 .technical-tile p{font-size:14px}
 .document-card{grid-template-columns:1fr;gap:28px;padding:23px}
 .document-cover{width:160px;margin:0 auto}
 .case-body .document-card h4{font-size:26px}
 .document-card p{font-size:14px}
 .document-links{gap:18px}
 .case-motion{margin:0 0 35px}
}
@media(prefers-reduced-motion:reduce){.document-cover{transform:none;transition:none}}

/* App Velar case: animated invitations, then user-controlled videos with audio. */
#case-content .velar-case>h3{margin:0 0 22px}
#case-content .velar-case>p{font-size:20px;line-height:1.5;max-width:900px;margin:0 0 45px}
#case-content .velar-app-image{margin:35px 0 65px}
#case-content .velar-case .velar-gallery-intro{font-size:15px;line-height:1.6;margin-bottom:25px;max-width:730px;color:#4d4d49}
#case-content .velar-video-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin:0 0 65px}
#case-content .velar-sample{--frame-paper:#fbe8a6;--frame-light:#fff2bd;--play-delay:0s;min-width:0;margin:0;padding:10px;background:var(--frame-paper);border:1px solid #2222;border-radius:28px;box-shadow:0 7px 18px #2220000a;transition:transform .4s cubic-bezier(.2,.75,.25,1),box-shadow .4s}
#case-content .velar-sample[data-character="mrvik"]{--frame-paper:#c3d7eb;--frame-light:#80b9f4;--play-delay:.65s}
#case-content .velar-sample[data-character="ruivo"]{--frame-paper:#f0beb0;--frame-light:#f7886c;--play-delay:1.3s}
#case-content .velar-frame{position:relative;isolation:isolate;padding:2px;overflow:hidden;border-radius:20px;background:#2226}
#case-content .velar-frame::before{content:"";position:absolute;inset:-55%;z-index:-1;background:conic-gradient(from 0deg,transparent 0deg,transparent 215deg,var(--frame-light) 260deg,#fff 295deg,transparent 330deg);animation:velar-frame-orbit 9s linear infinite;animation-play-state:paused}
#case-content .velar-stage{position:relative;border-radius:18px;overflow:hidden;background:#141414}
#case-content .case-sample-video{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:contain;background:#141414}
#case-content .velar-play{position:absolute;inset:0;width:100%;height:100%;padding:18px;display:grid;grid-template-rows:1fr auto;color:#fff;background:linear-gradient(180deg,#00000008 0%,transparent 45%,#0008 100%);text-align:left;cursor:pointer}
#case-content .velar-play[hidden]{display:none}
#case-content .velar-play:focus-visible{outline:3px solid var(--frame-paper);outline-offset:-7px;border-radius:18px}
#case-content .velar-play-symbol{position:relative;place-self:center;display:grid;place-items:center;width:74px;height:74px;border:1px solid #ffffffb0;border-radius:50%;background:#ffffff24;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 4px 28px #0002;transition:transform .4s,background .4s}
#case-content .velar-play-symbol::before{content:"";position:absolute;inset:-1px;border:1px solid #fff9;border-radius:inherit;animation:velar-play-pulse 3.2s ease-out infinite;animation-delay:var(--play-delay);animation-play-state:paused}
#case-content .velar-play-symbol svg{width:32px;height:32px;margin-left:3px}
#case-content .velar-play-copy{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 15px;font-size:12px;border:1px solid #ffffff60;border-radius:30px;background:#fffffff2;color:#222221;box-shadow:0 4px 20px #0001}
#case-content .velar-play-copy .motion-arrow{width:20px;height:20px;display:block;transition:transform .4s}
#case-content .velar-sample.is-in-view:not(.has-started) .velar-frame::before,#case-content .velar-sample.is-in-view .velar-play-symbol::before{animation-play-state:running}
#case-content .velar-sample figcaption{font-size:12px;line-height:1.55;color:#4b4944;padding:0 9px 6px;margin-top:17px}
#case-content .velar-sample-heading{display:flex;align-items:baseline;justify-content:space-between;gap:15px;padding-bottom:7px}
#case-content .velar-sample-heading h4{font-size:23px;font-weight:400;letter-spacing:-.7px;margin:0;color:#222221}
#case-content .velar-sample-heading>span{font-size:10px;color:#4b4944}
#case-content .velar-sample figcaption p{margin:0;font-size:11px;line-height:1.55}
#case-content .velar-sample .velar-play-error{margin-top:10px;font-size:12px}
@media(hover:hover){
 #case-content .velar-sample:hover{transform:translateY(-6px);box-shadow:0 15px 30px #22200016}
 #case-content .velar-play:hover .velar-play-symbol{transform:scale(1.1);background:#ffffff40}
 #case-content .velar-play:hover .motion-arrow{transform:translateX(4px)}
}
@keyframes velar-frame-orbit{to{transform:rotate(360deg)}}
@keyframes velar-play-pulse{0%{transform:scale(1);opacity:.55}72%,100%{transform:scale(1.5);opacity:0}}
#case-content .velar-process{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));list-style:none;padding:0;margin:28px 0 65px;border-top:1px solid #c7c7c4;border-bottom:1px solid #c7c7c4}
#case-content .velar-process li{position:relative;padding:25px 30px 25px 0;min-width:0}
#case-content .velar-process strong{display:block;font-size:18px;font-weight:400;letter-spacing:-.4px;margin-bottom:8px}
#case-content .velar-process li>span:not(.motion-arrow){font-size:11px;line-height:1.5;display:block;color:#5b5b56;max-width:105px}
#case-content .velar-process .motion-arrow{position:absolute;right:11px;top:27px;width:19px;height:19px}
#case-content .velar-case .case-columns{margin:30px 0 60px}
#case-content .velar-case .velar-authorship{font-size:17px;line-height:1.7}
@media(max-width:1000px) and (min-width:701px){
 #case-content .velar-video-gallery{gap:15px}
 #case-content .velar-process strong{font-size:15px}
 #case-content .velar-process .motion-arrow{right:7px;width:15px;height:15px}
}
@media(max-width:700px){
 #case-content .velar-case>h3{font-size:31px;margin-bottom:22px}
 #case-content .velar-case>p{font-size:17px;line-height:1.55;margin-bottom:35px}
 #case-content .velar-app-image{margin:25px 0 45px}
 #case-content .velar-video-gallery{grid-template-columns:1fr;gap:35px;margin-bottom:50px}
 #case-content .velar-sample{width:100%;max-width:360px;margin:0 auto}
 #case-content .velar-sample-heading h4{font-size:25px}
 #case-content .velar-process{grid-template-columns:1fr;margin:23px 0 45px}
 #case-content .velar-process li{padding:21px 40px 21px 0;border-bottom:1px solid #c7c7c4}
 #case-content .velar-process li:last-child{border-bottom:0}
 #case-content .velar-process li>span:not(.motion-arrow){max-width:none;font-size:12px}
 #case-content .velar-process strong{font-size:20px}
 #case-content .velar-process .motion-arrow{right:9px;top:26px;--arrow-x:0px;--arrow-y:9px}
 #case-content .velar-process .motion-arrow svg{transform:rotate(90deg)}
 #case-content .velar-case .case-columns{margin:23px 0 40px}
#case-content .velar-case .velar-authorship{font-size:15px}
}
@media(prefers-reduced-motion:reduce){
 #case-content .velar-frame::before,#case-content .velar-play-symbol::before{animation:none}
 #case-content .velar-play-symbol::before{display:none}
 #case-content .velar-sample,#case-content .velar-play-symbol,#case-content .velar-play-copy .motion-arrow{transition:none;transform:none}
}

/* VivaLED additions keep the established blue presentation and motion. */
#case-content .crm-case>h3{margin:0 0 22px}
#case-content .crm-case>p{font-size:20px;line-height:1.55;margin:0 0 45px;max-width:900px}
#case-content .crm-flow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));list-style:none;padding:7px 25px;margin:28px 0 15px;border:1px solid #8eb6c2;border-radius:18px;background:#e4f1f4}
#case-content .crm-flow li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:24px 12px 24px 0;font-size:17px}
#case-content .crm-flow .motion-arrow{display:block;width:19px;height:19px;flex-shrink:0}
#case-content .crm-case .crm-flow-note{font-size:14px;color:#5b5b56;margin-bottom:55px}
#case-content .crm-case .crm-authorship{font-size:17px;line-height:1.7}
#case-content .crm-case .content-note{font-size:11px;color:#5b5b56;margin-top:20px}
@media(max-width:700px){
 #case-content .crm-case>h3{font-size:31px}
 #case-content .crm-case>p{font-size:17px;margin-bottom:35px}
 #case-content .crm-flow{grid-template-columns:1fr;padding:6px 21px}
 #case-content .crm-flow li{padding:17px 0;border-bottom:1px solid #b7d0d8;font-size:18px}
 #case-content .crm-flow li:last-child{border-bottom:0}
 #case-content .crm-flow .motion-arrow{--arrow-x:0px;--arrow-y:9px}
 #case-content .crm-flow .motion-arrow svg{transform:rotate(90deg)}
 #case-content .crm-case .crm-flow-note{font-size:13px;margin-bottom:40px}
 #case-content .crm-case .crm-authorship{font-size:15px}
 #case-content .crm-case .content-note{font-size:11px}
}