/* A quiet persistent invitation. Movement is triggered by interaction only. */
header .contact{display:inline-flex;align-items:center;gap:19px;flex-shrink:0;background:#cdb89308;border:1px solid #bfa68670;color:inherit;padding:10px 12px 10px 22px;font-size:15px;font-weight:500;transition:background .3s,color .3s,border-color .3s}
.contact-label{position:relative;display:block;overflow:clip;line-height:1.5}
.contact-ink,.contact-echo{display:block;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.contact-echo{position:absolute;inset:0;transform:translateY(110%)}
.contact-arrow{display:grid;place-items:center;width:33px;height:33px;border-radius:50%;background:#cdb89315;font-size:23px;font-weight:400;transition:rotate .45s,background .3s,color .3s}
header .contact:is(:hover,:focus-visible){background:#cdb89316;border-color:#cdb893;box-shadow:none}
header .contact:is(:hover,:focus-visible) .contact-ink{transform:translateY(-110%)}
header .contact:is(:hover,:focus-visible) .contact-echo{transform:translateY(0)}
header .contact:is(:hover,:focus-visible) .contact-arrow{rotate:45deg;background:#cdb893;color:#211f19}
html[data-reader-header=process] header .contact{background:#25241d08;border-color:#25241d70;color:#25241d}
html[data-reader-header=process] header .contact:is(:hover,:focus-visible){background:#fff1de28;border-color:#25241d}
header nav a{transition:color .3s,translate .3s}header nav a:hover{translate:0 -2px}
.magnetic-control{translate:var(--mag-x,0px) var(--mag-y,0px);transition:translate .4s cubic-bezier(.2,.8,.2,1)}
header .contact.magnetic-control{transition:translate .4s cubic-bezier(.2,.8,.2,1),background .3s,border-color .3s,box-shadow .4s}
.primary{border:1px solid #f8e5c7;background:#fff1de;transition:background .3s,box-shadow .4s,translate .4s}
.primary:hover{background:#ffcf97;box-shadow:0 0 0 6px #ffcf9715}
.quote-action.magnetic-control{transition:translate .4s cubic-bezier(.2,.8,.2,1),background .3s,color .3s,transform .35s,box-shadow .35s}
.copy:not(.quiet-copy) .return,.copy:not(.quiet-copy) .quick-link{transition:color .3s,border-color .3s,translate .35s}
.copy:not(.quiet-copy) .return:hover,.copy:not(.quiet-copy) .quick-link:hover{color:#ffd9a7;border-color:#ffd9a7;translate:4px 0}
.frames button{transition:color .3s,opacity .3s,translate .3s}.frames button:hover{opacity:1;color:#ffc781;translate:0 -3px}
.scroll-cue{transition:translate .4s}.scroll-cue:hover{translate:0 5px}

/* Gallery: one typographic hierarchy, a restrained register and a real rail. */
.copy.works{top:22svh;width:33vw}
.works .eyebrow{margin-bottom:24px;color:#c6b69d}
.works h2{font-size:clamp(36px,3.7vw,74px);line-height:1.08;letter-spacing:-.055em;margin-bottom:37px}
.project-register{display:flex;gap:24px;align-items:center;margin-bottom:16px;padding-top:17px;border-top:1px solid #d1ac773d;font-size:12px;letter-spacing:.065em}
.project-ordinal{color:#f1bc7b;font-variant-numeric:tabular-nums}.project-domain{color:#a9aaa1;letter-spacing:0;font-size:13px}
.works .project-description{font-size:clamp(31px,2.65vw,52px);line-height:1.13;letter-spacing:-.045em;margin-bottom:10px;color:#fff1de}
.works .project-category{font-size:18px;line-height:1.5;margin-bottom:24px;color:#c5c4b9}
.works .project-link{display:inline-block;border:1px solid #e8c18e70;border-radius:35px;padding:12px 23px;font-size:15px;background:#e3bd8210}
.works .project-link:hover{background:#fff1de;color:#211f19;border-color:#fff1de;translate:0 0}
.project-link.strip-text::after{display:none}
.project-nav{display:flex;align-items:center;gap:12px;width:fit-content;margin:26px 0 24px;pointer-events:auto}
.project-controls{display:flex;gap:0;border:1px solid #d5b28445;border-radius:40px;padding:4px;margin:0;background:#100f0c70}
.project-controls button{border:0;border-radius:50%;width:43px;height:43px;margin:0;opacity:1;color:#b7aa95;font-size:13px;transition:background .3s,color .3s,translate .35s,box-shadow .3s}
.project-controls button .strip-wrap{margin:auto}
.project-controls button[aria-current=true]{background:#f4c081;color:#211e17;box-shadow:0 0 0 1px #f4c081}
.project-controls button:hover{background:#fff1de;color:#211e17}
.project-prev,.project-next{display:grid;place-items:center;width:44px;height:44px;border:1px solid #d5b28465;border-radius:50%;font-size:24px;color:#f4dec2;transition:background .3s,color .3s,border-color .3s,translate .35s}
.project-prev:hover,.project-next:hover{background:#f4c081;color:#211e17;border-color:#f4c081}
.project-prev .strip-wrap,.project-next .strip-wrap{width:100%}
.portfolio-exit{color:#adab9f;font-size:14px}
html[data-project-moving=true] .project-controls{border-color:#f4c081}

/* Movement belongs to the page objects, without a decorative cursor. */
.fold-system{transform:rotate(calc(var(--q-x)*11deg + (1 - var(--strip-phase,1))*-35deg)) scale(calc(.92 + var(--strip-phase,1)*.08))}
.step-digit{translate:calc(var(--q-x)*3px) calc(var(--q-y)*-3px);transition:transform .65s cubic-bezier(.2,.8,.2,1),color .4s,-webkit-text-stroke .4s,translate .7s}
.object-price{transform:translateX(calc(var(--q-x)*-7px))}
@media(min-width:1001px) and (max-height:850px){.copy.works{top:17svh}.works h2{font-size:3.4vw;margin-bottom:23px}.works .eyebrow{margin-bottom:18px}.project-register{margin-bottom:13px;padding-top:13px}.works .project-description{font-size:2.7vw}.works .project-category{margin-bottom:18px}.project-nav{margin:20px 0 16px}}
@media(max-width:1000px){header .contact{font-size:13px;padding-left:14px;gap:10px}.contact-arrow{width:27px;height:27px;font-size:20px}.copy.works{width:40vw}.works h2{font-size:4.5vw}.works .project-description{font-size:30px}.works .project-category{font-size:16px}.project-nav{gap:8px}.project-controls button{width:37px;height:37px}.project-prev,.project-next{width:35px;height:35px;font-size:21px}}
@media(max-width:700px){header .contact{font-size:12px;gap:7px;padding:7px 8px 7px 11px}.contact-arrow{width:23px;height:23px}.copy.works{width:62vw}.works h2{font-size:6.8vw}.works .project-description{font-size:29px}.project-domain{font-size:11px}.project-register{gap:14px}.project-nav{gap:6px}}
/* Selected services explain the practical benefit rather than their title. */
.quiet-copy .scope-grid{padding-bottom:153px}
.quiet-copy .scope-grid dd{height:130px;font-size:clamp(18px,1.35vw,20px);line-height:1.55}
.quiet-copy .scope-grid dd::before{content:"Что это даёт"}
.copy.contacts{width:50vw}
.copy.contacts h2{font:400 clamp(42px,5vw,88px)/1.1 Manrope,Arial,sans-serif;letter-spacing:-.055em;margin-bottom:28px}
.contact-title-accent{color:#eee2cf}
.copy.contacts .description{font-size:clamp(18px,1.35vw,22px);line-height:1.55;margin-bottom:24px}
.contacts .contact-options{gap:28px}
.contacts .contact-options button{font-size:16px;padding:14px 0}
.copy.contacts .return{margin-top:30px}
@media(max-width:800px){.copy.contacts{width:82vw}.copy.contacts h2{font-size:8vw}.quiet-copy .scope-grid{padding-bottom:195px}.quiet-copy .scope-grid dd{height:170px}}
@media(hover:none),(pointer:coarse){.magnetic-control{translate:none}}
@media(prefers-reduced-motion:reduce){.magnetic-control,.step-digit{translate:none!important}.contact-ink{transform:none!important}.contact-echo{display:none}header .contact,.contact-arrow,.primary,.project-nav button,.project-controls,.frames button,header nav a{transition:none}.fold-system{transform:none}}

/* BLIKO wordmark follows the site type and switches with the reading chapters. */
header .logo{font-weight:600;letter-spacing:-.055em;line-height:1}