/* Small usability fixes for the original design. */
a:focus-visible,
button:focus-visible {
    outline: 2px solid #111;
    outline-offset: 5px;
}

.btn-primary { background: #111; color: #fff; }
.btn-primary:hover { background: #333; }
.btn:hover, .shot:hover, .plan:hover { transform: none; }
.plan { display: flex; flex-direction: column; }
.plan .plan-price { font-family: 'Golos Text', system-ui, sans-serif; font-size: 23px; font-variant-numeric: tabular-nums; line-height: 1.4; letter-spacing: -0.025em; }
.plan .plan-cta { align-self: flex-start; margin-top: auto; }
.plan-actions { margin-top: auto; display: flex; flex-direction: column; gap: 12px; }
.plan .plan-actions .plan-cta { margin-top: 0; width: 100%; text-align: center; padding: 12px 8px; }
.plan .plan-actions .order-cta { background: #111; color: #fff; }
.plan .plan-actions .order-cta:hover { background: #333; }
.plan .plan-actions .discuss-cta { background: #fff; color: #333; border-color: #ccc; }
.plan .plan-actions .discuss-cta:hover { border-color: #111; }
.plan ul { margin-bottom: 24px; }
.plan .plan-includes, .work-label, .shot-hint { color: #666; }
.case-link { display: inline-block; margin-top: 16px; font-size: 13px; color: #222; text-underline-offset: 4px; text-decoration: underline; }
.project li::before { content: '✓'; }
.contact-prompt { display: flex; align-items: center; justify-content: space-between; gap: 35px; padding-top: 55px; padding-bottom: 55px; }
.contact-prompt h2 { font-size: clamp(23px, 2.6vw, 30px); line-height: 1.3; margin-bottom: 14px; }
.contact-prompt p { max-width: 600px; color: #555; font-size: 15px; }
.contact-prompt .btn { flex-shrink: 0; }
.project[id] { scroll-margin-top: 20px; }

.assembly { background: #111; color: #fff; overflow: hidden; }
.assembly-inner { max-width: 1200px; margin: auto; padding: 28px 25px 18px; }
.assembly-caption { display: flex; justify-content: space-between; align-items: center; gap: 20px; font-size: 13px; color: #ccc; }
.assembly-toggle { font: inherit; font-size: 12px; background: transparent; color: #ddd; border: 1px solid #666; padding: 8px 14px; cursor: pointer; }
.assembly-toggle:focus-visible { outline-color: #fff; }
.assembly-stage { position: relative; max-width: 760px; height: 255px; margin: 25px auto 10px; }
.assembly-source { position: absolute; top: 13px; left: 0; color: #999; font-size: 12px; }
.assembly-window { position: absolute; right: 0; top: 0; width: 42%; height: 255px; border: 1px solid #555; border-radius: 8px; background: #181818; }
.window-toolbar { height: 38px; display: flex; align-items: center; padding: 0 13px; gap: 4px; border-bottom: 1px solid #444; }
.window-toolbar>span { height: 4px; width: 4px; background: #777; border-radius: 50%; }
.window-toolbar small { margin-left: auto; color: #aaa; font-size: 11px; }
.assembly-guide { position: absolute; left: 8%; width: 75%; border-top: 1px dashed #444; }
.guide-one { top: 78px; }.guide-two { top: 134px; }.guide-three { top: 190px; }
.assembly .module { position: absolute; left: 0; width: 32%; height: 44px; display: flex; align-items: center; gap: 12px; padding: 0 15px; background: #f5f5f3; color: #111; font-size: 14px; border: 1px solid #fff; border-radius: 4px; box-shadow: 0 3px 0 #9b9b98; animation: assemble 9s cubic-bezier(.65,0,.25,1) infinite; }
.module-a { top: 56px; }.module-b { top: 112px; }.module-c { top: 168px; }
.module-icon { width: 14px; height: 14px; flex-shrink: 0; border: 1px solid #333; position: relative; }
.icon-catalog::before { content: ''; position: absolute; top: 5px; width: 100%; border-top: 1px solid #333; }
.icon-catalog::after { content: ''; position: absolute; left: 5px; height: 100%; border-left: 1px solid #333; }
.icon-request { border-radius: 50%; }
.icon-request::after { content: ''; position: absolute; width: 5px; border-top: 1px solid #333; top: 5px; left: 3px; }
.icon-payment { border-radius: 2px; height: 11px; }
.icon-payment::after { content: ''; position: absolute; top: 2px; width: 100%; border-top: 2px solid #333; }
.module-arrow { margin-left: auto; color: #666; }
.window-slot { position: absolute; left: 14%; width: 77%; height: 44px; border: 1px solid #333; border-radius: 4px; }
.slot-one { top: 55px; }.slot-two { top: 111px; }.slot-three { top: 167px; }
.completion { position: absolute; right: 9%; bottom: 8px; font-size: 10px; color: #bbb; }
.completion>span { margin-left: 8px; }
.assembly .module-b { animation-delay: .35s; }
.assembly .module-c { animation-delay: .7s; }
.assembly .site-lines { animation: ink-in 9s ease infinite; }
.assembly .completion { animation: complete-in 9s ease infinite; }
.assembly.is-paused *, .assembly.is-offscreen * { animation-play-state: paused !important; }
@keyframes assemble { 0%,12% { transform: translateX(0); } 42%,76% { transform: translateX(200%); } 94%,100% { transform: translateX(0); } }
@keyframes ink-in { 0%,30%,95%,100% { opacity: .15; } 48%,78% { opacity: 1; } }
@keyframes complete-in { 0%,48%,92%,100% { opacity: 0; } 58%,78% { opacity: 1; } }
@media (max-width:768px) {
    .section, .works-section { padding-top: 48px; padding-bottom: 48px; }
    .grid { gap: 22px; }
    .card { padding-top: 18px; }
    .plan { padding: 24px; }
    .pricing { gap: 18px; }
    .contact-prompt { align-items: flex-start; flex-direction: column; gap: 23px; padding-top: 40px; padding-bottom: 40px; }
    .assembly-inner { padding: 22px 18px 12px; }
    .assembly-caption { font-size: 12px; }
    .assembly .module { font-size: 12px; padding: 0 9px; gap: 7px; }
    .module-arrow { display: none; }
    .assembly-stage { margin-top: 20px; }
    .assembly-window { width: 43%; }
    .window-toolbar>span { display: none; }
    .assembly-source { font-size: 11px; }
}
@media (prefers-reduced-motion:reduce) {
    .assembly .module { animation: none; transform: translateX(200%); }
    .assembly .site-lines, .assembly .completion { animation: none; opacity: 1; }
    .assembly-toggle { display: none; }
}

.lightbox-close:focus-visible {
    outline-color: #fff;
}

.section.container {
    padding-left: 25px;
    padding-right: 25px;
}

@media (max-width: 768px) {
    .hero.container,
    .section.container {
        padding-left: 18px;
        padding-right: 18px;
    }

    .menu a {
        display: inline-flex;
        align-items: center;
        min-height: 36px;
    }
}