.home-project-grid{grid-template-columns:1fr;gap:110px}
.cinematic-project{position:relative;margin-bottom:110px}
.showcase-title{font-size:clamp(30px,4.8vw,76px);line-height:1.08;letter-spacing:-.045em;margin:0 0 30px;max-width:900px}
.cinematic-project .project-image{height:clamp(420px,70vh,850px);padding:65px 7% 0;border-radius:16px}
.cinematic-project .browser-frame{width:100%;transform:none!important}
.cinematic-project .preview-window{aspect-ratio:1400/774;overflow:hidden;background:#17131e}
.cinematic-project .browser-frame img{display:block;width:100%;height:auto;aspect-ratio:1400/774;object-fit:cover}
.preview-reel{display:grid;grid-template-columns:minmax(0,1fr);gap:0;transform:translateY(0)}
.cinematic-project .preview-window .preview-reel img{height:auto;min-height:0;max-height:none;aspect-ratio:1400/774}
.cinematic-project .project-info{display:grid;grid-template-columns:1fr 1fr;gap:20px 50px;padding-top:30px}
.cinematic-project .project-info h3{font-size:clamp(26px,3vw,40px)}
.cinematic-project .eyebrow,.cinematic-project .project-kicker{font-size:12px}
.cinematic-project .project-info p{font-size:17px;margin:0}
.preview-toggle{display:none;margin:20px 0 0;background:transparent;color:var(--ink);border:1px solid #b69aff70;padding:12px 20px;border-radius:30px;font:inherit;cursor:pointer}
.preview-ready .preview-toggle{display:inline-flex;gap:18px;align-items:center}
.preview-toggle[aria-pressed=true]{background:#b69aff;color:#100c18}
.preview-toggle:focus-visible,.empty-project:focus-visible{outline:3px solid #b69aff;outline-offset:6px}
.next-project{border-top:1px solid var(--line);text-align:center;background:radial-gradient(ellipse at bottom,#60309233,transparent 70%)}
.next-project h2{font-size:clamp(44px,7vw,110px);line-height:1.02;margin:25px 0 50px;letter-spacing:-.05em}
.empty-project{display:flex;position:relative;isolation:isolate;overflow:hidden;flex-direction:column;align-items:center;justify-content:center;gap:22px;min-height:340px;max-width:1050px;margin:auto;border:1px dashed #b69aff80;border-radius:14px;padding:65px 24px 40px;background:#ffffff03}
.empty-project:before{content:'';position:absolute;inset:0;background:#a27beb;transform:translateY(101%);transition:transform .7s cubic-bezier(.2,.7,.2,1);z-index:-1}
.empty-project:hover:before,.empty-project:focus-visible:before{transform:translateY(0)}
.empty-project:hover,.empty-project:focus-visible{color:#100c18}
.empty-browser{position:absolute;top:0;left:0;width:100%;height:40px;border-bottom:1px solid #b69aff35;display:flex;align-items:center;gap:6px;padding-left:20px}
.empty-browser i{width:6px;height:6px;background:currentColor;border-radius:50%;opacity:.5}
.empty-plus{font-size:70px;font-weight:300;line-height:1;transition:transform .6s}.empty-project:hover .empty-plus{transform:rotate(90deg)}
.empty-title{font-size:clamp(21px,3vw,36px);line-height:1.2}.empty-action{font-size:16px;text-decoration:underline;text-underline-offset:6px}
/* Each sketch element occupies the same region as the finished screenshot. */
.build-wire{opacity:var(--wire,1)}
.build-sketch{background:transparent;transform:none;opacity:1}
.build-sketch>*,.sketch-copy>*{opacity:var(--pencil,0)}
.sketch-copy{opacity:1;transform:none;left:10%;right:10%;bottom:4%;text-align:center;align-items:center}
.sketch-copy strong{font-size:5.7cqi;text-transform:uppercase}
.sketch-logo{top:5%;left:10%;font-size:2.4cqi;transform:none}
.sketch-nav{top:6%;right:6%;font-size:1.7cqi}
.sketch-photo{inset:18% 25% 23%;transform:none}
.sketch-copy>span,.sketch-copy i{font-size:2cqi}
.sketch-note{bottom:40%;right:3%;font-size:2.6cqi}
.build-content{opacity:var(--develop,1);filter:grayscale(calc(1 - var(--finish,1)))}
.build-color{opacity:var(--finish,1);clip-path:none}
@media(min-width:1000px) and (prefers-reduced-motion:no-preference){.showcase-motion .cinematic-project .project-image{clip-path:inset(0 calc((1 - var(--opening,1))*4%) round 16px)}.showcase-motion .cinematic-project .browser-frame{transform:translateY(calc((1 - var(--opening,1))*45px)) scale(calc(.93 + var(--opening,1)*.07))!important;transform-origin:top center;transition:none}}
@media(max-width:760px){.home-project-grid{gap:65px}.cinematic-project{margin-bottom:65px}.cinematic-project .project-image{height:auto;padding:55px 4% 55px;border-radius:10px}.cinematic-project .project-info{display:block}.cinematic-project .project-info p{margin-top:18px;font-size:16px}.cinematic-project .project-kicker{font-size:10px}.empty-project{min-height:290px}.showcase-title{margin-bottom:20px}}
@media(prefers-reduced-motion:reduce){.preview-reel{transform:none!important}.preview-toggle{display:none!important}.empty-project:before,.empty-plus{transition:none}.build-sketch{display:none}.build-wire{opacity:0}.build-content,.build-color{opacity:1;filter:none}}

/* Subsequent screenshots contain sticky headers; crop only the preview copies. */
.preview-continuation{position:relative;overflow:hidden;aspect-ratio:1400 / var(--slice-height)}
.cinematic-project .preview-window .preview-continuation img{position:absolute;inset:0 0 auto;transform:translateY(var(--header-offset));width:100%;height:auto}
.cinematic-project .maler .preview-continuation{margin-top:6.85714286%}
.cinematic-project .maler .preview-reel{background:#f5f2ea}

/* Animated source sections are separate views, not a continuous page capture. */
.cinematic-project .diana .preview-reel{position:relative;aspect-ratio:1400/774;display:block}
.cinematic-project .diana .preview-continuation{position:absolute;inset:0;aspect-ratio:auto;opacity:0}
.cinematic-project .diana .preview-window .preview-continuation img{transform:none;aspect-ratio:1400/774}

.cinematic-project .diana .preview-reel .diana-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .5s}
.cinematic-project .diana .preview-reel .diana-slide:first-child{opacity:1}
.slide-choices,.gallery-choices{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0}
.slide-choice,.gallery-choices button{font:inherit;font-size:14px;padding:10px 14px;border:1px solid #b69aff70;background:#17131e;color:#f3f1f8;border-radius:24px;cursor:pointer}
.slide-choice[aria-pressed=true]{background:#b69aff;color:#100c18}
@media(prefers-reduced-motion:reduce){.cinematic-project .diana .preview-reel .diana-slide{transition:none}}

.cinematic-project .project-info h3{font-family:Inter,sans-serif;font-weight:600;letter-spacing:-.025em}

@media(max-width:999px) and (prefers-reduced-motion:no-preference){
.showcase-motion .cinematic-project .browser-frame{transform:translateY(calc((1 - var(--opening,1))*14px)) scale(calc(.97 + var(--opening,1)*.03))!important;transform-origin:top center;transition:none}
}
@media(hover:none) and (prefers-reduced-motion:no-preference){.empty-project:active:before{transform:translateY(0)}.empty-project:active{color:#100c18}.project-image:active::after{opacity:1}}

/* The invitation fills and clears itself on touch screens while visible. */
@keyframes invitation-fill{0%,12%,100%{transform:translateY(101%)}42%,64%{transform:translateY(0)}}
@keyframes invitation-ink{0%,16%,88%,100%{color:var(--ink)}42%,64%{color:#100c18}}
@keyframes invitation-plus{0%,12%,100%{transform:rotate(0)}42%,64%{transform:rotate(90deg)}}
@media(hover:none) and (prefers-reduced-motion:no-preference){
.empty-project.auto-invitation{animation:invitation-ink 7s ease-in-out infinite;animation-play-state:paused}
.empty-project.auto-invitation:before{animation:invitation-fill 7s ease-in-out infinite;animation-play-state:paused}
.empty-project.auto-invitation .empty-plus{animation:invitation-plus 7s ease-in-out infinite;animation-play-state:paused}
.empty-project.auto-invitation.invitation-visible,.empty-project.auto-invitation.invitation-visible:before,.empty-project.auto-invitation.invitation-visible .empty-plus{animation-play-state:running}
}