.dragshift-feature{display:grid;grid-template-columns:1fr 1.05fr;gap:20px 38px;margin-top:23px;padding:36px 36px 28px;background:radial-gradient(ellipse at 83% 20%,#ed233417,transparent 58%),linear-gradient(130deg,#1a171855,#09090980)}.dragshift-copy{padding-top:12px;align-self:center}.dragshift-brand{display:flex;align-items:center;gap:13px}.dragshift-brand h2{margin:0;font-size:38px}.dragshift-copy .project-description{max-width:450px;font-size:15px}.dragshift-copy .project-category{margin-top:19px}.platform-note{font-size:11px;color:var(--muted);margin-top:18px;line-height:1.7}.dragshift-preview{position:relative;min-width:0;min-height:420px;display:flex;justify-content:center;align-items:center;padding:10px 38px 32px}.preview-shot{display:block;width:267px;max-width:90%;border-radius:16px;box-shadow:0 20px 55px #0006;transform:rotate(-3deg);transition:transform .25s;cursor:zoom-in}.preview-shot:hover{transform:rotate(0)}.preview-shot img{width:100%;border-radius:16px}.dial-shot{position:absolute;right:0;bottom:45px;width:165px;filter:drop-shadow(0 12px 20px #0008);transform:rotate(5deg);transition:transform .25s;cursor:zoom-in}.dial-shot:hover{transform:rotate(0) scale(1.03)}.preview-caption{position:absolute;bottom:3px;left:0;width:100%;text-align:center;font-size:10px;color:#b4b0b1;letter-spacing:.2px}.dragshift-mini-gallery{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:10px}.dragshift-mini-gallery>a{display:block;border:1px solid var(--border);border-radius:14px;background:#09090990;overflow:hidden;transition:border-color .2s;cursor:zoom-in}.dragshift-mini-gallery>a:hover{border-color:#ed233480}.dragshift-mini-gallery img{width:100%;height:220px;object-fit:contain;padding:14px 15px;background:radial-gradient(ellipse,#ed233418,transparent 80%)}.dragshift-mini-gallery span{display:flex;justify-content:space-between;border-top:1px solid var(--border);padding:13px 17px;font-size:12px;color:#b4b0b1}.dragshift-mini-gallery b{font-weight:400;color:white}.screenshot-viewer{color:#fff;border:1px solid #ffffff30;border-radius:19px;background:#090909;padding:14px;width:min(1100px,94vw);max-height:94vh;max-height:94dvh;box-shadow:0 25px 90px #0009}.screenshot-viewer::backdrop{background:#0e0e0edb;backdrop-filter:blur(9px)}.viewer-bar{display:flex;align-items:center;gap:12px;margin-bottom:12px}.viewer-title{margin:0;font-size:13px;line-height:1.5;flex:1;color:#d0cccd}.viewer-button{border:1px solid #ffffff26;color:#fff;background:#1a1718;border-radius:9px;min-width:38px;min-height:38px;font-size:21px;cursor:pointer}.viewer-button:hover{border-color:#ed2334;background:#ed233435}.viewer-button:focus-visible{outline:2px solid #ed2334;outline-offset:3px}.viewer-stage{height:min(74vh,780px);height:min(74dvh,780px);display:flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:11px;background:#111111;overflow:hidden}.viewer-stage img{max-width:100%;max-height:100%;object-fit:contain;width:auto;height:auto}.viewer-caption{display:flex;justify-content:space-between;gap:15px;color:#b4b0b1;font-size:11px;padding:12px 4px 2px;line-height:1.5}.image-modal-open{overflow:hidden}.project-page-intro{padding-top:45px;padding-bottom:35px;max-width:850px}.project-page-intro h1{margin-top:24px}.project-page-intro .hero-description{max-width:750px}.project-page-actions{display:flex;gap:14px;flex-wrap:wrap}.project-screens{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:30px}.project-screens figure{margin:0;padding:18px}.project-screens figure a{display:flex;align-items:center;justify-content:center;min-height:390px;cursor:zoom-in;background:radial-gradient(ellipse,#ed23340e,transparent 80%);border-radius:12px}.project-screens img{max-height:420px;object-fit:contain;max-width:100%}.project-screens figcaption{padding:17px 5px 5px}.project-screens h2{font-size:20px;letter-spacing:-.4px;margin:0 0 7px}.project-screens p{font-size:13px;color:var(--muted);margin:0}.project-details{display:grid;grid-template-columns:1fr 1fr;gap:20px}.project-details>div{padding:28px}.project-details h2{font-size:24px}.project-details p,.project-details li{font-size:14px;color:var(--muted);line-height:1.8}.project-details ul{padding-left:20px}.project-back{display:inline-block;color:var(--muted);font-size:13px;padding:8px 0}.project-back:hover{color:#fff}
@media(max-width:900px){.dragshift-feature{padding:26px;gap:15px 20px;grid-template-columns:1fr 1fr}.dragshift-preview{padding:15px 10px 30px;min-height:380px}.preview-shot{width:235px}.dial-shot{width:130px;right:-7px;bottom:55px}.dragshift-brand h2{font-size:32px}.dragshift-copy .feature-tags{grid-template-columns:1fr 1fr}.dragshift-copy .project-description{font-size:14px}.project-screens figure a{min-height:300px}.project-screens img{max-height:360px}}
@media(max-width:560px){.dragshift-feature{grid-template-columns:1fr;padding:24px 22px;gap:18px}.dragshift-copy{padding-top:0}.dragshift-copy .feature-tags{grid-template-columns:repeat(3,1fr)}.dragshift-brand h2{font-size:31px}.dragshift-brand img{width:48px;height:48px}.dragshift-copy .project-description{font-size:14px}.dragshift-preview{min-height:370px;padding-inline:28px}.preview-shot{width:230px}.dial-shot{width:138px;right:-4px;bottom:54px}.dragshift-mini-gallery{gap:12px;margin-top:3px}.dragshift-mini-gallery img{height:150px;padding:8px}.dragshift-mini-gallery span{padding:10px;font-size:10px;gap:6px}.project-page-intro{padding-top:32px}.project-page-intro h1{font-size:42px}.project-screens,.project-details{grid-template-columns:1fr;gap:16px}.project-screens figure{padding:15px}.project-screens figure a{min-height:260px}.project-screens img{max-height:420px}.project-details>div{padding:23px}.screenshot-viewer{padding:10px;border-radius:14px}.viewer-bar{gap:6px}.viewer-title{font-size:11px}.viewer-button{min-width:33px;min-height:34px;font-size:19px}.viewer-caption{font-size:10px}.viewer-stage{height:71dvh}}
@media(prefers-reduced-motion:reduce){.preview-shot,.dial-shot{transition:none}}
/* Preserve captured window proportions when displayed below their native size. */
.dragshift-preview img{width:100%;height:auto}.project-screens img{width:auto;height:auto}
/* Keep app captures upright, proportional and bounded inside the project card. */
.preview-shot,.preview-shot:hover{transform:none;width:min(267px,100%)}
.dial-shot,.dial-shot:hover{transform:none}
.dragshift-preview img{display:block;width:100%;height:auto;object-fit:contain}
@media(max-width:900px){.preview-shot,.preview-shot:hover{width:min(235px,100%)}}
@media(max-width:560px){.preview-shot,.preview-shot:hover{width:min(230px,100%)}}
.motion-section{grid-column:1/-1;min-width:0;margin:12px 0 4px}.motion-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin:12px 0 20px}.motion-heading .eyebrow{margin-bottom:9px}.motion-heading h2{font-size:28px;letter-spacing:-.7px;margin:0 0 8px}.motion-heading p:not(.eyebrow){font-size:12px;color:var(--muted);margin:0}.motion-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.motion-card{min-width:0;margin:0;border:1px solid var(--border);border-radius:14px;background:#090909;overflow:hidden}.recording-bar{display:flex;align-items:center;gap:7px;padding:11px 13px;font-size:8px;letter-spacing:1.1px;color:#b4b0b1;background:#1a171855;border-bottom:1px solid var(--border)}.recording-bar>span:last-child{margin-left:auto;letter-spacing:0;font-size:10px}.recording-dot{width:6px;height:6px;background:#ed2334;border-radius:50%}.motion-demo{display:block;width:100%;height:auto;aspect-ratio:984/628;object-fit:contain;background:#111111;pointer-events:none}.motion-card figcaption{padding:15px 17px}.motion-card h3{font-size:16px;letter-spacing:-.3px;margin:0 0 6px}.motion-card p{font-size:12px;line-height:1.7;color:var(--muted);margin:0}.motion-toggle{flex-shrink:0;border:1px solid var(--border);border-radius:24px;background:#1a171850;color:#b4b0b1;font:inherit;font-size:11px;padding:9px 13px;cursor:pointer}.motion-toggle:hover{border-color:#ed2334;color:white}.motion-toggle:focus-visible{outline:2px solid #ed2334;outline-offset:4px}.project-page-intro+.motion-section{margin-bottom:35px}
@media(max-width:700px){.motion-grid{grid-template-columns:1fr}.motion-heading{align-items:center}.motion-heading h2{font-size:25px}.motion-heading p:not(.eyebrow){font-size:11px}.motion-heading{gap:12px}.motion-toggle{font-size:10px;padding:9px 11px}.motion-card figcaption{padding:15px}.motion-demo{max-height:none}}